jQuery mobile将主题动态添加到页面

本文介绍了jQuery mobile将主题动态添加到页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用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