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

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

我试图使用这些方法：

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

   和

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

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

Answer 1

免责声明：

这篇文章也可以作为我的博客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 – 增加了使用增强方法的重要注意事项

Answer 2

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

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