Contents
General Calendar Color Date & Time Forms Image Listview Measurement Menustrip Number Numpad Range Rating Scroller Select Timer Timespan Treelist Widget Tools Accessibility Integration

Welcome to the Mobiscroll API Reference. You can find the most up to date information about usage and customization options here.

Requires jQuery >= 1.7 or Zepto.js >= 1.0
Supported Platforms - Android 2.3+ including Android Marshmallow, iOS 5+ including iOS 10, Blackberry, Amazon Fire, Windows Phone 8+ and all major mobile and desktop browsers

Having trouble? Ask for help.


Getting Started with Mobiscroll for JQuery

Mobiscroll is a collection of UI components that helps deliver great mobile apps, websites with a great user experience and in getting five-star app store reviews. The controls follow platform UX guidelines and can be styled with the Theme Builder for a perfect fit.

To get started, follow these simple steps.

1. Download Mobiscroll

When building your package, select the required components on the download page.

2. Load the necessary scripts

Mobiscroll is relying on jQuery, Zepto.js (libraries with jQuery compatible API) or a custom jQuery build which contains the minimal functionality required by Mobiscroll, so make sure you include what you're going to use.

Requires jQuery >= 1.7, Zepto.js >= 1.0 or our custom jQuery build (download here)

<!-- Include the framework -->
<script src="jquery-2.2.2.min.js"></script>
<!-- or -->
<script src="zepto.js"></script>
<!-- or -->
<script src="jquery.custom.min.js"></script>
<!-- Include Mobiscroll -->
<script src="js/mobiscroll.custom-2.17.3.min.js"></script>
<link href="css/mobiscroll.custom-2.17.3.min.css" rel="stylesheet" type="text/css">

3. Add an input to your HTML markup

<input id="scroller" />

4a. Initialize your component (jQuery)

Default date picker
$(function () {
    // create a datepicker with default settings
    $("#scroller").mobiscroll().date();
});
Default time picker
$(function () {
    // create a timepicker with default settings
    $("#scroller").mobiscroll().time();
});
Default datetime picker
$(function () {
    // create a datetimepicker with default settings
    $("#scroller").mobiscroll().datetime();
});

4b. Initialize your component (jQuery Mobile)

One of the first things people learn in jQuery is to use the $(document).ready() (or $(function() { }) ) function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the onload event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the pageinit event.

Default date picker
$(document).on('pageinit', '#testPage', function () {
    // create a datepicker with default settings
    $("#scroller").mobiscroll().date();
});

For more examples check out the demo page.

Global Settings

$.mobiscroll.setDefaults(options)

Description

The global mobiscroll object is the place where you can set all the options that you'll be needing across your application or page. It should contain the settings that need to be the same across all components.

Example
// Sets the theme to iOS and localization to German
$.mobiscroll.setDefaults({
    theme: 'ios',
    lang: 'de'
});
Preorder available for Ember JS
What you'll get:
- Exclusive Early Beta Access
- Show your interest in the product. Based on the preorders we'll set the development and shipping priorities
- Get access to the full Framework until we ship
- Support and Maintenance is on us until we release the Mobiscroll for Ember
- We believe in delivering great products so if for any reason you are not satisfied, you'll get a full refund