我正在使用jQuery手機動態構建一個新頁面。我想現在添加主題，即data-theme="a"。有沒有更簡單的方法來做到這一點？目前看起來我會將它添加到下面的每個div。jQuery手機動態添加主題到頁面

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

來源

2013-04-21 GrantU

更新 - jQuery Mobile的1.4

有使用.page({"theme"})或.page("option", "theme")時是bug in .page() widget。它不會刪除當前的主題類，但它會添加新的主題類。然而，新班級並沒有重寫舊班級。所以這裏是修復。

(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的默認主題是「一」。

要用於動態創建的頁面設置主題，使用$('.selector').page({theme:'e'});你追加頁後，你瀏覽他們使用$.mobile.changePage()之前。

對於一個特定的頁面：

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

對於所有的網頁：

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

Demo - Updated with .page() fix

來源

2013-04-21 22:43:31 Omar

我用這個和它的真正偉大的作品：d

Mikael Kindborg answer from 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-10 06:25:35

jQuery手機動態添加主題到頁面

回答

更新 - jQuery Mobile的1.4

相關問題