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

Question

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

我尝试使用以下方法：

>

<代码>$（“[数据角色=“页面”]”）。触发器（“创建”）

和

<代码>$（“[数据角色=“页面”]”）。第页（）

另外，如何防止仅对复选框进行增强标记？

Answer 1

从JQMobile 1.4中，您可以执行以下操作。所有子项上的enhanceWithin（）http://api.jquerymobile.com/enhanceWithin/

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

Answer 2

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

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

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

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

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

1. 增强单个组件/小部件

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

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

>

列表视图：

标记增强：

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

正在删除listview元素：

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

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

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

列表视图的亮点之一是过滤功能。不幸的是，由于某种原因，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/

pagebeprereate事件期间的增强示例：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/

可折叠的

不幸的是，不能通过某些特定的方法增强可折叠元素，所以必须使用触发器（'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/

不幸的是，触发器（'create'）无法增强页眉和页脚标记。在这种情况下，我们需要大炮：

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

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

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

注意，.触发器（'page ecreate'）；可以假设每次页面刷新只使用一次，我发现它是不真实的：

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/

如果页面页眉和页脚具有恒定的高度，则可以使用css技巧轻松设置内容div以覆盖全部可用空间：

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

这是一个使用Google地图api3demo的工作示例：http://jsfiddle.net/Gajotres/7kGdE/

此方法可用于获取正确的最大内容高度，并且必须与页面显示事件一起使用。

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）时会出现此错误：

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

在标记增强之前，可以通过组件初始化来防止这种情况，以下是解决此问题的方法：

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

如果出于某种原因需要更改默认jQuery Mobile CSS，则必须使用完成！重要信息覆盖。没有它，就无法更改默认css样式。

示例：

#navbar li {
    background: red !important;
}

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

• 2013年2月1日-添加了动态导航栏演示
• 2013年3月1日-添加了关于如何将筛选动态添加到listview的注释
• 2013年3月7日-新增章节：获取正确的最大内容高度
• 2013年3月17日-在章节中添加了几个词：获取正确的最大内容高度
• 2013年3月29日-添加了有关动态创建滑块的新内容，并修复了一个示例错误
• 2013年4月3日-添加了有关动态创建的可折叠元素的新内容
• 2013年4月4日-增加了第三方插件章节
• 2013年5月20日-添加了动态添加的面板和内容
• 2013年5月21日-增加了另一种设置完整内容高度的方式
• 2013年6月20日-新增章节：加价过高问题
• 2013年6月29日-添加了关于何时使用增强方法的重要说明