jquery.mobile overrides Jquery UI theme:

Question

When i am embeding jquery.mobile-1.1.0.css and jquery.mobile-1.1.0.js in my project it override my already using Jquery UI theme :

Means my all buttons become white rounded shape just as a button used in mobile sites and Center loading image circle is always there . Then i placed both of these on the top of all scripts and stylesheets but then also the jquery UI sliders and other things are not working properly but buttons problem and that center images circle prolem gone.

Can anybody tell me whats happening here?

Answer 1

jquerymobile overwrites some css classes that are used by jquery-ui . As for why it doesnt work even if you move the scripts to the top is because jquerymobile framework enhances some elements automatically on document ready(you could specify not to enhance some elements by configuring some of the default options like

$.mobile.selectmenu.prototype.options.nativeMenu for select menus etc.

Enhancement of certain elements can be prevent by not giving them the data-attributes that are required by jquerymobile, but certain elements like buttons are automatically enhanced without any mentioning any attributes specific to jquerymobile.

Answer 2

Change the order of their inclusions in main page

<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery.mobile-1.1.0.css"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery.mobile-1.1.0.js"></script>

to

<script src="http://code.jquery.com/ui/1.8.18/jquery.mobile-1.1.0.css"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery.mobile-1.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

Place the files (stylesheets) at last which are to be on that page,

You can check this in Chrome

Inspect some div and see the style in any page, style for div is changed at set to some style which is attached at last.

If two styles are in same file, both styles (style for div) work for that div, but the style attached is from the last lines in that file