小编典典

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

javascript

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

我尝试使用以下方法:

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

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

另外,如何仅阻止复选框的增强标记?


阅读 461

收藏
2020-04-25

共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;
}
2020-04-25