仅应用 jquery mobile 页面的一部分？答案

【问题标题】：Apply jquery mobile only a portion of page?仅应用 jquery mobile 页面的一部分？
【发布时间】：2013-03-28 07:44:14
【问题描述】：

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

【问题讨论】：

【解决方案1】：

有几种方法可以实现，您可以在我的另一个ARTICLE中找到它们，或者找到它HERE。搜索名为：预防标记增强方法的章节。

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

标记增强预防方法：

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

方法一：

添加这个属性就可以做到：
```
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/

方法三：

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

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

【讨论】：