How to stop JQM from styling a page?

问题

I have a JQM app with one specific page that I do not want styled.

All I have found so far is data-role='none' - but I don't want to have to apply that to every element on the page... Is there a way to turn if off just for this one page?

回答1:

You can use data-enhance="false" in conjunction with $.mobile.ignoreContentEnabled=true to stop the auto-enhancement that jQuery Mobile does to a pseudo-page:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).on('mobileinit', function () {
    $.mobile.ignoreContentEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>

<div data-enhance="false" data-role="page">
    ...
</div>

The reason you have to change the ignoreContentEnabled flag is because it's CPU intensive to search parent elements for the data-attribute, so this is turned-off by default.

Here is a demo: http://jsfiddle.net/ZtJyL/1/

回答2:

As I already pointed out here, you can also use the official, theme-less version of the CSS built specifically to allow the design of a custom theme.

In my experience, using hacks like data-enhance="false" and data-role="none" often breaks things with structural, non-thematic CSS as well.

With this method you are able to keep all jQuery Mobile basic functionality, you don't have to fight with hacks and overrides all the time, and you get a lighter CSS as a bonus.

来源：https://stackoverflow.com/questions/10014609/how-to-stop-jqm-from-styling-a-page

标签

jquery-mobile