JQuery Web サイトスキニング関数の実装 code_jquery

それ以来、訪問者がマウスでどこかをクリックしてスタイルシートを切り替えられるようにする方法をたくさん見つけてきました。しかし最近、jQuery を使用して実装する簡単なコードを作成する方法についてのチュートリアルを書きたいと考えています。
jQuery コードの概要を説明するだけでなく、jQuery ライブラリの高度な機能のいくつかを明らかにするために、プロセス全体を段階的に説明します。
まず、コード

コードをコピーします コードは次のとおりです:

$ (document).ready (function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false ;
} );
var c = readCookie('style');
関数 switchStylestyle(styleName);
$( 'link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title ') == styleName ) this.disabled = false;
createCookie('style', styleName, 365);


その他の部分は言及されていませんCookie を作成および読み取る関数は後で説明します。
おなじみのオープニング

$(document).ready(function(){ $('.styleswitch').click(function()... は jQuery に「含まれるすべてのオブジェクトをできるだけ早く検索する」ように指示します

事前に指定した要素をクリックすると、switchStylestyle 関数が呼び出されます。
🎜> この文はどういう意味ですか?
このコードを初めて見たとき、少し頭が混乱しました:
$('link[@rel*=style]').each(function(i) {
インターネットで検索した後、結局、jQuery の作者である John Resig を見つけて相談する必要がありました。
彼は、jQuery Web サイトのページ アドレスを直接教えてくれました。これは、いくつかの jQuery 機能を説明しました。高度な機能 (xpath) は、ページ内のいくつかの要素を検索して操作するために使用できます。
これらを見たことがある人なら、上記の謎のコードの意味が jQuery に伝えることであることが理解できるでしょう。
1 つのメイン スタイル シートと 2 つのバックアップ スタイル シートを含むページを作成する方法を見てみましょう:
すべてのスタイル シートに 'style' 文字列を含む rel 属性が含まれていることがわかります。結果は一目瞭然です。
次のステップは何ですか? これらすべてのスタイルシート リンクを反復処理して、次のコードを実行します。次の行:
this.disabled = true;if (this.getAttribute('title') == styleName) this.disabled = false;"すべてのスタイルの最初のテーブル リンクを無効にしてから、title 属性を持つスタイル シートを開きますvalue は switchStylestyle 関数によって渡される文字列と同じです。"
これはほんの一握りですが、非常に効果的です。
ここで確認する必要があるのは、これらのスタイルシートが存在し、有効であることだけです。
完全なコードとデモ
このコードは Kelvin Luck がすでに書いているので、ここでは繰り返しません。
デモ
Kelvin はこの Web サイトからインスピレーションを得たと思います。この関数を実装するために他のツールを使用するのが jQuery よりも複雑で冗長であるかどうかを確認してみましょう。
styleswitch.js を完成させます




コードをコピーします


コードは次のとおりです:

/**
* jQuery 上に構築された Styleswitch スタイルシート スイッチャー
* 表示、共有ライセンスに基づいて
* 著者: Kelvin Luck ( http://www.kelvinluck.com/ )
**/
(function($)
{
$(document).ready(function() {
$('.styleswitch') .click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[@rel*=style][title]')。 each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
}); >createCookie('style', styleName, 365);
}
})(jQuery);
// Cookie 関数 http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime() (日*24*60*60*1000));
var 有効期限 = "; 有効期限 = date.toGMTString();
}
else var の有効期限が切れます = "";
document.cookie = name "=" 値の有効期限が切れます "; path=/";
}
function readCookie(name)
{
var nameEQ = name "=";
var ca = document.cookie.split(';');
for(var i=0;i {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
null を返します。
}
関数 EraseCookie(name)
{
createCookie(name,"",-1);
}
// /cookie 関数