javascript - jQuery Mobile：动态添加内容的标记增强

Question

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

我曾尝试使用这些方法：

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

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

另外，我怎样才能防止仅对复选框进行增强标记？

score 167 · Accepted Answer

免责声明：

这篇文章也可以作为我博客的一部分在这里找到。

介绍：

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

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

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

考虑到这一点，让我们讨论增强级别。其中有三个，它们从资源需求较低到较高的排序：

增强单个组件/小部件
增强页面内容
增强整页内容（页眉、内容、页脚）

增强单个组件/小部件：

重要提示：以下增强方法仅用于当前/活动页面。对于动态插入的页面，这些页面及其内容在插入 DOM 后将得到增强。在动态创建的页面/活动页面之外调用任何方法都会导致错误。

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

列表视图：

标记增强：

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

删除列表视图元素：

$('#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');
});

按钮

标记增强：
```
$('[type="button"]').button();
```
增强示例：http: //jsfiddle.net/Gajotres/m4rjZ/

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

标记增强：
```
$('[data-role="navbar"]').navbar();
```
增强示例：http: //jsfiddle.net/Gajotres/w4m2B/

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

还有一个在pagebeforecreate事件中：http: //jsfiddle.net/Gajotres/SJG8W/
文本输入、搜索输入和文本区域

标记增强：
```
$('[type="text"]').textinput();   
```
增强示例：http: //jsfiddle.net/Gajotres/9UQ9k/
滑块和翻转拨动开关

标记增强：
```
$('[type="range"]').slider();  
```
增强示例：http: //jsfiddle.net/Gajotres/caCsf/

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

动态创建滑块有点麻烦，请在此处阅读更多信息：https ://stackoverflow.com/a/15708562/1848600

复选框和单选框

标记增强：

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

选择菜单

标记增强：
```
$('select').selectmenu();  
```
增强示例：http: //jsfiddle.net/Gajotres/dEXac/
可折叠

不幸的是，可折叠元素无法通过某些特定方法增强，因此必须使用 trigger('create') 代替。

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

标记增强：
```
$(".selector").table("refresh");
```
虽然这是一种标准的表格增强方式，但目前我无法让它发挥作用。所以改为使用触发器（'create'）。

增强示例：http: //jsfiddle.net/Gajotres/Zqy4n/
面板-新

面板标记增强：
```
$('.selector').trigger('pagecreate');
```
动态添加到面板的内容的标记增强：
```
$('.selector').trigger('pagecreate');
```
示例：http: //jsfiddle.net/Palestinian/PRC8W/

增强页面内容：

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

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

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

增强整页内容（页眉、内容、页脚）：

不幸的是，trigger('create') 不能增强页眉和页脚标记。在这种情况下，我们需要大枪：

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

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

这几乎是一种神秘的方法，因为我在官方jQuery Mobile文档中找不到它。仍然很容易在jQuery Mobile错误跟踪器中找到它，并警告不要使用它，除非它真的很有必要。

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

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

3rd 方增强插件

有几个 3rd 方增强插件。有些是对现有方法的更新，有些是为了修复损坏的 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。

标记增强预防的方法：

这可以通过几种方式完成，有时您需要将它们结合起来才能达到预期的结果。

方法一：

它可以通过添加这个属性来做到这一点：
```
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")
});
```
方法二：

第二种选择是使用此行手动执行此操作：
```
data-role="none"
```
示例：http: //jsfiddle.net/Gajotres/LqDke/
方法三：

可以防止某些 HTML 元素进行标记增强：
```
 $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });    
```
示例：http: //jsfiddle.net/Gajotres/gAGtS/

在 jquery-mobile.js 初始化之前再次初始化它（看下面的例子）。

标记增强问题：

有时从头开始创建组件（如列表视图）时会发生此错误：

无法在初始化之前调用 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 - 添加了第 3 方插件章节
20.05.2013 - 添加了动态添加的面板和内容
21.05.2013 - 添加了另一种设置完整内容高度的方法
20.06.2013 - 添加了新章节：标记覆盖问题
29.06.2013 - 添加了关于何时使用增强方法的重要说明

score 4 · Accepted Answer

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

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