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

我想知道如何dynamic增强jQuery Mobile页面?

我试图使用这些方法:

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

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

另外我怎样才能防止checkbox的增强标记?

免责声明:

这篇文章也可以作为我的博客HERE的一部分。

介绍:

有几种增强dynamic创build的内容标记的方法。 仅仅向jQuery Mobile页面dynamic添加新内容是不够的,新的内容必须用经典的jQuery Mobile样式进行增强。 因为这是相当繁重的任务,所以需要有一些优先级,如果可能的话, jQuery Mobile需要尽可能less的增强。 如果只有一个组件需要样式化,则不要增强整个页面。

这一切意味着什么? 当页面插件分派一个pageInit事件,大多数小部件用来自动初始化自己。 它会自动增强在页面上find的小部件的任何实例。

但是,如果您生成新的标记客户端或通过Ajax加载内容并将其注入页面,则可以触发create事件来处理新标记中包含的所有插件的自动初始化。 这可以触发任何元素(甚至是页面div本身),节省您手动初始化每个插件(列表视图button,select等)的任务。

考虑到这一点,让我们讨论一下增强级别 其中有三个,从资源要求较低到较高的要求:

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

增强单个组件/部件:

重要提示:以下增强方法仅用于当前/活动页面。 对于dynamic插入的页面,一旦插入DOM,这些页面及其内容将被增强。 调用dynamic创build的页面/活动页面以外的任何方法将导致错误。

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

  1. Listview

    标记增强:

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

    删除列表视图元素:

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

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

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

    其中一个listview高点是一个过滤function。 不幸的是,由于某种原因,jQuery Mobile将无法dynamic添加筛选器选项到现有的列表视图。 幸运的是有一个解决方法。 如果可能的话,删除当前的列表视图,并添加一个文件pipe理器选项打开。

    这是一个工作示例: 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/

    还有一件事,你不需要使用input元素来创build一个button,甚至可以用一个基本的div来完成,下面是一个例子: http : //jsfiddle.net/Gajotres/L9xcN/

  3. 导航栏

    标记增强:

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

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

    下面是一个演示如何添加dynamic导航栏选项卡: http : //jsfiddle.net/Gajotres/V6nHp/

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

  4. 文本input,searchinput和Textareas

    标记增强:

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

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

  5. 滑块和翻转切换开关

    标记增强:

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

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

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

    滑动器是一点儿马车dynamic创build,阅读更多关于它在这里: https : //stackoverflow.com/a/15708562/1848600

  6. checkbox和Radiobox

    标记增强:

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

    或者如果你想select/取消select另一个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菜单

    标记增强:

     $('select').selectmenu(); 

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

  8. 可折叠

    不幸的是,可折叠的元素不能通过某些特定的方法来增强,所以必须使用触发器('create')。

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

  9. 标记增强:

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

    虽然这是表格增强的标准方式,但在这一点上,我无法使其工作。 所以改为使用触发器('创build')。

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

  10. 面板新的

    面板标记增强:

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

    dynamic添加到面板的内容标记增强function:

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

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

增强页面内容:

如果我们正在生成/重build整个页面内容,最好一次完成,可以这样做:

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

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

增强整页内容(页眉,内容,页脚):

不幸的是我们触发('创build')不能增强页眉和页脚标记。 在这种情况下,我们需要大炮:

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

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

这几乎是一个神秘的方法,因为我无法在官方的jQuery Mobile文档中find它。 不过在jQuery Mobile bug跟踪器中很容易find,除非真的有必要,否则警告不要使用它。

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

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

第三方增强插件

有几个第三方增强插件。 有些是作为对现有方法的更新而完成的,有些则是为了解决jQMfunction的问题。

  • button文字更改

    很遗憾找不到这个插件的开发者。 原来的SO源: 更改button文本jQuery的移动

     (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 demo的一个工作示例: 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/

有一件事要记住。 此function将正确地获得最大可用内容高度,同时可用于扩展相同的内容。 不幸的是,它不能用于将img拉伸到全部内容高度,img标签的开销是3px。

预防标记的方法:

这可以用几种方法完成,有时你需要把它们结合起来才能达到预期的效果。

  • 方法1:

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

     data-enhance="false" 

    到页眉,内容,页脚容器。

    这也需要在应用程序加载阶段被打开:

     $(document).one("mobileinit", function () { $.mobile.ignoreContentEnabled=true; }); 

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

    更多关于这可以在这里find:

    http://jquerymobile.com/test/docs/pages/page-scripting.html

    例如: http : //jsfiddle.net/Gajotres/UZwpj/

    要重新创build一个页面使用这个:

     $('#index').live('pagebeforeshow', function (event) { $.mobile.ignoreContentEnabled = false; $(this).attr('data-enhance','true'); $(this).trigger("pagecreate") }); 
  • 方法2:

    第二个select是用这一行手动执行:

     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初始化之前再次初始化它(请看下面的例子)。

标记增强问题:

有时候从零开始创build一个组件(如listview)时,会发生这样的错误:

在初始化之前,不能在listview上调用方法

在标记增强之前,可以通过组件初始化来防止这种情况,这是您可以如何解决的:

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

标记超量问题:

如果由于某种原因需要更改默认的jQuery Mobile CSS,则必须使用!important override来完成。 没有它,默认的CSS样式不能改变。

例:

 #navbar li { background: red !important; } 

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

变化:

  • 01.02.2013 – 增加了一个dynamic的导航栏演示
  • 01.03.2013 – 添加有关如何dynamic添加筛选到列表视图的评论
  • 07.03.2013 – 增加新章节: 获取正确的最大内容高度
  • 17.03.2013 – 在本章中增加了几个词: 获取正确的最大内容高度
  • 29.03.2013 – 增加了有关dynamic创build的滑块的新内容,并修复了一个示例bug
  • 03.04.2013 – 增加了关于dynamic创build的可折叠元素的新内容
  • 04.04.2013 – 增加了第三方插件章节
  • 20.05.2013 – 增加了dynamic添加的面板和内容
  • 21.05.2013 – 增加了设置完整内容高度的另一种方式
  • 20.06.2013 – 增加了新的章节: 标记覆盖问题
  • 29.06.2013 – 增加了使用增强方法的重要注意事项

从JQMobile 1.4你可以做.enhanceWithin()所有的孩子http://api.jquerymobile.com/enhanceWithin/

 var content = '<p>Hi</p>'; $('#somediv').html(content); $('#somediv').enhanceWithin();