Affix

Add affix behavior to any element. Use offsets to define when to toggle the pinning of an element on and off.

The subnavigation on the left is a live demo of the Affix module.

Declarative

<div data-dojo-type="dobolo/Affix" data-dojo-props="offsetTop: 100, offsetBottom: 100">
    ...
</div>

Programmatic

var affix = new Affix({
    offsetTop: 100,
    offsetBottom: 100
}, dom.byId('my-affix'));

Properties

Name Type Default
offsetTop number, function 0
offsetBottom number, function 0

Alert

Find the Bootstrap CSS reference for alerts on the Bootstrap website.

Holy guacamole! Best check yo self, you're not looking too good.

Declarative

<div data-dojo-type="dobolo/Alert" class="alert alert-warning alert-dismissable">
    <button class="close">&times;</button>
    <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
    
    <script type="dojo/on" data-dojo-event="close" data-dojo-args="ev">
        console.info('Alert about to be closed');
    </script>
    
    <script type="dojo/on" data-dojo-event="closed" data-dojo-args="ev">
        console.info('Alert is now closed');
    </script>
</div>

Programmatic

var alert = new Alert({
    'class': 'alert fade in',
    content: "<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.",
    closable: true
}, 'my-alert');

alert.startup();

alert.on('close', function (ev) {
    console.info('Alert about to be closed');
});

alert.on('closed', function (ev) {
    console.info('Alert is now closed');
});

Properties

Name Type Default
content string
closable boolean true

Methods

Name Returns
close() undefined

Events

Name
close
closed

Button

Find the Bootstrap CSS reference for buttons on the Bootstrap website.

Stateful Button

Declarative

<script>
    var load = function (ev) {
        var button = this;
        button.loading();
        setTimeout(function () { button.reset(); }, 2000);
    }
</script>

<button class="btn btn-primary" data-dojo-type="dobolo/Button" data-dojo-props="onClick: load, loadingText: 'Loading...', resetText: 'Loaded'">Load</button>

Programmatic

var button = new Button({
    type: 'submit',
    'class': 'btn btn-primary',
    label: 'Load',
    loadingText: 'Loading...',
    resetText: 'Loaded',
    onClick: function (ev) {
        this.loading();
        setTimeout(lang.hitch(this, function () {
            this.reset();
        }), 2000);
    }
}, 'my-button');

button.startup();

Checkbox Button

Declarative

<div class="btn-group">
    <button class="btn" data-dojo-type="dobolo/Button" data-dojo-props="mode:'checkbox'">Left</button>
    <button class="btn" data-dojo-type="dobolo/Button" data-dojo-props="mode:'checkbox'">Middle</button>
    <button class="btn" data-dojo-type="dobolo/Button" data-dojo-props="mode:'checkbox'">Right</button>
</div>

Programmatic

var makeButton = function (id, label) {
    return new Button({
        'class': 'btn',
        label: label,
        mode: 'checkbox'
    }, id);
}

makeButton('l', 'Left').startup();
makeButton('m', 'Middle').startup();
makeButton('r', 'Right').startup();

Radio Button

Declarative

<div class="btn-group">
    <button class="btn" data-dojo-type="dobolo/Button" data-dojo-props="mode:'radio',group:'my-group'">Left</button>
    <button class="btn" data-dojo-type="dobolo/Button" data-dojo-props="mode:'radio',group:'my-group'">Middle</button>
    <button class="btn" data-dojo-type="dobolo/Button" data-dojo-props="mode:'radio',group:'my-group'">Right</button>
</div>

Programmatic

var makeButton = function (id, label) {
    return new Button({
        'class': 'btn',
        label: label,
        mode: 'radio',
        group: 'my-group'
    }, id);
}

makeButton('l', 'Left').startup();
makeButton('m', 'Middle').startup();
makeButton('r', 'Right').startup();

Properties

Name Type Default
loadingText string Loading...
resetText string Loaded
mode string
group string

Methods

Name Returns
loading() undefined
reset() undefined
toggle() undefined

DatepickerInput

Dropdown calendar to set a date into an input field. Please make sure to reference the Dobolo calender.css stylesheet. The locale for the datepicker can be set in dojoConfig.

Declarative

<input class="form-control" type="text" data-dojo-type="dobolo/DatepickerInput" data-dojo-props="value: new Date(), format: 'full', weekStart: 0">

Programmatic

var dp = new DatepickerInput({
    value: new Date(),
    format: 'full',
    'class': 'form-control'
}, 'my-datepicker-input');

dp.on('show-calendar', function (ev) {
    console.info('Calendar is now shown');
});

dp.on('hide-calendar', function (ev) {
    console.info('Calendar is now hidden');
});

dp.watch('date', function (prop, oldVal, val) {
    console.info('Date is now ' + val);
});

dp.startup();

Properties

Name Type Default Description
value Date
weekStart number 0 0 for sunday, 1 for monday, 2 for tuesday etc
format string long short, medium, long, full

Events

Name
show-calendar
hide-calendar

ScrollSpy

This page with the subnavigation on the left is a live demo of the ScrollSpy module applied to <body> and below is an example of ScrollSpy applied to an element with overflow: auto

a

b

Declarative

When using ScrollSpy on <body>, make sure to start the parser on the <html> element: parser.parse(query('html')[0]);

<nav id="my-navbar" class="navbar navbar-default" role="navigation">
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#a">a</a></li>
            <li><a href="#b">b</a></li>
        </ul>
    </div>
</nav>

<div data-dojo-type="dobolo/ScrollSpy" data-dojo-props="targetSelector: '#my-navbar', offsetsSelector: 'section', offsetTop: 0, wait: 0" class="scrollspy-example-scroll-section">
    <section id="a">
        <h1>a</h1>
    </section>

    <section id="b">
        <h1>b</h1>
    </section>
</div>

Programmatic

var scrollSpy = new ScrollSpy({
    targetSelector: '#my-navbar',
    offsetsSelector: 'section',
    offsetTop: 0,
    wait: 0
}, query('.scroll-section')[0]);

Properties

Name Type Default
targetSelector string
offsetsSelector string
offsetTop number 0
wait number 100