2009年12月10日
jQueryで作るタブパネル
前回製作したアコーディオンパネルと同様に、限られたスペースを有効に使えるタブパネルを作りました。
難しかった場所はスクリプトに出てくる、
li:not("+$("ul.tab li a.selected").attr("href")+")
という部分でした。訳すと「クラス"tab"を持つul要素以下のli要素以下のクラス"selected"を持つa要素の属性値と一致しないli要素」になります。
これでまずselectedが設定されているa要素意外に対応するpanelを指定したことになり、それをhide()で隠しています。
あと今回は、メニューリストの部分にCSS3を使ってグラデーションをかけてみました。
safariやgoogle chromeで見ると綺麗なグラデーションがかかっています。
難しかった場所はスクリプトに出てくる、
li:not("+$("ul.tab li a.selected").attr("href")+")
という部分でした。訳すと「クラス"tab"を持つul要素以下のli要素以下のクラス"selected"を持つa要素の属性値と一致しないli要素」になります。
これでまずselectedが設定されているa要素意外に対応するpanelを指定したことになり、それをhide()で隠しています。
あと今回は、メニューリストの部分にCSS3を使ってグラデーションをかけてみました。
safariやgoogle chromeで見ると綺麗なグラデーションがかかっています。
ASCII.jp：jQueryでタブパネルを作るチュートリアル｜Web制作の現場で使えるjQuery UIデザイン入門を参考にタブパネルを作りました。
各市町村の名前をクリックすると、その説明が下に表示されます。現在クリックしていない市町村の説明は隠れるようになっています。
コードは以下の通り。
各市町村の名前をクリックすると、その説明が下に表示されます。現在クリックしていない市町村の説明は隠れるようになっています。
伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について
伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について
駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について
駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について
南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について
南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について
宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について
宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について
箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について
箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について
コードは以下の通り。
<style type="text/css">
#tabpanel {
width:450px;
height:300px;
background-color:#eeeeee;
background-image: -moz-linear-gradient(top, bottom,
from(rgba(255, 255, 255, .2)),
color-stop(10%, rgba(255, 255, 255, .3)),
to(rgba(255, 255, 255, .4))
);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, rgba(255, 255, 255, .2)),
color-stop(50%, rgba(255, 255, 255, .3)),
color-stop(90%, rgba(255, 255, 255, .4))
);
}
#tabpanel ul {
margin:0px;
padding:0px;
}
#tabpanel ul.tab li {
text-align:center;
width:90px;
height:45px;
line-height:45px;
float:left;
background-color:#000;
background-image: -moz-linear-gradient(top, bottom,
from(rgba(255, 255, 255, .2)),
color-stop(10%, rgba(255, 255, 255, .3)),
to(rgba(255, 255, 255, .4))
);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, rgba(255, 255, 255, .2)),
color-stop(50%, rgba(255, 255, 255, .3)),
color-stop(90%, rgba(255, 255, 255, .4))
);
}
#tabpanel ul.tab li:hover {
background-image: -moz-linear-gradient(top, bottom,
from(rgba(255, 255, 255, .1)),
color-stop(10%, rgba(255, 255, 255, .2)),
to(rgba(255, 255, 255, .3))
);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, rgba(255, 255, 255, .1)),
color-stop(50%, rgba(255, 255, 255, .2)),
color-stop(90%, rgba(255, 255, 255, .3))
);
}
#tabpanel ul.tab li a {
color:#bbbbbb;
font-weight:bold;
}
#tabpanel ul.tab li a.selected {
color:#fff;
}
#tabpanel ul.tab li a:hover {
text-decoration:underline;
}
#tabpanel ul.panel {
clear:left;
}
#tabpanel ul.panel li {
padding:10px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tabpanel ul").css("listStyleType","none");
$("#tabpanel ul.tab li a").css("textDecoration","none");
});
$(function(){
$("#tabpanel ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
$("#tabpanel ul.tab li a").click(function(){
$("#tabpanel ul.tab li a").removeClass("selected");
$(this).addClass("selected");
$("#tabpanel ul.panel li").hide();
$($(this).attr("href")).show();
return false;
});
})
</script>
<div id="tabpanel">
<ul class="tab">
<li><a href="#ina" class="selected">伊那市</a></li>
<li><a href="#komagane">駒ヶ根市</a></li>
<li><a href="#minamiminowa">南箕輪村</a></li>
<li><a href="#miyada">宮田村</a></li>
<li><a href="#minowa">箕輪町</a></li>
</ul>
<ul class="panel">
<li id="ina">
<p>伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について</p>
<p>伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について伊那市について</p>
</li>
<li id="komagane">
<p>駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について</p>
<p>駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について駒ヶ根市について</p>
</li>
<li id="minamiminowa">
<p>南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について</p>
<p>南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について南箕輪村について</p>
</li>
<li id="miyada">
<p>宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について</p>
<p>宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について宮田村について</p>
</li>
<li id="minowa">
<p>箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について</p>
<p>箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について箕輪町について</p>
</li>
</ul>
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryでストライプの装飾 :nth-child()
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryでストライプの装飾 :nth-child()
Posted by ヒダカ at 18:00│Comments(0)
│jQuery
