简介：

有几种方法可以增强动态创建的内容标记。仅仅向jQuery移动的页面动态添加新内容是不够的，必须使用经典的jQuery Mobile样式来增强新内容。因为这是一项相当繁重的任务，所以需要有一些优先级。如果可能，jQuery移动的需要做尽可能少增强。如果只有一个组件需要样式化，不要增强整个页面。
这意味着什么？当页面插件调度一个pageInit事件时，大多数小部件都使用该事件来自动初始化自己。它将自动增强它在页面上找到的任何小部件示例。
然而，如果您在客户端生成新的标记或通过 AJAX 加载内容并将其注入到页面中，您可以触发create事件来处理新标记中包含的所有插件的自动初始化。这可以在任何元素上触发（甚至是页面div本身），从而节省了手动初始化每个插件（列表视图按钮、选择等）的任务。
考虑到这一点，我们来讨论一下增强级别。共有三个增强级别，它们按照资源要求从低到高的顺序排列：
1.增强单个组件/小部件
1.增强页面内容
1.增强整页内容（页眉、内容、页脚）

增强单个组件/小部件：

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

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

1. Listview：
   标记增强功能：

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

删除列表视图元素：

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

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

• 请注意，refresh（）方法只影响附加到列表中的新节点。这样做是出于性能原因。*

列表视图的亮点之一是过滤功能。不幸的是，由于某些原因，jQuery移动的无法动态地向现有的列表视图添加过滤器选项。幸运的是，有一个解决方案。如果可能，删除当前的列表视图，并添加另一个打开过滤器选项的列表视图。
下面是一个工作示例：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');
    });

1. Button
   标记增强功能：

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

增强示例：http://jsfiddle.net/Gajotres/m4rjZ/
还有一件事，你不需要使用input元素来创建按钮，甚至可以用一个基本的div来完成，下面是一个例子：http://jsfiddle.net/Gajotres/L9xcN/

1. Navbar
   标记增强功能：

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

增强示例：http://jsfiddle.net/Gajotres/w4m2B/
以下是如何添加动态导航栏选项卡的演示：http://jsfiddle.net/Gajotres/V6nHp/
在创建**事件之前，**页中还有一个：http://jsfiddle.net/Gajotres/SJG8W/

1. Text inputs, Search inputs & Textareas显示器
   标记增强功能：

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

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

1. Sliders & Flip toggle switch
   标记增强功能：

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

增强示例：http://jsfiddle.net/Gajotres/caCsf/
pagebeforecreate事件期间的增强示例：http://jsfiddle.net/Gajotres/NwMLP/
滑块在动态创建时会有一些问题，请在此处阅读更多信息：https://stackoverflow.com/a/15708562/1848600

1. Checkbox & Radiobox
   标记增强功能：

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

或者如果您要选择/取消选择另一个单选框/复选框元素：

$("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/显示器

1. Select menu
   标记增强功能：

$('select').selectmenu();

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

1. Collapsible显示器
   不幸的是，可折叠元素不能通过某些特定的方法增强，所以必须使用触发器（'create'）来代替。
   增强示例：http://jsfiddle.net/Gajotres/ck6uK/显示器
2. Table显示器
   标记增强功能：

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

虽然这是一种标准的表增强方法，但目前我还不能使其生效，所以改用trigger（'create'）。
增强示例：http://jsfiddle.net/Gajotres/Zqy4n/
1.Panels- * 新增 *
面板标记增强功能：

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

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

$('.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移动的文档中找不到它。不过，在jQuery Mobilebug跟踪器中很容易找到它，并警告除非真的非常必要，否则不要使用它。
注意，**.trigger（'pagecreate'）;**可以假设每页只能刷新一次，我发现这是不真实的：
http://jsfiddle.net/Gajotres/5rzxJ/显示器

第三方增强插件

有几个第三方增强插件。一些是对现有方法的更新，一些是为了修复损坏的jQM功能。

*按钮文字变更

不幸的是找不到这个插件的开发者。原始SO来源：更改按钮文本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/显示器

获取正确的最大内容高度

如果页眉和页脚的高度是恒定的，那么使用css技巧就可以轻松地将content div设置为覆盖全部可用空间：

#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标签有一个3 px的开销。

防止标记增强的方法：

这可以通过几种方法来实现，有时您需要将它们结合起来以达到预期的效果。

• 方法一：

它可以通过添加以下属性来实现：

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移动的CSS，必须使用**!important**覆盖。没有它，默认的CSS样式无法更改。
示例：

#navbar li {
    background: red !important;
}

**jsFiddle**示例：http://jsfiddle.net/Gajotres/vTBGa/显示器

变更：

• 01.02.2013 -添加了动态导航栏演示
• 01.03.2013 -添加了关于如何动态添加过滤到列表视图的注解
• 2013年3月7日-添加新章节：获取正确的最大内容高度
• 2013年3月17日-在本章中添加了几个字：获取正确的最大内容高度
• 29.03.2013 -添加了关于动态创建滑块的新内容并修复了一个示例错误
• 03.04.2013 -添加了关于动态创建的可折叠元素的新内容
• 2013年4月4日-添加了第三方插件章节
• 20.05.2013 -添加动态添加的面板和内容
• 21.05.2013 -添加了另一种设置完整内容高度的方法
• 2013年6月20日-添加新章节：加成覆盖问题
• 29.06.2013 -添加了何时使用增强方法的重要注解

在JQMobile 1.4中，您可以对所有http://api.jquerymobile.com/enhanceWithin/子级执行.enhanceWithin（）

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