javascript - 仅应用 jquery mobile 的一部分页面？

Question

我有一个我们设计得很好的示例页面。现在，我们只需要在页面的一部分中使用 jquery mobile。问题是，当我添加 jquery mobile 时，它会弄乱我所有的 UI 内容。有没有办法只应用 jquery mobile 的一部分页面？

score 5 · Accepted Answer

有几种方法可以实现这一点，你可以在我的另一篇文章中找到它们，或者在这里找到。搜索名为：标记增强预防方法的章节。

这是一个带有示例的简短描述。有几种解决方案，您需要选择正确的一种：

标记增强预防的方法：

这可以通过几种方式完成，有时您需要将它们结合起来才能达到预期的结果。

方法一：

它可以通过添加这个属性来做到这一点：
```
data-enhance="false"
```
到页眉、内容、页脚容器。

这也需要在应用加载阶段开启：
```
$(document).one("mobileinit", function () {
    $.mobile.ignoreContentEnabled=true;
});
```
在初始化 jquery-mobile.js 之前初始化它（看下面的例子）。

更多相关信息可以在这里找到：

http://jquerymobile.com/test/docs/pages/page-scripting.html

示例：http: //jsfiddle.net/Gajotres/UZwpj/

要再次重新创建页面，请使用以下命令：
```
$('#index').live('pagebeforeshow', function (event) {
    $.mobile.ignoreContentEnabled = false;
    $(this).attr('data-enhance','true');
    $(this).trigger("pagecreate")
});
```
方法二：

第二种选择是使用此行手动执行此操作：
```
data-role="none"
```
示例：http: //jsfiddle.net/Gajotres/LqDke/

方法3：

可以防止某些 HTML 元素进行标记增强：

 $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });