jquery手機：點擊更改主題

Question

我有一個基本的主題列表a。我試圖找到一種方法來改變主題，當點擊一個按鈕。嘗試$('a li').attr('data-theme','a');結合列表刷新沒有運氣。在那裏取得成功？

Answer 1

$('a li').data('theme', 'a'); 
          //<-- use the data() function to change data attributes 

Answer 2

我注意到如果你改變了「data-theme」屬性，jQuery Mobile會刷新mouseover事件的主題。這個解決方案有點破解，但很簡單。

$("a li").attr("data-theme", "a").trigger("mouseout") 

對不起，復活一個死的問題，但我發現這個問題，谷歌（在SERP的「jQuery Mobile的變化主題」＃6），也沒有正確的答案。

Answer 3

您將不得不搜索頁面中所有的ui-body-，ui-button-up，ui-button-down，ui-button-hover和ui-bar-classes，在結尾處查找字母其中每個類都刪除這些類，然後在每個類的末尾添加所需的主題字母。我正在研究一個插件來做到這一點。

下面將改變頁面設置爲主題D的酒吧主題B：

var pages = $("div[data-role='page']"), pageThemeClasses = $(pages+"[class$=d]"); 

$(pageThemeClasses).removeClass('ui-bar-b'); 
$(pageThemeClasses).addClass('ui-bar-b'); 

Answer 4

這爲我工作。

$("a li").removeClass("ui-body-b"); //remove old theme 
$("a li").addClass("ui-body-a"); //add new theme 

Answer 5

不知道爲什麼這個工程，但改變類然後主題，然後觸發'創造'適用於我 - 希望它可以幫助某人。

$("div[data-role='collapsible']").bind('expand', function() { 
$(this).find("a[data-theme='c']").removeClass('ui-btn-up-c').addClass('ui-btn-up-b').attr('data-theme', 'b').trigger('create'); 
}); 

$("div[data-role='collapsible']").bind('collapse', function() { 
$(this).find("a[data-theme='b']").removeClass('ui-btn-up-b').addClass('ui-btn-up-c').attr('data-theme', 'c').trigger('create'); 
}); 

Answer 6

那麼，這取決於你試圖改變什麼樣的元素。 這是你如何能撥動按鈕元素主題：

var oT = $(this).attr('data-theme'); // old theme 
var nT = (oT == 'a' ? 'e' : 'a'); // new theme 

$(this).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 
$(this).parent('div').removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 

相反，如果它與數據角色的錨標記=「按鈕」：

$(this).removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 

簡單，使用瀏覽器控制檯檢查元素（和父/子元素）數據主題屬性和類定義在哪裏。

Answer 7

那麼從科瑞Docken得到的答案基本工作原理：

$("a li").attr("data-theme", "a").trigger("mouseout") 

訣竅是，當你根據已選定的數據主題將鼠標懸停在一個元素jQuery Mobile的總是變化的類。 如果更改數據主題，則下一個懸停/ mouseover事件將根據新主題更改類。

那麼，它只適用於新的主題比舊的主題有更高的字母。舊主題中的課程依然存在。由於具有較高字母的類放在具有較低字母的類之後，較高的字母會勝出。

Answer 8

如果您使用主題滾筒（themeroller.jquerymobile。COM），那麼你可以調整自己的顏色和導出每個主題一個CSS，然後以編程方式：

$("#idoflink").attr("href", "theotherstyle.css"); 

，我認爲它應該做的

Answer 9

將這個代碼放到頭：

<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css"> 
<script> 
    $(document).on("pagecreate", function() { 
     $("#theme-selector input").on("change", function(event) { 
      var themeClass = $("#theme-selector input:checked").attr("id"); 

      $("#testpage").removeClass("ui-page-theme-a ui-page-theme-b").addClass("ui-page-theme-" + themeClass); 
     }); 
    }); 
</script> 

$ （「#testpage」）是示例組件的id（這將是body內部主div上的id）。

添加到身體：

<div class="ui-field-contain" id="theme-selector"> 
      <fieldset data-role="controlgroup" data-type="horizontal"> 
       <legend>Theme:</legend> 
       <label for="a">A</label> 
       <input type="radio" name="theme" id="a" checked> 
       <label for="b">B</label> 
       <input type="radio" name="theme" id="b">  
      </fieldset> 
     </div> 

我希望這是回答你想達到的目標。當然，您可以輕鬆地用「按鈕」替換「收音機」並稍微修改一下。

Answer 10

在2018年這對我有用，只需調整您從ThemeRoller下載的不同主題的值。

獲取誰擁有數據的作用在div =「頁」

var lastTheme = 'a'; 
function ThemeSwap() { 
    var rootDiv = $('#IdOfDivMarkedAsDataRolePage'); 

    if (lastTheme === 'a') { 
     rootDiv.removeClass('ui-page-theme-a'); 
     rootDiv.addClass('ui-page-theme-b'); 
     lastTheme = 'b'; 
    } 
    else if (lastTheme === 'b') { 
     rootDiv.removeClass('ui-page-theme-b'); 
     rootDiv.addClass('ui-page-theme-c'); 
     lastTheme = 'c'; 
    } 
    else if (lastTheme === 'c') { 
     rootDiv.removeClass('ui-page-theme-c'); 
     rootDiv.addClass('ui-page-theme-a'); 
     lastTheme = 'a'; 
    } 
    else 
     alert('bad theme swapping. last theme = ' + lastTheme); 

    rootDiv.trigger('create'); 
    return true; 
} 

警報尚未在ifelse塊的末尾還沒有拋出。