jQuery非リフレッシュ切り替えテーマスキン例 description_jquery

テーマスキン切り替え機能は多くのWebサイトやシステムで使用されており、ユーザーはこの機能に従って好みのテーマカラースタイルを設定でき、ユーザーエクスペリエンスを向上させます。この記事では、jQueryを使用して、更新せずにワンクリックでテーマスキンを切り替える機能を実装する方法に焦点を当てます。

この機能の実装の原則は、定義されたテーマ スタイルをクリックして、ページが現在参照しているテーマ CSS ファイルを変更し、ユーザーが次回再訪問したときに現在のテーマ スタイルを Cookie またはデータベースに書き込むことです。このページで呼ばれるものは、前回設定したテーマのスタイルです。
テーマスキンスタイルを準備します
まず、3 つのスタイルのテーマスキンである 3 つのスタイルシート CSS ファイルをページに導入し、ページの の間に配置します。

<link title="default" rel="stylesheet" type="text/css" href="css/default.css" /> 
<link title="blue" rel="stylesheet" type="text/css" href="css/blue.css" disabled="disabled" /> 
<link title="brown" rel="stylesheet" type="text/css" href="css/brown.css" disabled="disabled" /> 

さらに、2 番目と 3 番目の CSS ファイルを無効にしていることに注意してください。これは、最初の CSS ファイルがデフォルトで有効になることを意味します。
XHTML

<ul id="styles"> 
 <li id="default">经典</li> 
 <li id="blue">淡蓝</li> 
 <li id="brown">棕色</li> 
</ul> 

クリック切り替えには 3 つのテーマ スタイルが使用されます。id 属性を各 li に個別に追加したことに注意してください。
CSS

ul#styles{margin-top:10px} 
ul#styles li{float:left; width:50px; height:40px; line-height:40px; padding:2px; 
margin-left:10px; border:1px solid #fff; text-align:center; color:#fff; cursor:pointer} 
ul#styles li.cur{border:1px solid #369; background-image:url(images/selected.gif); 
background-repeat:no-repeat; background-position:4px 32px} 
ul#styles li#default{background-color:#162934;} 
ul#styles li#blue{background-color:#90c5e7} 
ul#styles li#brown{background-color:#601f00} 

CSS を使用して XHTML をレンダリングします。ここで、ul#styles li.cur は現在選択されているテーマのスタイルを指します。現在選択されているテーマを示すために小さなチェック マークを使用します。
jQeury
まず、jquery ライブラリと jquery.cookie プラグインを導入する必要があります。 jquery.cookie プラグインは、jQuery 用の強力な Cookie 操作関数を提供します。複雑なネイティブ JavaScript を記述する必要はなく、プラグインを直接呼び出すだけです。このプラグインの使用については、このサイトの記事をお読みください:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 

次に、ユーザーがクリックしてテーマを選択すると、次のアクションが実行されます: 選択したテーマ (ID) を取得し、参照されている CSS ファイルを確認し、その title 属性値が次と正確に等しいことが判明した場合現在選択されているテーマ ID 値、次にテーマ CSS ファイルを適用し、他の参照 CSS ファイルを無効にし、現在選択されているテーマを Cookie に書き込み、Cookie の有効期限を設定し、最後に現在選択されているテーマ ボタン (li) を現在選択されているテーマに設定します。州。詳細については、以下のコードを参照してください:

$("#styles li").click(function(){ 
 var style = $(this).attr("id"); 
 $("link[title='"+style+"']").removeAttr("disabled"); 
 $("link[title!='"+style+"']").attr("disabled","disabled"); 
 $.cookie("mystyle",style,{expires:30}); 
 $(this).addClass("cur").siblings().removeClass("cur"); 
}); 

この例では、選択したスタイルをユーザー Cookie に保存します。Cookie 名は「mystyle」、値は現在選択されているテーマの値、過去の期間は 30 日、つまり、expires:30< です。 🎜> 次に行う必要があるのは、ページの読み込み時にテーマ Cookie の値を読み取ることです。テーマ Cookie が存在する場合は、その Cookie 値に対応するテーマ スタイル CSS ファイルを呼び出し、現在のテーマ ボタンのステータスを選択状態に設定します。デフォルトのスタイルを呼び出します。コードは次のとおりです:

var cookie_style = $.cookie("mystyle"); 
if(cookie_style==null){ 
 $("link[title='default']").removeAttr("disabled"); 
 $("#styles li#default").addClass("cur"); 
}else{ 
 $("link[title='"+cookie_style+"']").removeAttr("disabled"); 
 $("#styles li[id='"+cookie_style+"']").addClass("cur"); 
 $("link[title!='"+cookie_style+"']").attr("disabled","disabled"); 
} 

この記事で使用されている
Cookie は、ユーザーが選択したテーマのスキン スタイルを記録しますが、Cookie の有効期限が切れたり、ユーザーがブラウザの COOKIE をクリアしたり、別のブラウザに切り替えて閲覧したりすると、現在設定されているテーマは無効になります。ユーザーが選択したテーマ スタイルを永続的に保存するには、選択したテーマがユーザー情報に対応しており、ユーザーが次回ログインするときにテーマを直接読み取ることができるようにする必要があります。もちろん、この方法を使用する必要があります。バックエンド管理システム、パーソナル センターなど、ユーザー権限を持つシステム内。