TokyoHeadTerminal » JavaScript http://www.head-t.com Thu, 09 Feb 2012 06:44:04 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 jQuery lightbox plugin http://www.head-t.com/2008/12/2008-12-18-01.html http://www.head-t.com/2008/12/2008-12-18-01.html#comments Thu, 18 Dec 2008 09:51:21 +0000 大森 http://tyoht.kir.jp/wp/?p=136 jQuery lightbox plugin

jQuery lightbox plugin

Web制作の際、使いどころを間違わなければバッチリとキマるLightboxですが、prototype.js ベースなので jQueryと併用する場合にはコンフリクト回避を行う必要がありました。

jQuery で lightbox を使用する plugin、その名もjQuery lightbox plugin です。

1
2
3
4

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-setting.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox.css" media="screen" />

などで、必要な Javascript と CSS を読み込みます。
また、下記のような指定ができます。

1
2
3
4
5
6
7
8

<script type="text/javascript">
$(function() {
$(’a[@rel*=lightbox]‘).lightBox(); // rel属性でlightboxと指定しているaタグにlightboxを指定する。
$(’#gallery a’).lightBox(); // 特定のIDの中のaタグにlightboxを指定する。
$(’a.lightbox’).lightBox(); // lightboxというclassをつけたlightboxを指定する。
$(’a').lightBox(); //aタグすべてにlightboxを指定する。
});
</script>

jquery.lightbox-setting.js

html 上に色々と書いてしまうのもアレなので、上記の設定をを行うために勝手に作った js ファイルです。下記のような指定をしておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
$(function() {
$(’a[@rel*=lightbox]‘).lightBox({　//rel属性でlightboxと指定しているaタグにlightboxを指定する。
overlayBgColor: ‘#000′,　//背景の色を指定できます。
overlayOpacity: 0.6,　//背景の透明度を指定できます。デフォルトは0.8。
imageLoading: ‘http://www.head-t.com/common/lightbox/loading.gif’,　//ローディングの画像を指定できます。
imageBtnClose: ‘http://www.head-t.com/common/lightbox/close.gif’,　//閉じるのボタンの画像を指定できます。
imageBtnPrev: ‘http://www.head-t.com/common/lightbox/prev.gif’,　// 戻るのボタンの画像を指定できます。
imageBtnNext: ‘http://www.head-t.com/common/lightbox/next.gif’,　//次へのボタンの画像を指定できます。
containerBorderSize: 10,　//写真の枠のパディングの指定ができます。デフォルトは10。
containerResizeSpeed: 350,　//コンテナーのデュレイション(モーションの速度)を指定できます。デフォルトは400。
txtImage: ‘No.’,　//画像のキャプションを指定できます。
txtOf: ‘/’　//画像のキャプションで "of" を利用できます。
});
});
</script>

外部リンク

]]> http://www.head-t.com/2008/12/2008-12-18-01.html/feed 0 【XHTML＋CSS】08_JavaScriptライブラリとCSS http://www.head-t.com/2008/12/2008-12-06-02.html http://www.head-t.com/2008/12/2008-12-06-02.html#comments Fri, 05 Dec 2008 18:09:18 +0000 大森 http://tyoht.kir.jp/wp/?p=120 【XHTML＋CSS】08_JavaScriptライブラリとCSS

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

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

代表的なJavaScriptライブラリ

複数の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イベントをバッティングせずに利用できる。

1
2
3
4
5
6
7
8
9

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の読み込み

1
2
3
4

<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

1
2
3
4
5
6
7
8
9
10
11
12

<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

* {
	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

1
2
3
4
5
6
7
8

$(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フィルタを利用して、クリックされたタブと同じ番号のパネルを表示する。

外部リンク

]]> http://www.head-t.com/2008/12/2008-12-06-02.html/feed 0