jQuery Mobile:标记增强动态添加的内容

Question

我想知道如何动态增强jQuery Mobile页面？

我试图使用这些方法:

1. $('[data-role="page"]').trigger('create');

   和

2. $('[data-role="page"]').page();

另外,我如何才能阻止复选框的增强标记？

Answer 1

免责声明:

这篇文章也可以在我的博客HERE中找到.

介绍:

有几种方法可以增强动态创建的内容标记.仅仅向jQuery Mobile页面动态添加新内容是不够的,必须使用经典的jQuery Mobile样式增强新内容.因为这是处理繁重的任务,所以需要有一些优先级,如果可能的话,jQuery Mobile需要尽可能少地增强.如果只需要设置一个组件,请不要增强整个页面.

这一切意味着什么？当页面插件调度pageInit事件时,大多数窗口小部件都会使用它来自动初始化自己.它会自动增强它在页面上找到的小部件的任何实例.

但是,如果您通过Ajax生成新标记客户端或加载内容并将其注入页面,则可以触发create事件来处理新标记中包含的所有插件的自动初始化.这可以在任何元素(甚至页面div本身)上触发,从而节省了手动初始化每个插件(listview按钮,选择等)的任务.

考虑到这一点,我们可以讨论增强级别.其中有三个,它们从较少的资源要求到较高的要求排序:

1. 增强单个组件/小部件
2. 增强页面内容
3. 增强整页内容(标题,内容,页脚)

增强单个组件/小部件:

重要提示:以下增强方法仅适用于当前/活动页面.对于动态插入的页面,一旦插入DOM,这些页面及其内容将得到增强.在动态创建的页面/活动页面以外调用任何方法都将导致错误.

每个jQuery Mobile小部件都可以动态增强:

