All Collections
Training and guides
Initializing controls in Javascript
Initializing controls in Javascript

You'll find examples for how to initialize a controls with the Mobiscroll plain Javascript API

Zsombor Deak avatar
Written by Zsombor Deak
Updated over a week ago

You can use the Mobiscroll plain JS API everywhere where Javascript runs. No need to load jQuery or any other framework just for Mobiscroll.

Make sure to have Mobiscroll installed and loaded in your project. See examples (HTML & JS snippets) that you can grab and try locally.

Calendar

HTML

<input id="calendar" placeholder="Please Select...">

JS

mobiscroll.calendar('#calendar');

Color

HTML

<input id="color" placeholder="Please Select...">

JS

mobiscroll.color('#color');

Date & Time

HTML

<input id="datetime" placeholder="Please Select...">

JS

mobiscroll.datetime('#datetime');

Event Calendar

HTML

<input id="eventcalendar" placeholder="Please Select...">

JS

mobiscroll.eventcalendar('#eventcalendar', {
    data: [{
        start: new Date(2016, 1, 1),
        end: new Date(2016, 1, 2),
        text: 'Conference',
        color: 'red'
    }, {
        d: '12/25',
        text: 'Christmas'
    }]
});

Forms

HTML

<div id="myform" mbsc-enhance>
    <label>
        Username
        <input name="username">
    </label>
    <label>
        Password
        <input name="password" type="password">
    </label>
    <button type="submit">Sign In</button>
</div>

JS

mobiscroll.settings = {
    theme: 'mobiscroll'
};

Image

HTML

<ul id="image" style="display:none">
    <li data-val="Share" data-icon="share">
        <p>Share</p>
    </li>
    <li data-val="Delete" data-icon="remove">
        <p>Delete</p>
    </li>
</ul>

JS

mobiscroll.image('#image', { 
    enhance: true
});

Listview

HTML

<ul id="list">
    <li>Apples</li>
    <li>Cakes</li>
    <li>Bottles of Juice</li>
</ul>

JS

mobiscroll.listview('#list');

Measurement

HTML

<input id="temperature" placeholder="Please Select..." />

JS

mobiscroll.temperature('#temperature');

Menustrip

HTML

<ul id="menustrip">
    <li data-icon="connection">Wifi</li>
    <li data-icon="location">Location</li>
    <li data-selected="true" data-icon="volume-medium">Sound</li>
</ul>

JS

mobiscroll.menustrip('#menustrip');

Number

HTML

<input id="number" placeholder="Please Select...">

JS

mobiscroll.number('#number');

Numpad

HTML

<input id="numpad" placeholder="Please Select...">

JS

mobiscroll.numpad('#numpad');

Range

HTML

<input id="range" placeholder="Please Select...">

JS

mobiscroll.range('#range');

Rating

HTML

<input id="rating" placeholder="Please Select...">

JS

mobiscroll.rating('#rating');

Scroller

HTML

<input id="scroller" placeholder="Please Select...">

JS

mobiscroll.scroller('#scroller', { 
    showLabel: true,
    wheels: [
        [{
            label: 'First wheel',
            data: ['0', '1', '2', '3', '4', '5', '6', '7']
        }, {
            label: 'Second wheel',
            data: [{
                value: 0,
                display: 'a'
            }, {
                value: 1,
                display: 'b'
            }, {
                value: 2,
                display: 'c'
            }, {
                value: 3,
                display: 'd'
            }]
        }]
    ]
});

Select

HTML

<select name="City" id="select">
    <option value="1">Berlin</option>
    <option value="2">London</option>
    <option value="3">New York</option>
    <option value="4">Paris</option>
</select>

JS

mobiscroll.select('#select');

Timer

HTML

<input id="timer" placeholder="Please Select...">

JS

mobiscroll.timer('#timer');

Timespan

HTML

<input id="timespan" placeholder="Please Select...">

JS

mobiscroll.timespan('#timespan');

Treelist

HTML

<ul id="list">
    <li>America
        <ul>
            <li>Mexico</li>
            <li>Brasil</li>
        </ul>
    </li>
    <li>Europe
        <ul>
            <li>Germany</li>
            <li>France</li>
            <li>Italy</li>
        </ul>
    </li>
    <li>Asia
        <ul>
            <li>China</li>
        </ul>
    </li>
</ul>

JS

mobiscroll.treelist('#treelist');

Widget

HTML

<div id="widget" style="display: none;">
    <h3 class="md-text-center">Hi</h3>
    <p class="md-text-center">Are you feeling good today?</p>
</div>

<button id="show">How are you feeling?</button>

JS

var instance = mobiscroll.widget('#widget');

document
    .getElementById('show')
    .addEventListener('click', function () {
        instance.show();
    }, false);

What's next?

Did this answer your question?