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

Question

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

我尝试使用以下方法：

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

和

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

另外，如何仅阻止复选框的增强标记？

Answer 1

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

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

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

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

1. 增强单个组件/小部件
2. 增强页面内容
3. 增强整页内容（页眉，内容，页脚）

增强单个组件/小部件：

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

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

1. Listview：

标记增强：

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

删除列表视图元素：

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

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

列表视图的重点之一是过滤功能。不幸的是，由于某种原因，jQuery Mobile将无法向现有列表视图动态添加过滤器选项。幸运的是，有一种解决方法。如果可能，请删除当前的列表视图，并添加另一个已启用文件管理器选项的列表视图。

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

还有一件事，你不需要使用输入元素来创建按钮，甚至可以使用基本div来完成.

导航栏

1. 标记增强：

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

1. 文字输入，搜索输入和文字区域

标记增强：

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

1. 滑块和翻转拨动开关

标记增强：

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

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

滑块有点可动态创建，请在此处了解更多信息：https : //stackoverflow.com/a/15708562/1848600

1. 复选框和单选框

标记增强：

$('[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");

1. Select menu

标记增强：

$('select').selectmenu();  

1. Collapsible

不幸的是，可折叠元素不能通过某些特定方法进行增强，因此必须使用trigger（’create’）来代替。

1. Table

标记增强：

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

尽管这是表增强的标准方法，但目前无法使它起作用。因此，请使用trigger（’create’）。

1. Panels - New

面板标记增强：

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

动态添加到面板的内容的标记增强功能：

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

增强页面内容：

如果我们要生成/重建整个页面的内容，最好一次全部完成，可以这样：

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

增强整个页面的内容（页眉，内容，页脚）：

对于我们来说不幸的是，trigger（’create’）无法增强页眉和页脚标记。在这种情况下，我们需要大枪：

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

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

第三方增强插件

有几个第三方增强插件。有些是对现有方法的更新，有些是修复损坏的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);

获取正确的最大内容高度

如果页面的页眉和页脚具有恒定的高度，则可以使用一些CSS技巧轻松地将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;
}

要记住一件事。此功能将正确地为你提供最大的可用内容高度，同时可用于拉伸相同的内容。不幸的是，它不能用于将img拉伸到整个内容高度，img标签的开销为3px。

防止加价的方法：
这可以通过几种方法来完成，有时你需要将它们结合起来以达到预期的效果。

• 方法1：

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

data-enhance="false"

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

这也需要在应用加载阶段启用：

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

在初始化jquery-mobile.js之前对其进行初始化（请看下面的示例）。

要重新创建页面，请使用以下命令：

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

方法2：

第二种选择是使用此行手动执行此操作：

data-role="none"

方法3：

可以阻止某些HTML元素进行标记增强：

 $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 }); 

在初始化jquery-mobile.js之前再次对其进行初始化（请看下面的示例）。

标记增强问题：
有时，从头开始创建组件时（例如listview），会发生此错误：

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

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

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

标记覆盖问题
如果出于某种原因需要更改默认的jQuery Mobile CSS，则必须使用!important重写来完成。没有它，默认的CSS样式将无法更改。

例：

#navbar li {
    background: red !important;
}