Jquery mobile：クリックしてテーマを変更してください

Question

テーマには基本的なリストがあります。ボタンをクリックすると、テーマを変更する方法を見つけようとしています。 $('a li').attr('data-theme','a');とリストの更新を組み合わせてみました。そこの成功は？

Answer 1

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

Answer 2

「データテーマ」属性を変更した場合、jQuery Mobileはmouseoverイベントでテーマを更新することに気付きました。このソリューションは、ハックのようなものですが、簡単です。

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

死んで質問を復活させるために申し訳ありませんが、私はこの質問グーグル（「jqueryの携帯変更のテーマ」のSERPに＃6）を発見し、何が正しい答えはありませんでした。

Answer 3

ui-body-、ui-button-up、ui-button-down、ui-button-hover、およびui-bar-classesのすべてのページを検索し、それらのクラスのそれぞれを削除し、各クラスの最後に目的のテーマレターを追加します。私は現時点でそれを行うためのプラグインに取り組んでいます。

以下は、テーマBにテーマD'sのバーに設定されたページを変更します

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のモバイルは常にクラスを変更することです。 データテーマを変更すると、次のホバー/マウスオーバーイベントによって、新しいテーマに従ってクラスが変更されます。

新しいテーマの方が古いテーマよりも高い場合にのみうまくいきます。古いテーマのクラスは残っています。より高い文字を持つクラスは、より低い文字の後に置かれるので、より高い文字が勝ちます。

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からダウンロードしたさまざまなテーマの値を調整するだけです。

はアラートがifelseブロックの最後に、まだ投げされていない=

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

を「ページ」をデータ・役割を持っているのdivを取得します。