我想知道如何动态增强jQuery Mobile页面？
我尝试过使用这些方法：
$('[data-role="page"]').trigger('create');
和
$('[data-role="page"]').page();
另外，我如何才能阻止复选框的增强标记？
答案 0 :(得分：165)
此文章也可以作为我的博客的一部分 HERE 。
有几种方法可以增强动态创建的内容标记。仅仅向 jQuery Mobile 页面动态添加新内容是不够的，必须使用经典 jQuery Mobile 样式增强新内容。因为这需要处理繁重的任务，所以需要有一些优先级，如果可能的话， jQuery Mobile 需要尽可能少地增强。如果只有一个组件需要设置风格，请不要增强整个页面。
这一切意味着什么？当页面插件调度 pageInit 事件时，大多数窗口小部件都会使用该事件来自动初始化自己。它会自动增强它在页面上找到的小部件的任何实例。
但是，如果您通过Ajax生成新标记客户端或加载内容并将其注入页面，则可以触发create事件来处理新标记中包含的所有插件的自动初始化。这可以在任何元素（甚至是页面div本身）上触发，从而节省了手动初始化每个插件（listview按钮，选择等）的任务。
考虑到这一点，我们讨论增强级别。其中有三个，它们从较少的资源需求到较高的资源分类：
重要提示：以下增强方法仅适用于当前/活动页面。对于动态插入的页面，一旦插入DOM，这些页面及其内容将得到增强。在动态创建的页面/活动页面之外调用任何方法都将导致错误。
每个 jQuery Mobile 小部件都可以动态增强：
标记增强：
$('#mylist').listview('refresh');
删除listview元素：
$('#mylist li').eq(0).addClass('ui-screen-hidden');
增强示例：http://jsfiddle.net/Gajotres/LrAyE/
请注意，refresh（）方法仅影响附加到列表的新节点。这是出于性能原因而完成的。
listview高点之一是过滤功能。不幸的是，由于某种原因，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/
Text inputs, Search inputs & Textareas
标记增强：
$('[type="text"]').textinput();
标记增强：
$('[type="range"]').slider();
增强示例：http://jsfiddle.net/Gajotres/caCsf/
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();
不幸的是，可折叠元素无法通过某种特定方法得到增强，因此必须使用触发器（＆＃39;创建＆＃39;）。
标记增强：
$(".selector").table("refresh");
虽然这是表格增强的标准方式，但此时我无法使其正常工作。因此，请使用触发器（＆＃39;创建＆＃39;）。
Panels - 新
面板标记增强功能：
$('.selector').trigger('pagecreate');
内容的标记增强动态添加到Panel：
$('.selector').trigger('pagecreate');
如果我们正在生成/重建整个页面内容，最好一次完成所有操作，可以这样做：
$('#index').trigger('create');
增强示例：http://jsfiddle.net/Gajotres/426NU/
不幸的是，我们触发器（＆＃39;创建＆＃39;）无法增强页眉和页脚标记。在那种情况下，我们需要大枪：
$('#index').trigger('pagecreate');
增强示例：http://jsfiddle.net/Gajotres/DGZcr/
这几乎是一种神秘的方法，因为我无法在官方的 jQuery Mobile 文档中找到它。仍然可以在 jQuery Mobile 错误跟踪器中轻松找到它，并警告不要使用它，除非它确实非常必要。
注意， .trigger（＆＃39; pagecreate＆＃39;）; 可以假设每页刷新只使用一次，我发现它是不真实的：
http://jsfiddle.net/Gajotres/5rzxJ/
有几个第三方增强插件。一些是作为现有方法的更新而制作的，一些是为了修复损坏的jQM功能。
按钮文字更改
很遗憾找不到这个插件的开发者。原始SO来源：Change button text 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);
如果页面页眉和页脚具有恒定的高度内容div可以通过一点css技巧轻松设置为覆盖整个可用空间：
#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标签的开销为3px。
这可以通过几种方式完成，有时你需要将它们结合起来以达到理想的效果。
方法1：
可以通过添加以下属性来实现：
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")
});
方法2：
第二个选项是用这一行手动完成：
data-role="none"
方法3：
可以阻止某些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，则必须使用 !important 覆盖来完成。没有它，默认的CSS样式无法更改。
示例：
#navbar li {
background: red !important;
}
jsFiddle 示例：http://jsfiddle.net/Gajotres/vTBGa/
答案 1 :(得分：4)
从JQMobile 1.4开始，你可以对所有孩子http://api.jquerymobile.com/enhanceWithin/进行.enhanceWithin（）
var content = '<p>Hi</p>';
$('#somediv').html(content);
$('#somediv').enhanceWithin();