素晴らしい jQuery スタイル スイッチャーの作成: ステップバイステップ ガイド

このチュートリアルでは、jQuery と PHP を使用してスタイル スイッチャーを作成する方法を説明します。最終的には、目立たず、完全に分解可能な、高速かつ簡単に実装できる動的スタイル スイッチャーが作成されます。

ステップ 1: HTML

まず、基本的な HTML ファイルを作成し、index.php として保存する必要があります。

リーリー

ヘッダーのタイトル属性の下に PHP が表示されます。これは非常に簡単です。「style」と呼ばれる Cookie をチェックするだけです。存在する場合は、それをローカル変数 (「style」とも呼ばれます) に割り当てます。Cookie が存在しない場合は、デフォルトのテーマ (「日」) を $style 変数に割り当てます。この変数は、link 要素の href 属性 (href="css/<?php echo $style ?>.css") でエコーされます。

上記の HTML にスタイル スイッチャー div が含まれていることがわかります。私たちが使用する方法では、JavaScript が無効になっているときにスタイル スイッチャーが動作できるようにするため、これを追加するために JavaScript を使用する必要はありません。どちらのリンク (夜と昼) も、対応するテーマを指定するクエリ文字列が追加された style-switcher.php という名前のファイルにユーザーを誘導します (例: href="style-switcher.php?style=day ") 。

styleSwitcher という jQuery プラグインも呼び出しました。これはまだ開発されていません (まあ、これを読む頃には開発されているでしょう) ので、お待ちください。 ...このプラグインは、このチュートリアルのステップ 4 で作成します。

ステップ 2: CSS

次に、HTML 用の CSS スタイルシートをいくつか作成する必要があります。私は 2 つのスタイルシートだけを作成することにしました。1 つは「昼」をテーマにし、もう 1 つは「夜」をテーマにし、それらに適切な名前を付けました。 (Day.css と Night.css)

今日のテーマ:

夜のテーマ:

1 つのスタイルから始めて、すべてのセレクターを別のスタイルシートにコピーすることをお勧めします。その場合、変更する必要があるのは、さまざまな CSS ルールと宣言だけです。もちろん、スタイル シートは必要な数だけ使用できますが、このチュートリアルでは説明のために 2 つを使用します。そして昼も夜もデュオとして仲良くやっていきましょう！

day.css：

リーリー

Night.css：

リーリー

これは実際には CSS チュートリアルではないため、上記の内容については詳しく説明しませんが、ご質問がございましたら、お気軽にコメント セクションでお問い合わせください。はい、古いブラウザが min-width をサポートしていないことは知っています。 ;)

ステップ 3: スタイル Switcher.php

ここで、スタイル スイッチャーのコア機能を記述します。これは実際には、非常に基本的な PHP コードのほんの数行です。 「style-switcher.php」という名前の新しいファイルを作成し、次の内容をそこにコピーする必要があります:

リーリー

