【XHTML＋CSS】08_JavaScriptライブラリとCSS

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

代表的なJavaScriptライブラリ

prototype.js（プロトタイプ・ジェイエス）
script.aculo.us（スクリプタキュラス）
jQuery（ジェイ・クエリー）
Yahoo! User Interface library
Adobe Spry Framework for Ajax

複数のJavaScriptライブラリを同時に利用する際の注意点

jQueryとprototype.js

両方とも$というオブジェクトを利用しており、あとから読み込んだライブラリがオブジェクトを上書きしてしまうので、同時に利用できない。同時に利用する場合はJQueryにコンフリクト回避を行う。prototype.jsを読み込んだあとにjQueryを読み込み、その直後にコンフリクト回避の命令を記述する。

1
2
3

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">jQuery.noConflict(); //コンフリクト回避の命令 </script>

これにより、jQueryの$がjQueryに書き換えられるので、コンフリクト回避後は$(“tr:even”)ではなくjQuery(“tr:even”)と記述する。

onload記法の変更

あとから設定されているonloadイベントしか実行されないので、

1	window.onload = function() { 　load時に実行される命令 }

この指定を次のように書き換えることで、Javascriptライブラリのonloadイベントをバッティングせずに利用できる。

addEvent(window,"load",function() {load時に実行される命令})
var addEvent= function(elm,listener,fn) {
try {
elm.addEventListener(listener,fn,false);
}
catch(e) {
elm.attachEvent("on"+listener,fn);
}
}

yuga.js

ロールオーバーやスムーズスクロールなど、さまざまな機能が統合されたライブラリ。

01. ファイルセットのダウンロードと解凍

»配布元からダウンロード

02. yuga.jsに必要なCSSとJavascriptの読み込み

<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript" src="js/yuga.js" charset="utf-8"></script>

03. img要素のclass属性に「btn」を追加

ロールオーバーを適用したいimg要素にclass属性でbtnという値を追加する。ロールオーバー後の画像は、ファイルの末尾に「_on」を付けておくという決まりがある。

jQueryの基本的な使い方

jQuery1.2.6.min.jsのminは、ファイルの圧縮形式Minifiedをあらわしたもので、変数名を短くしたり、コメントや空白、改行を削除してファイルサイズを大幅に減少したもの。

jQueryでストライプテーブルを実現

stripe_table.js

1	$(function)) { 　$("tr:nth-child)odd)").css("background-color", "#cccccc"); })

奇数と偶数 oddは奇数、evenは偶数。テーブルの1行目はcaption要素としてカウントするため、テーブル一番上は偶数行目になる。

nth-child 10番目は10thのようにthをつけて表現し、nは数を表すので、nth-child()で()内の順番の子要素といった意味合いになる。

jQueryでタブパネルを実現

tab_panel.html

<div id="container">
　<ul class="tab">
　　<li>タブ1</li>
　　<li>タブ2</li>
　　<li>タブ3</li>
　</ul>
　<ul class="panel">
　　<li>タブ1の内容</li>
　　<li>タブ2の内容</li>
　　<li>タブ3の内容</li>
　</ul>
</div>

tab_panel.css

* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
div#container {
	margin: 10px auto;
	width: 500px;
}
ul.tab li {
	float: left;
	padding: 4px 10px;
	cursor: pointer;
	background: #ddd;
	border: 1px solid #999;
	margin-right: 1px;
	position: relative;
	top: 1px;
}
ul.tab li.selected {
	border-bottom: 1px solid #eee;
	background: #eee;
}
ul.panel li {
	clear: both;
	background: #eee;
	border: 1px solid #999;
	padding: 10px;
}

ひとつ目のul要素をタブとするためにclass属性でtabという値を、ふたつ目のul要素をパネルとするためにclass属性でpanelという値で指定する。

tab_panel.js

$(function() {
$(".tab li:first-child").addClass("selected");
$(".panel li:not(:first)").css("display","none");
$(".tab li").click(function() {
$(".tab li").removeClass("selected");
$(this).addClass("selected");
$(".panel li").css("display","none");
$(".panel li:eq("+$(".tab li").index(this)+")").css("display","block"); 　}); });

以下、ソースコードの解説

1	$(".tab li:first-child").addClass("selected");

addClassは、指定した要素にclass属性を追加する命令。CSSセレクタは、class属性にtabの値を持つ要素のなかの最初のli要素、つまりひとつ目のタブにselectedというclass属性を追加するという意味。selectedは、tab_panel.cssでタブの選択状態をあらわすクラスとしてスタイルを適用している。

1	$(".panel li:not(:first)").css("display","none");

cssは、指定した要素のcssプロパティを変更する命令。CSSセレクタは、class属性にpanelの値を持つ要素のなかの最初のli要素以外、つまりひとつ目のパネル以外のdisplayプロパティをnone（非表示）にしている。

ここまでのaddClassとcssの命令で、タブパネルの初期状態を設定している。

1	$(".tab li").click(function() {クリックされた時の命令});

clickは、指定した要素がクリックされたときの命令。

1	$(".tab li").removeClass("selected");

removeClassは、指定した要素からclass属性を削除する命令。クリックされたときにすべてのタブからselectedを削除し、未選択状態に変更している。

1	$(this).addClass("selected");

クリックされたときの命令を記述する際、$()の中にCSSセレクタではなくthisと指定した場合、クリックされた要素それ自体を意味する。クリックされた要素のclass属性にselectedという値を追加する意味になる。

以上で、タブをクリックしたときに、クリックされた要素を選択状態に変更することができる。

1	$(".panel li").css("display","none");

すべてのパネルを非表示にする指定

1	$(".tab li").index(this)

indexは、指定された要素の中での番号を取得する命令。ここではタブの中でクリックされた要素の番号を取得している。

1	$(".panel li:eq("+$(".tab li").index(this)+")").css("display","block");

eqフィルタを利用して、クリックされたタブと同じ番号のパネルを表示する。

外部リンク

»CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

こちらの関連記事もあわせてどうぞ！

返信をキャンセルする。