如何阻止 JQM 设置页面样式？答案

【问题标题】：How to stop JQM from styling a page?如何阻止 JQM 设置页面样式？
【发布时间】：2012-04-04 15:45:00
【问题描述】：

我有一个 JQM 应用程序，其中包含一个我不想设置样式的特定页面。

到目前为止，我发现的只有data-role='none' - 但我不想将其应用于页面上的每个元素...有没有办法关闭这一页？

【问题讨论】：

【解决方案1】：

您可以结合使用data-enhance="false" 和$.mobile.ignoreContentEnabled=true 来停止jQuery Mobile 对伪页面的自动增强功能：

<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>

您必须更改ignoreContentEnabled 标志的原因是因为在父元素中搜索data-attribute 会占用大量CPU，因此默认情况下该功能处于关闭状态。

这是一个演示：http://jsfiddle.net/ZtJyL/1/

【讨论】：

【解决方案2】：

正如我已经指出的here，您也可以使用官方的theme-less version of the CSS 专门为允许设计自定义主题而构建。

根据我的经验，使用像 data-enhance="false" 和 data-role="none" 这样的 hack 通常也会破坏结构化的非主题 CSS。

使用这种方法，您可以保留所有 jQuery Mobile 基本功能，您不必一直与 hack 和覆盖作斗争，并且您可以获得更轻的 CSS 作为奖励。

【讨论】：