1. 列表视图:

   标记增强:

   $('#mylist').listview('refresh');
   

   删除listview元素:

   $('#mylist li').eq(0).addClass('ui-screen-hidden'); 
   

   增强示例:http://jsfiddle.net/Gajotres/LrAyE/

   请注意,refresh()方法仅影响追加到列表的新节点.这是出于性能原因而完成的.

   listview高点之一是过滤功能.不幸的是,由于某种原因,jQuery Mobile将无法动态地将过滤器选项添加到现有列表视图中.幸运的是有一个解决方法.如果可能,删除当前列表视图并添加另一个打开文件管理器选项.

   这是一个有效的例子:https://stackoverflow.com/a/15163984/1848600

   $(document).on('pagebeforeshow', '#index', function(){       
       $('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
       $('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview');
       $('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview');
       $('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview');
       $('#test-listview').listview().listview('refresh');
   });
   

2. 按键

   标记增强:

   $('[type="button"]').button();
   

   增强示例:http://jsfiddle.net/Gajotres/m4rjZ/

   还有一件事,你不需要使用输入元素来创建一个按钮,它甚至可以用一个基本的div来完成,这里有一个例子:http://jsfiddle.net/Gajotres/L9xcN/

3. 导航栏

   标记增强:

   $('[data-role="navbar"]').navbar();
   

   增强示例:http://jsfiddle.net/Gajotres/w4m2B/

   这是一个如何添加动态导航栏选项卡的演示:http://jsfiddle.net/Gajotres/V6nHp/

   还有一个在pagebeforecreate事件中:http://jsfiddle.net/Gajotres/SJG8W/

4. 文本输入,搜索输入和Textareas

   标记增强:

   $('[type="text"]').textinput();   
   

   增强示例:http://jsfiddle.net/Gajotres/9UQ9k/

5. 滑块和翻转拨动开关

   标记增强:

   $('[type="range"]').slider();  
   

   增强示例:http://jsfiddle.net/Gajotres/caCsf/

   pagebeforecreate事件期间的增强示例:http://jsfiddle.net/Gajotres/NwMLP/

   滑块有点动态创建,在这里阅读更多信息:https://stackoverflow.com/a/15708562/1848600

6. Checkbox和Radiobox

   标记增强:

   $('[type="radio"]').checkboxradio();
   

   或者如果要选择/取消选择另一个Radiobox/Checkbox元素:

   $("input[type='radio']").eq(0).attr("checked",false).checkboxradio("refresh");
   

   要么

   $("input[type='radio']").eq(0).attr("checked",true).checkboxradio("refresh");
   

   增强示例:http://jsfiddle.net/Gajotres/VAG6F/

7. 选择菜单

   标记增强:

   $('select').selectmenu();  
   

   增强示例:http://jsfiddle.net/Gajotres/dEXac/

8. 可折叠

   遗憾的是,无法通过某种特定方法增强可折叠元素,因此必须使用触发器('create').

   增强示例:http://jsfiddle.net/Gajotres/ck6uK/

9. 表

   标记增强:

   $(".selector").table("refresh");
   

   虽然这是表格增强的标准方式,但此时我无法使其正常工作.所以改为使用触发器('create').

   增强示例:http://jsfiddle.net/Gajotres/Zqy4n/

10. 小组 -新的

    面板标记增强:

    $('.selector').trigger('pagecreate');
    

    内容的标记增强动态添加到Panel:

    $('.selector').trigger('pagecreate');
    

    示例:http://jsfiddle.net/Palestinian/PRC8W/

增强页面内容:

如果我们正在生成/重建整个页面内容,最好一次完成所有操作,并且可以使用以下方法完成:

$('#index').trigger('create');

增强示例:http://jsfiddle.net/Gajotres/426NU/

增强整页内容(标题,内容,页脚):

不幸的是,我们触发器('create')无法增强页眉和页脚标记.在这种情况下,我们需要大枪:

$('#index').trigger('pagecreate');

增强示例:http://jsfiddle.net/Gajotres/DGZcr/

这几乎是一种神秘的方法,因为我在官方的jQuery Mobile文档中找不到它.仍然可以在jQuery Mobile bug跟踪器中轻松找到它,并警告不要使用它,除非它真的非常必要.

注意,.trigger('pagecreate'); 可以假设每页刷新只使用一次,我发现它是不真实的:

http://jsfiddle.net/Gajotres/5rzxJ/

第三方增强插件

有几个第三方增强插件.一些是作为现有方法的更新而制作的,一些是为了修复损坏的jQM功能.

• 按钮文字更改

  不幸的是找不到这个插件的开发者.原始SO源:更改按钮文本jquery mobile

  (function($) {
      /*
       * Changes the displayed text for a jquery mobile button.
       * Encapsulates the idiosyncracies of how jquery re-arranges the DOM
       * to display a button for either an <a> link or <input type="button">
       */
      $.fn.changeButtonText = function(newText) {
          return this.each(function() {
              $this = $(this);
              if( $this.is('a') ) {
                  $('span.ui-btn-text',$this).text(newText);
                  return;
              }
              if( $this.is('input') ) {
                  $this.val(newText);
                  // go up the tree
                  var ctx = $this.closest('.ui-btn');
                  $('span.ui-btn-text',ctx).text(newText);
                  return;
              }
          });
      };
  })(jQuery);
  

  工作示例:http://jsfiddle.net/Gajotres/mwB22/

获取正确的最大内容高度

如果页面页眉和页脚有一个恒定的高度内容div可以很容易地设置为覆盖整个可用空间与一点css技巧:

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

这是Google maps api3演示的一个工作示例:http://jsfiddle.net/Gajotres/7kGdE/

此方法可用于获取正确的最大内容高度,并且必须与pageshow事件一起使用.

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

这是一个实时的jsFiddle示例:http://jsfiddle.net/Gajotres/nVs9J/

有一点需要记住.此功能将正确地为您提供最大可用内容高度,同时它可用于拉伸相同的内容.不幸的是,它不能用于将img拉伸到全内容高度,img标签的开销为3px.

增强标记的方法:

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

• 方法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/gAGtS/

  在jquery-mobile.js初始化之前再次初始化它(请看下面的示例).

标记增强问题:

有时从头开始创建组件(如listview)时会发生以下错误:

在初始化之前无法调用listview上的方法

在标记增强之前可以通过组件初始化来防止它,这是你可以解决这个问题的方法:

$('#mylist').listview().listview('refresh');

标记覆盖问题:

如果由于某种原因需要更改默认的jQuery Mobile CSS,则必须使用!important覆盖来完成.没有它,默认的CSS样式无法更改.

例:

#navbar li {
    background: red !important;
}

jsFiddle例如:http://jsfiddle.net/Gajotres/vTBGa/

变化:

• 01.02.2013 - 添加了动态导航栏演示
• 01.03.2013 - 添加了有关如何动态添加过滤到列表视图的注释
• 07.03.2013 - 添加了新章节:获取正确的最大内容高度
• 17.03.2013 - 在本章中添加了几个词:获取正确的最大内容高度
• 29.03.2013 - 添加了有关动态创建的滑块的新内容并修复了一个示例错误
• 03.04.2013 - 添加了有关动态创建的可折叠元素的新内容
• 04.04.2013 - 添加了第三方插件章节
• 20.05.2013 - 添加了动态添加的面板和内容
• 21.05.2013 - 添加了另一种设置完整内容高度的方法
• 20.06.2013 - 新增章节:标记覆盖问题
• 29.06.2013 - 添加了一个关于何时使用增强方法的重要说明