jQuery mobile动态添加主题到页面

Question

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

Answer 1

更新 - 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(/\bui-page-theme-\w/g) || []).join(' ');
          })
          .addClass("ui-page-theme-" + o.theme);
      }
    }
  });
})(jQuery);

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

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

对于特定页面:

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

对于所有页面:

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

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