Question

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

Answer 1

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

以下是一些简短的描述和示例。有几种解决方案，您需要选择正确的解决方案：

标记增强预防方法：

这可以通过几种方式完成，有时你需要将它们结合起来以达到理想的效果。

方法1 ：

可以通过添加以下属性来实现：
```
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")
});
```
方法2 ：

第二个选项是用这一行手动完成：
```
data-role="none"
```
示例：http://jsfiddle.net/Gajotres/LqDke/

方法3 ：

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

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