我想知道如何动态增强jQuery Mobile页面?
我尝试使用以下方法:
$('[data-role="page"]').trigger('create');
和
$('[data-role="page"]').page();
另外,如何仅阻止复选框的增强标记?
介绍: 有几种增强动态创建的内容标记的方法。将新内容动态添加到jQuery Mobile页面还不够,必须使用经典的jQuery Mobile样式来增强新内容。因为这是处理繁重的任务,所以需要有一些优先级,如果可能的话,jQuery Mobile需要做的工作尽可能少。如果只需要样式化一个组件,则不要增强整个页面。
这一切意味着什么?当页面插件调度pageInit事件时,大多数小部件都使用该事件来自动初始化自身。它将自动增强在页面上找到的小部件的所有实例。
但是,如果你在客户端生成新的标记或通过Ajax加载内容并将其注入到页面中,则可以触发create事件来处理新标记中包含的所有插件的自动初始化。可以在任何元素(甚至是页面div本身)上触发此操作,从而省去了手动初始化每个插件(列表视图按钮,选择等)的任务。
考虑到这一点,让我们讨论增强级别。其中有三种,它们从对资源的需求较少到对资源的需求较高的排序:
增强单个组件/小部件:
重要:以下增强方法仅在当前/活动页面上使用。对于动态插入的页面,将这些页面及其内容插入DOM后将得到增强。调用动态创建的页面/活动页面以外的任何方法将导致错误。
每个jQuery Mobile小部件都可以动态增强:
标记增强:
$('#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'); });
$('[type="button"]').button();
还有一件事,你不需要使用输入元素来创建按钮,甚至可以使用基本div来完成.
导航栏
$('[data-role="navbar"]').navbar();
$('[type="text"]').textinput();
$('[type="range"]').slider();
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");
$('select').selectmenu();
不幸的是,可折叠元素不能通过某些特定方法进行增强,因此必须使用trigger(’create’)来代替。
$(".selector").table("refresh");
尽管这是表增强的标准方法,但目前无法使它起作用。因此,请使用trigger(’create’)。
面板标记增强:
$('.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。
防止加价的方法: 这可以通过几种方法来完成,有时你需要将它们结合起来以达到预期的效果。
它可以通过添加以下属性来实现:
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; }