したがって、上記のコードは、「style」GET 変数をローカルの $style 変数に割り当てます。つまり、クエリ文字列の style 属性の値 (style-switcher.php?style=day) を取得します。次に、「style」という Cookie を設定します (これは 1 週間持続します)。ステップ 1 で示したコードを使用して、メインの Index.php でこの Cookie を取得できます (head## の小さなものを思い出してください) # PHP をブロックしますか?)。次に、クエリ文字列に「js」が追加されているかどうかを確認します。そうであれば、JavaScript (まだ作成していません) がこの PHP スクリプトを要求したことがわかります。 else 条件は、ユーザーが JavaScript を有効にしていない場合に発生し、ユーザーをリファラー (つまり、参照元のページ) にリダイレクトします。これは、jQuery コンテンツを作成するとより明確になります。

ステップ 4: jQuery コンテンツ

必要に応じて、ここで停止しても構いません。 ...これまでのソリューションは完璧に機能しますが、冒頭で述べたように、jQuery の力を加えてさらにクールなものにするつもりです。ユーザーがページを更新せずにテーマを変更できるようにするだけでなく、非常にクールなフェード効果も追加します... つまり、フェードがなければ、これはどのような種類の jQuery チュートリアルになるでしょうか。 ? ！ ?

もちろん、これはプラグインを作成しなくても可能ですが、皆さんにとって素晴らしい学習体験になると思います。また、コードを迅速かつ簡単に適応または転送できるようになります。

まず、「styleswitcher.jquery.js」というファイルを作成しましょう。

jQuery での新しいプラグインの作成は非常に簡単で、必要なのは次のコードだけです:

リーリー

したがって、まず、スタイルシート リンクの 1 つ (

div#style-switcher 内のリンク) がクリックされたときに何が起こるかを指定します。

/* "this" refers to each instance of the selected element,
 * So, if you were to call the plugin like this:
 * $('a').styleSwitcher(); then the following would occur
 * when clicking on any anchor within the document:
 */

$(this).click(function(){
	// We're passing this element object through to the
	// loadStyleSheet function.
	loadStyleSheet(this);
	// And then we're returning false.
	return false;
});

加载样式表：

现在我们需要编写loadStyleSheet函数：

function loadStyleSheet(obj) {

	// Append new div to body:
	$('body').append('<div id="overlay" />');

	// Give body a height of 100% (to fix IE6 issue):
	$('body').css({height:'100%'});

	// Select newly created div and apply some styles:
	$('#overlay')
		.css({
			display: 'none',
			position: 'absolute',
			top:0,
			left: 0,
			width: '100%',
			height: '100%',
			zIndex: 1000,
			background: 'black url(img/loading.gif) no-repeat center'
		})

		// Now fade in the div (#overlay):
		.fadeIn(500,function(){

			// The following will happen when the div has finished fading in:

			// Request PHP script (obj.href) with appended "js" query string item:
			$.get( obj.href+'&js',function(data){

				// Select link element in HEAD of document (#stylesheet) and change href attribute:
				$('#stylesheet').attr('href','css/' + data + '.css');

				// Check if new CSS StyleSheet has loaded:
				cssDummy.check(function(){

					// When StyleSheet has loaded, fade out and remove the #overlay div:
					$('#overlay').fadeOut(500,function(){
						$(this).remove();
					});
				});
			});
		});
}

我希望评论能充分解释这一点。细心的你会注意到我们正在调用一个当前未定义的函数（cssDummy.check()）。别担心，因为这是下一步......

cssDummy：

我们需要一种方法来测试样式表是否已加载。如果它已经加载，那么我们可以让覆盖层 div 消失，但如果它没有加载，我们必须继续检查，直到它加载。我在网上进行了一些搜索，找到了测试此类事情的可靠方法。它涉及测试虚拟元素的计算宽度。该元素的宽度将在 CSS 中定义 - 因此，当样式表加载时，计算出的元素宽度将仅等于 CSS 中定义的宽度。我希望您现在明白为什么我们必须在每个 CSS 文件中包含“#dummy-element”规则...

所以，这里是：

var cssDummy = {
	init: function(){
		// Appends "dummy-element" div to body:
		$('<div id="dummy-element" style="display:none" />').appendTo('body');
	},
	check: function(callback) {

		// Checks if computed with equals that which is defined in the StyleSheets (2px):
		if ($('#dummy-element').width()==2) callback();

		// If it has not loaded yet then simple re-initiate this
		// function every 200 milliseconds until it had loaded:
		else setTimeout(function(){cssDummy.check(callback)}, 200);
	}
}

并且，在插件的最后，我们将调用 cssDummy.init 函数：

cssDummy.init();

我们完成了！整个插件现在看起来像这样：

jQuery.fn.styleSwitcher = function(){
	$(this).click(function(){
		loadStyleSheet(this);
		return false;
	});
	function loadStyleSheet(obj) {
		$('body').append('<div id="overlay" />');
		$('body').css({height:'100%'});
		$('#overlay')
			.css({
				display: 'none',
				position: 'absolute',
				top:0,
				left: 0,
				width: '100%',
				height: '100%',
				zIndex: 1000,
				background: 'black url(img/loading.gif) no-repeat center'
			})
			.fadeIn(500,function(){
				$.get( obj.href+'&js',function(data){
					$('#stylesheet').attr('href','css/' + data + '.css');
					cssDummy.check(function(){
						$('#overlay').fadeOut(500,function(){
							$(this).remove();
						});
					});
				});
			});
	}
	var cssDummy = {
		init: function(){
			$('<div id="dummy-element" style="display:none" />').appendTo('body');
		},
		check: function(callback) {
			if ($('#dummy-element').width()==2) callback();
			else setTimeout(function(){cssDummy.check(callback)}, 200);
		}
	}
	cssDummy.init();
}

我们现在可以像这样调用 jQuery 插件：

$('#style-switcher a').styleSwitcher();

完成！

如果您不确定文件结构，请下载 src 文件来查看。我希望您喜欢阅读本教程。一如既往，如果您有任何疑问，请随时在下面提问！如果您喜欢这篇文章，请挖掘它！

以上が素晴らしい jQuery スタイル スイッチャーの作成: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。