AjaxなフェードエフェクトでCSSを切り替える/その他/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

CSS切り替えstyleswitcher.jquery.js

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photo Gallery</title>
<link id="stylesheet" type="text/css" href="css/day.css" rel="stylesheet" />

<script type="text/javascript" src="js/script.php"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/styleswitcher.jquery.js"></script>
<script type="text/javascript">
$('#stylesheet').attr('href','css/' + styleValue + '.css');
</script>
</head>

<body>
<div id="container">
			<h1>Style-Switcher Example</h1>
			<ul id="nav">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Products</a></li>
				<li><a href="#">Links</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<div id="banner"></div>
			<div id="content">
				<h2>NETTUTS Tutorial Example</h2>
				<p>This is an example of an obtrusive and entirely degradable jQuery style switcher. You can try it out by choosing from the choices (at very top of page).</p>
			</div>
			<div id="foot">
				<p><a href="#link-to-tut">Tutorial</a> by <a href="http://nettuts.com/author/james/">James Padolsey</a></p>
			</div>
			<div id="style-switcher">
				<h4>Choose your style:</h4>
				<ul>
					<li id="day"><a href="style-switcher.php?styleswitcher=day">Day</a></li>
					<li id="night"><a href="style-switcher.php?styleswitcher=night">Night</a></li>
				</ul>
			</div>
		</div>
        <script type="text/javascript">
			$('#style-switcher a').styleSwitcher();
		</script>

</body>
</html>

	How To Create An Amazing jQuery Style Switcher - Nettuts+

サンプル「day」「naight」をクリックすると切り替わります。
CSSを切り替える瞬間、ローディング画像を表示してフェードエフェクトで新しいCSSを適用させます。
cookieで切り替えを記録する為にphpファイルのみでしか動作しませんが、
javascriptなどでカスタマイズしてHTMLファイルで使用させることも出来ます。

以下ではカスタマイズ込みでご説明します。

セッティング

１．ダウンロード/セッティング

サイトへ行き demo.zip をダウンロードしてきて下さい。
それを解凍したら js フォルダ と style-switcher.php をアップロード。

cssとimgフォルダにはサンプルで使用しているCSSファイルと画像がそれぞれ入っていますが、
今回はすでにオリジナルのものが用意されていることを前提に解説していきます。
ですのでパスは各々調節してください。

２．<head>設定

まず最初に適用させて起きたいCSSファイルを読み込ませます。

パスは任意のものに変更し、ID名に stylesheet と記述してください。

次に script.php というファイルを作成し開いて以下の内容をコピペしてください。
（ファイルの文字コードを読み込み先ページと同じにしてください）

<?php

if(!empty($_COOKIE['styleswitcher'])) $style = $_COOKIE['styleswitcher'];
else $style = 'day';
header("Content-type: application/x-javascript");
echo "document.write('<script type=\"text/javascript\">var styleValue = \"".$style."\";</script>')";
?>　

コピペしたら jsフォルダにアップし、これを<head>に読み込ませます。

次に jsフォルダ内にある他のファイルも読み込ませます。

そして最後にページ読み込み時にクッキーから前に適用していたCSS情報に合わせてCSSを書き換える記述をします。

これで完了です。

CSSファイルを自分の任意のフォルダにしたい場合は上記の　css/　を変更して下さい。
それから、 styleswitcher.jquery.js 内22行目、

$('#stylesheet').attr('href','css/' + data + '.css');　

の箇所も同じように調節してください。

３．HTMLマークアップ

CSSを切り替えるリンクは、

<div id="style-switcher">
   <ul>
   <li id="day"><a href="style-switcher.php?styleswitcher=day">Day</a></li>
   <li id="night"><a href="style-switcher.php?styleswitcher=night">Night</a></li>
   </ul>
</div>　

id="style-switcher" 内のリンクに style-switcher.php?styleswitcher=day のような href を設定してください。
切り替えたいCSSファイルの数だけ設置可能です。
day , night の箇所は切り替えたいCSSのファイル名です。（.cssを抜かした）
リンクの場所の構造とhrefの記述ルールさえ守ればどこでも設置可能です。

最後にフェードのトリガーを記述します。

これを</body>の前ぐらいに記述してください。
オレンジの箇所を調節すれば、切り替えリンクの構造も変えることが出来ます。

新着記事
ページ履歴
人気ページ

縦にフェード展開するドロップダウンメニュー

感想

これ最高です！こういうの見つけるとなんか楽しくなってしょうがないですね。
デザイン複数作るのは大変ですが、こんな風に切り替えられるなら頑張りがいもあります。
デフォルトだとphpファイル上でしかクッキーの記憶からCSS適応させることができませんが、
ちょっと手を加えればHTML上でも使えるようになるのでぜひお試し下さい。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。

１．ダウンロード/セッティング

２．<head>設定

３．HTMLマークアップ

関連スクリプト

感想

スクリプトの使用について