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

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";
   });    
  

  示例:http://jsfiddle.net/Gajotres/jjETe/