Using Mobiscroll with jQuery Mobile
Installing Mobiscroll in your jQuery Mobile app takes a couple of minutes. Let's see how you can start with a simple app.
Start a trial
First, start a free trial by entering your email address on the Mobiscroll homepage and create your account.
This is how the free trial works:
- You can try Mobiscroll for free.
-
The trial needs an active connection to Mobiscroll servers for validation. Don't worry, the licensed product will work offline with downloadable resource files.
Read about the differences between trial and licensed products. - You can upgrade to the licensed product at any time during or after your trial.
Enter your first name, set a password and you're ready to go!
Select jQuery. Then hit the big blue button.
Initializing Mobiscroll components
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. Otherwise the components initialization is the same as in the jQuery version.
$(document).on('pageinit', '#testPage', function () {
// create a datepicker with default settings
$("#scroller").mobiscroll().date();
});
Using Mobiscroll Form elements
The Mobiscroll form elements can only be used on a jQuery Mobile pages if the JQM auto enhancing is turned off. To prevent jQuery Mobile from enhancing an entire block of content add data-enhance="false"
to the parent container and nothing within the container will be enhanced. To use data-enhance="false"
you must also set $.mobile.ignoreContentEnabled
to true prior to initialization. Make sure to set the $.mobile.ignoreContentEnabled
to true before the jQuery Mobile script is loaded in the mobileinit
event.
<script>
$(document).on("mobileinit", function () { $.mobile.ignoreContentEnabled = true; });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Other ways to get started
To see how mobiscroll is installed in a jQuery Mobile project you can download the Starter for jQuery Mobile.