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);

"+ 页面内容 +</div>"+"<div data-role='footer'>"+<h4>"+ v["name"] + "</h4>"+" </div>"+"</div>");//添加新的页面信息 pageContainernewPage.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() 小部件中有一个错误 使用 .page({"theme"}) 或 .page("option", "theme") 时.它不会删除当前的主题类，但是，它添加了新的主题类.然而，新类不会覆盖旧类.所以这里是修复.

(function($, undefined) { $.widget("mobile.page", $.mobile.page, { _setOptions: function(o) { if (o.theme !== undefined) { this.element .removeClass(function(i, c) { return (c.match(/ui-page-theme-w/g) || []).join(' '); }) .addClass("ui-page-theme-" + o.theme); } } }); })(jQuery);

<块引用>

注意:jQuery Mobile 中的默认主题是a".

Note: Default theme in jQuery Mobile is "a".

<小时>

要为动态创建的页面设置主题，请在附加页面之后使用 $('.selector').page({theme:'e'}); 使用 <代码>$.mobile.changePage().

对于特定页面:

$('.selector').page({theme:'e'});

对于所有页面:

$('[data-role=page]').page({theme:'e'});

<小时>

演示 - 更新了 .page() 修复

---

Demo - Updated with .page() fix

这篇关于jQuery mobile 动态添加主题到页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！