jquery.cookie.jsを使い、状態を保存できるタブインターフェイスの作成です。

角丸タブインターフェイス

今回はためしに、角丸のタブインターフェイスで作成してみました。
ただし、FireFoxとSafari限定です。IEだと、ただの四角。。。

HTMLソース

[sourcecode language=’html’]

• Yahoo!
• Google
• Bing

[/sourcecode]

CSSソース

[sourcecode language=’css’]
ul#tab {
height: 2.3em;
}

ul#tab li {
float: left;
}

ul#tab li a {
display: block;
margin: 0 5px 5px 0;
padding: .5em 1em 1em;
background: #000;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
color: #fff;
}

ul#tab li a.active {
background: #ccc;
color: #000;
}

#tabContents {
position: relative;
_margin-top: -10px;
background: #fff;
border: solid #ccc 1px;
width: 100%;
}

#tabContents div {
padding: 1em;
background: #fff;
}
[/sourcecode]

タブのクリック領域は広いほうがいいので、aをdisplay:blockにします。
paddingで領域を広げて背景に色をつけます。
そして、下記の記述を入れることで、角丸を実現出来ます。

[sourcecode language=’css’]
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
[/sourcecode]

-moz-がMozilla、つまりFireFoxで、-webkit-はAppleのレンダリングエンジンなのでSafariです。
少し記述が違いますが、topのrightとleft、右上と左上を、radius、角丸にしています。
ちなみに、radiusは英語で「半径」の意味です。

Javascriptを記述、の前に。。。

前説が長くなりましたが、ここから本題のJavascriptソースです。
でもその前に、jquery.cookie.jsを使用するので、まずこちらをjquery.jsの次に読み込んで下さい。
一番下のファイルは今回作成するJavascriptですので、任意に変更してもらって大丈夫です。
[sourcecode language=’html’]



[/sourcecode]

Javascriptソース

読み込みが完了すれば、やっとJavascriptです。
[sourcecode language=’javascript’]
$(function(){
var Tabs = $(“ul#tab li a”);
var TabActive = “active”;
var TabContents = $(“div#tabContents”);
$(“div” , TabContents).hide();

$(Tabs).click(function(e){
e.preventDefault();
$(“div” , TabContents).hide();
$($(this).attr(“href”)).fadeIn(300);
$(Tabs).removeClass(TabActive);
$(this).addClass(TabActive);
$.cookie(“contents”, $(this).attr(“href”) , {expires: 7});
});

// クッキー読み込み
var CookieName = $.cookie(“contents”);
if (CookieName != null) {
$(Tabs).removeClass(TabActive);
$(“a[href=”+CookieName+”]”).addClass(TabActive);
$(CookieName).fadeIn(300);
} else {
$(“#tab li a:first”).addClass(TabActive);
$(“div:first” , TabContents).fadeIn(300);
}
});
[/sourcecode]

Javascriptの解説

2-4行目:変数の設定

[sourcecode language=’javascript’]
var Tabs = $(“ul#tab li a”);
var TabActive = “active”;
var TabContents = $(“div#tabContents”);
[/sourcecode]
通常と違うのは”active”が$()で囲まれていないこと。
これはaタグにactiveをaddClass、removeClassで操作するため、文字列にしています。

5行目:タブのコンテンツ要素の表示を操作

[sourcecode language=’javascript’]
$(“div” , TabContents).hide();
[/sourcecode]
hide()でタブのコンテンツ要素を非表示にしています。

7-14行目:クリックイベントの処理

[sourcecode language=’javascript’]
$(Tabs).click(function(e){
e.preventDefault();
$(“div” , TabContents).hide();
$($(this).attr(“href”)).fadeIn(300);
$(Tabs).removeClass(TabActive);
$(this).addClass(TabActive);
$.cookie(“contents”, $(this).attr(“href”) , {expires: 7});
});
[/sourcecode]
変数Tabsをクリックした際のイベント処理を設定します。
e.preventDefault();を指定することで、通常のaタグのページ繊維を無効にします。
ちなみにeはfunction(e)のからきています。

ここからが一番肝心な処理になります。
$(“div” , TabContents).hide();
$($(this).attr(“href”)).fadeIn(300);
上段の記述でコンテンツ要素を全て非表示にします。
次に、クリックしたaタグのhrefの値を取得し$()で囲んでid名にしています。
この方法はクリックイベントの最初のほうでも使用した方法です。

$(Tabs).removeClass(TabActive);
$(this).addClass(TabActive);
変数Tabsの要素から変数TabActiveをremoveClassで取り除いています。
次に、クリックされた要素のみに変数TabActiveをaddClassで挿入しています。

最後にcookieの処理です。
$.cookie(“contents”, $(this).attr(“href”) , {expires: 7});
この記述の意味は簡単に言うと、
「$(this).attr(“href”)をcookieに7日間保存する」
になります。
では”contents”は何かといいますと、保存したcookieを呼び出すための、クッキー名になります。

17-25行目:cookieの設定

[sourcecode language=’javascript’]
var CookieName = $.cookie(“contents”);
if (CookieName != null) {
$(Tabs).removeClass(TabActive);
$(“a[href=”+CookieName+”]”).addClass(TabActive);
$(CookieName).fadeIn(300);
} else {
$(“#tab li a:first”).addClass(TabActive);
$(“div:first” , TabContents).fadeIn(300);
}
[/sourcecode]
var CookieName = $.cookie(“contents”);
変数CookieNameにクッキー名を代入しています。
このクッキー名にはクリックイベントで取得したid名が保存されています。

if (CookieName != null) {
次にif文で、クッキー名がnullでない場合の処理を指定します。
「!=」はイコールでない場合を表します。

$(“a[href=”+CookieName+”]”).addClass(TabActive);
これは取得したクッキー名と同じ文字列があるaタグのhrefに変数TabActiveのクラス名を挿入します。
これで、ロールオーバーされた状態になります。

そしてelse文には、cookieが保存されていない状態、つまり初期状態の記述をします。
:firstなので、最初の要素を表示させる設定にしています。

サンプル

今回はcookieが入ってソースが長くなっているが、処理事態はすごく単純だと思います。
サンプルはこちら

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryで作るタブ + cookieでその状態を保存