0

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

2 回答 2

5

更新 - 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() 修复

于 2013-04-21T22:43:31.597 回答
0

我用这个，它真的很棒：D

Mikael Kindborg 来自 Change data-theme in jQuery mobile 的回答

$.mobile.changeGlobalTheme = function(theme)
    {
        // These themes will be cleared, add more
        // swatch letters as needed.
        var themes = " a b c d e";

        // Updates the theme for all elements that match the
        // CSS selector with the specified theme class.
        function setTheme(cssSelector, themeClass, theme)
        {
            $(cssSelector)
                    .removeClass(themes.split(" ").join(" " + themeClass + "-"))
                    .addClass(themeClass + "-" + theme)
                    .attr("data-theme", theme);
        }

        // Add more selectors/theme classes as needed.
        setTheme(".ui-mobile-viewport", "ui-overlay", theme);
        setTheme("[data-role='page']", "ui-page-theme", theme);
        setTheme("[data-role='header']", "ui-bar", theme);
        setTheme("[data-role='listview'] > li", "ui-bar", theme);
        setTheme(".ui-btn", "ui-btn-up", theme);
        setTheme(".ui-btn", "ui-btn-hover", theme);
    };
于 2014-05-10T06:25:35.797 回答