How to prevent jQuery mobile's automatic page styling? - jquery-mobile

jQuery mobile automatically adds classes to all elements on my page on loading... this really messes up the jQuery UI widgets I have on the page. Is there any way to prevent jQuery mobile from automatically adding classes to my HTML elements? I only wan't some of the jQuery mobile widgets on my page, and I want to specify them explicitly.

You can ask jquery mobile not to touch your widget by putting the attribute below:
data-role="none"

Related

JQuery Mobile splitview change

How to use $.mobile.changePage in Jquery Splitview?
The page transition must be performed using Javascript code

jquery ui dialog disables input text and textarea

I have an html page which has some html form elements and jquery
if I open the html page as a standalone page, everything seems fine, however, if I open the page as jquery ui dialog whithin an aspx web forms page (I get the contents of the html page through jquery ajax method), the input elements text and textarea are not enabled, but select lists are enabled.
The problem is coused by modal property.
If the modal is false, then the fields are editable
Any ideas why this happens this?

jQuery mobile is messing with my links

I'm using using jQuery mobile. Testing my web page on iPhone.
Here is the issue:
I am on http://www.mywebsite.com/here.html and I have an anchor on that page that points to
href="http://www.mywebsite.com/some/folder/there.html", I'm navigated to
http://www.mywebsite.com/here.html#/some/folder/there.html
If I remove jQuery mobile js file, everything works as expected. So it looks like jQuery mobile is intercepting my 'tap' event and modifies url to the link. Weird. Why is it doing that?
Looks like this is done on purpose to help you with animated page transitions and such.
I can turn it off by adding this attribute to the anchor data-ajax="false"

is it possible to use jQuery Mobile Forms in my webpage

I love the way jquery mobile renders a form, is it possible to embedded a jquery-mobile-form in a table, div or any container in my webpage?, to be clear: I have a html5 webpage anf the layout is done by divs and css, is it possible to include a jquery-mobile-form in one of the divs.
I have been tried to do that but jquery-mobile-form always takes the 100% of the page, I want to use the form in an specific high/with div container, is that possible?
Thanks!
Yes, you can adjust the size of this forms like any other div elements.
Just wrap the form in a block element and apply the css "width"-attribute on it.
I created a Fiddle for that:
adjust jQueryMobile form size fiddle

Apply jQuery UI CSS Across Entire Site

I was wondering - is it possible to apply the jQuery UI CSS to an entire site without having to apply it individually upon elements?
So, for example, instead of having to do:
<input type="button" value="Submit" class="ui-state-default ui-corner-all" />
to all my buttons, I instead have some sort of class applied at at top-level DIV which will change the entire site whenever it can be (any element that jQuery UI can handle). If it's not possible, it's no big deal, but it would be great if it is.
Yes. You can just call
$('button').button()
from your script to select all button elements using jQuery and apply the jQuery UI button theming to them. See, for example, the sample code on the jQuery UI button demo.
I suppose you could apply it on the $(document).ready(function(){$("*").addClass("ui-state-default")});
This is not tested, so don't take my word for it.

Resources