仅应用jquery mobile部分页面？

Question

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

Answer 1

有几种方法可以实现这一点,你可以在我的其他文章中找到它们,或者在这里找到它.搜索名为:标记增强预防方法的章节.

这里有一些简短的描述和例子.有几种解决方案,您需要选择正确的解决方案:

增强标记的方法:

这可以通过几种方式完成,有时您需要将它们组合以实现所需的结果.

• 方法1:

  它可以通过添加此属性来实现:

  data-enhance="false"
  

  标题,内容,页脚容器.

  这也需要在app加载阶段进行调整:

  $(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/