我正在使用jQuery mobile动态构建一个新页面.我想现在添加主题,即data-theme =“a”.有更简单的方法吗？目前看起来我将它添加到下面的每个div.
var newPage = $("<div data-role='page' id='" + v["id"] +
"'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' " +
"data-rel='back'>Back</a>" +
"<h1>" + v["name"] + "</h1>" +
"</div>" +
"<div data-role=content>" + pagecontent +
"</div>" +
"<div data-role='footer'>" +
"<h4>" + v["name"] + "</h4>" +
" </div>" +
"</div>");
// Append the new page info pageContainer
newPage.appendTo($.mobile.pageContainer);
也就是说,如果有这样的东西会很好….
newPage.appendTo($.mobile.pageContainer).theme('a');
解决方法
更新 – jQuery Mobile 1.4
使用.page({“theme”})或.page(“选项”,“主题”)时有一个bug in .page() widget.它不会删除当前的主题类,但是它会添加新的主题类.然而,新课不会覆盖旧班.所以这是修复.
(function($,undefined) {
$.widget("mobile.page",$.mobile.page,{
_setOptions: function(o) {
if (o.theme !== undefined) {
this.element
.removeClass(function(i,c) {
return (c.match(/\bui-page-theme-\w/g) || []).join(' ');
})
.addClass("ui-page-theme-" + o.theme);
}
}
});
})(jQuery);
Note: Default theme in jQuery Mobile is “a”.
要为动态创建的页面设置主题,请使用$(‘.selector’).page({theme：’e’});在您附加页面之后,在使用$.mobile.changePage()导航到它们之前.
对于特定页面：
$('.selector').page({theme:'e'});
对于所有页面：
$('[data-role=page]').page({theme:'e'});
Demo – 更新了.page()修复程序
