Jquery mobile using only controls?

Question

I'm interested in using jQuery for mobile controls, but only the way I can use it using the "page" tag.

Using the page makes a lot of automatic injection in html plus links, etc. goes through ajax button to return. I'm not interested in all kinds of auto ui.

How can I use only jQuery for mobile controls (buttons, links, lists, etc.) without making the whole jQuery page for the whole page?

Answer 1

From jQuery Mobile Alpha 2 Release Notes :

Global configuration

jQuery Mobile now has several ways to override the initial configuration from several aspects of the structure (for example, disabled Ajax-style links or forms). This can allow you to sculpt jQuery Mobile to work in situations that are more specialized and not suitable for the full framework design methodology (giving you the opportunity to use only a couple of widgets, and not the structure as a whole, for example).

---

So you can work with jQuery Mobile à la carte by disabling bits that you don't need. For example, to disable adiaxial navigation and forms:

$(document).live("mobileinit", function() { $.mobile.ajaxLinksEnabled = false; $.mobile.ajaxFormsEnabled = false; }); 

NB , as the related documents page says, you will need to execute your JavaScript code (for example, the snippet above) before loading jQuery Mobile, so import your scripts like this:

 <script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script> 

Answer 2

I also wanted to do this. However, I wanted to add controls to a page that already used the jQuery user interface, so there were some additional steps.

• I also had to disable ajax processing so that my normal (non-jqm) buttons send / work fine

   $(document).live("mobileinit", function() { $.extend($.mobile, { autoInitializePage: false, linkBindingEnabled: false, ajaxEnabled: false }); }); 

• JQM and jQuery UI have a widget named 'button', so one overwrites the other, so I changed the name of the JQM widget to mbutton to stop the collision

   $.widget("mobile.mbutton", $.mobile.widget, { 

• In the JQM initialization code, stop hiding content during rendering, since we set autoInitializePage = false, so we want to avoid a timeout of 5 seconds to show the page

   if ($.mobile.autoInitializePage) { // Add mobile, initial load "rendering" classes to docEl $html.addClass("ui-mobile ui-mobile-rendering"); // This is a fallback. If anything goes wrong (JS errors, etc), or events don't fire, // this ensures the rendering class is removed after 5 seconds, so content is visible and accessible setTimeout(hideRenderingClass, 5000); } 

• JQM and JQUI have a css ui icon that collides, so I added an additional ".ui-mobile" selector to JQM css in two places:

   /* Icons ----------------------------------------------------*/ .ui-mobile .ui-icon, .ui-mobile .ui-icon-searchfield:after { ... /* Alt icon color ----------------------------------------------------*/ .ui-mobile .ui-icon-alt { 

• Just initialize the controls, like any jQuery UI controls, for example:

   $(".my-slider").slider(); 

Disclaimer: I used only the slider as a toggle switch, so there may be more css and js to fix, and I needed to make some custom CSS settings to move the slider to its track.

Hth anyone who wants to do the same.

Answer 3

JQuery Mobile has added a builder in which you can choose which parts to include:

http://jquerymobile.com/download-builder/