JavaScript + Ajax 実践サンプル集 - スタイルシートを切り替える

スタイルシートを切り替える　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのstyleSwitch()プラグインを利用して外部ファイルに格納されているスタイルシートを切り替えます。[styles1-3]をクリックすると対応するスタイルシートに切り替えます。カレントのスタイルシートは「Currently active stylesheet」に表示されます。

このサンプルを編集して試してみる

linkタグにはrel,title属性を指定します。style2とstyle3のrel属性には「alternate stylesheet」を指定します。

<link href="jQuery/styleSwitch/styles1.css" 
  rel="stylesheet" title="styles1" type="text/css" />
<link href="jQuery/styleSwitch/styles2.css" 
  rel="alternate stylesheet" title="styles2" type="text/css" />
<link href="jQuery/styleSwitch/styles3.css" 
  rel="alternate stylesheet" title="styles3" type="text/css" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Style Switch </title>
  <link href="jQuery/styleSwitch/styles1.css" rel="stylesheet" title="styles1" type="text/css" />
  <link href="jQuery/styleSwitch/styles2.css" rel="alternate stylesheet" title="styles2" type="text/css" />
  <link href="jQuery/styleSwitch/styles3.css" rel="alternate stylesheet" title="styles3" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/styleSwitch/styleswitch.js" type="text/javascript"></script>
  <script type="text/javascript">
    //    $(function() {
    //    });
  </script>
</head>
<body>

<p>
    Currently active stylesheet: <span id="st1">styles1</span> <span id="st2">styles2</span>
    <span id="st3">styles3</span>
  </p>
  <p>Choose a different stylesheet:</p>
  <ul>
    <li><a href="#?style=style1" rel="styles1" class="styleswitch">
      styles1</a></li>
    <li><a href="#?style=style2" rel="styles2" class="styleswitch">
      styles2</a></li>
    <li><a href="#?style=style3" rel="styles3" class="styleswitch">
      styles3</a></li>
  </ul>
  
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/

$(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);
}

// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;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);
	}
	return null;
}
function eraseCookie(name)
{
	createCookie(name,"",-1);
}
// /cookie functions

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/* styles1.css */
body, html
{
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
body
{
  background: #e0e0e0;
  color: #333;
  font-size: 76%;
  padding: 20px;
}

#st2, #st3
{
  display: none;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/styleSwitch/styles1.css" rel="stylesheet" title="styles1" type="text/css" />
  <link href="jQuery/styleSwitch/styles2.css" rel="alternate stylesheet" title="styles2" type="text/css" />
  <link href="jQuery/styleSwitch/styles3.css" rel="alternate stylesheet" title="styles3" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/styleSwitch/styleswitch.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <p>
    Currently active stylesheet: <span id="st1">styles1</span> <span id="st2">styles2</span>
    <span id="st3">styles3</span>
  </p>
  <p>Choose a different stylesheet:</p>
  <ul>
    <li><a href="#?style=style1" rel="styles1" class="styleswitch">
      styles1</a></li>
    <li><a href="#?style=style2" rel="styles2" class="styleswitch">
      styles2</a></li>
    <li><a href="#?style=style3" rel="styles3" class="styleswitch">
      styles3</a></li>
  </ul>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

スタイルシートを切り替える　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

スタイルシートを切り替える 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

スタイルシートを切り替える　《プログラマーがネットで副収入を得る方法とは》