jQuery mobile将主题动态添加到页面 [英] jQuery mobile dynamically added theme to page
问题描述
我正在使用jQuery mobile动态创建一个新页面.我现在想添加主题,即data-theme="a"
.有没有更简单的方法可以做到这一点?目前看来,我将其添加到下面的每个div中.
I'm building a new page dynamically using jQuery mobile. I would like to now add the theme i.e. data-theme="a"
. Is there an easier way to do this? At the moment it looks like I will be added it to every div below.
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);
即如果有这样的事情,那将是很好的....
i.e. it would be good if there was something like this....
newPage.appendTo($.mobile.pageContainer).theme('a');
推荐答案
更新-jQuery Mobile 1.4
使用.page({"theme"})
时,.page()
小部件中存在错误.或.page("option", "theme")
.它不会删除当前的主题类,但是会添加新的主题类.然而,新阶级并没有超越旧阶级.因此,这里是解决方法.
Update - jQuery Mobile 1.4
There is a bug in .page()
widget when using .page({"theme"})
or .page("option", "theme")
. It doesn't remove current theme class, however, it adds new theme class. Yet, new class doesn't override old class. So here is the fix.
(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);
注意::jQuery Mobile中的默认主题为"a" .
要为动态创建的页面设置主题,请在附加页面之后和使用$.mobile.changePage()
导航到页面之前使用$('.selector').page({theme:'e'});
.
To set theme for dynamically created pages, use $('.selector').page({theme:'e'});
after you append pages and before you navigate to them using $.mobile.changePage()
.
对于特定页面:
$('.selector').page({theme:'e'});
对于所有页面:
$('[data-role=page]').page({theme:'e'});
演示-已更新为.page()修复
Demo - Updated with .page() fix
这篇关于jQuery mobile将主题动态添加到页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!