こんばんわ。to-Rの西畑です。
3回目は今まで解説したCSSの操作とクリックの制御の応用として実践的なUIを作ってみたいと思います。
まずはサンプルをご覧ください。
タブパネルのUIになります。
最近はYahoo!やLivedoorなどの大手ポータルサイトでも採用され、すっかり一般的なUIになっています。
クリックしたらCSSを変更を利用すれば、タブパネルを簡単に作成することが可能です。
まずはHTMLの解説。
タブ部分はclass=”tab”をつけたリスト、パネル部分はclass=”panel”をつけたリストで記述しています。
li要素にはそれぞれtab_a～tab_bというclass名を、初期選択状態にしておきたいものにselectedというclass名を付けます。
<ul class="tab"> <li class="tab_a selected">トピックス</li> <li class="tab_b">経済</li> <li class="tab_c">エンタメ</li> <li class="tab_d">スポーツ</li> <li class="tab_e">その他</li> </ul> <ul class="panel"> <li class="tab_a selected"> トピックのニュース<br /> トピックのニュース<br /> トピックのニュース<br /> トピックのニュース<br /> トピックのニュース<br /> </li> <li class="tab_b"> 経済のニュース<br /> 経済のニュース<br /> 経済のニュース<br /> 経済のニュース<br /> 経済のニュース<br /> </li> <li class="tab_c"> エンタメのニュース<br /> エンタメのニュース<br /> エンタメのニュース<br /> エンタメのニュース<br /> エンタメのニュース<br /> </li> <li class="tab_d"> スポーツのニュース<br /> スポーツのニュース<br /> スポーツのニュース<br /> スポーツのニュース<br /> スポーツのニュース<br /> </li> <li class="tab_e"> その他のニュース<br /> その他のニュース<br /> その他のニュース<br /> その他のニュース<br /> その他のニュース<br /> </li> </ul> |
CSS部分は難しいかもしれませんが、サンプルを開いた際に表示されるCSSを設定します。
*{ margin:0; padding:0; list-style-type:none; } #container{ margin:10px auto; width:500px; } .tab li{ float:left; padding:4px 10px; cursor:pointer; background:#DDDDDD; border:1px solid #999999; margin-right:1px; position:relative; top:1px; } .tab li.selected{ border-bottom:1px solid #EEEEEE; background:#EEEEEE; } .panel li{ display:none; clear:both; background:#EEEEEE; border:1px solid #999999; padding:10px; } .panel li.selected{ display:block; } |
jQuery部分の解説です。
$(function(){ }); |
まずはお約束の$(function(){ });を記述し、その中にjQueryを書いていきます。
まずはtab_aをクリックした際の動作について考えてみます。
現在選択されているタブのCSSを打ち消す為、CSSでselectedクラスのスタイルを打ち消すように上書きをします。
この処理はtab_a以外のtabがクリックされた際も行わなくてはいけないので、clickイベントはすべてのタブ(“.tab li”)に付けておきます。
$(".tab li").click(function(){ $(".tab li").css("border","1px solid #999999"); $(".tab li").css("background","#DDDDDD"); $(".panel li").css("display","none"); }) |
tab_aのタブに選択状態のCSSを適応させ、パネル部分を表示するようにします。
$(".tab li.tab_a").click(function(){ $(".tab li.tab_a").css("border-bottom","1px solid #EEEEEE"); $(".tab li.tab_a").css("background","#EEEEEE"); $(".panel li.tab_a").css("display","block"); }); |
これでtab_aがクリックされた際のクリックイベントは終了です。
次にｂ～aのタブまで同様の処理を行えばタブパネルの完成です。
よく利用するCSS
JavaScriptなどでUI設計を行う際によく利用するCSSとしてdisplayプロパティがあります。
display:blockとnoneを切り変えダイナミックな動きをサイトに与えます。
また、cursor:pointer;などもよく利用します。
ただの要素にクリックイベントを付ける為、マウスーオーバーしても変化がありません。
そこでマウスを乗せた際にポインタを変える事により、クリックできることをユーザーに伝える為です。
他のライブラリでタブパネルを利用する場合
【Adobe Spry TIPS 】タブパネル
今回、とても興味深く読んでおります。いつもお世話になっております。
これからは、なんでもjqueryにしてみたいと思うようになり、
このスクリプトがおもしろいと思って、リファレンスを読みながらいじっていますが、１０分で壁にぶちあたりました。
http://www.xn--gmqw9tw0b263au6jpzg.com/index.php で使っているメニューを書いてみようと思って、これが参考になると思い、click したら表示されるのではなく、hovor で表示されるようにしようと思いました。
しかし、単純にclick を hover にしても表示されません。 私には、表示されないのはおかしい！と思えてしまいます。
cssをいじってみてもうまくいかないのですが、どのように解釈したらいいのでしょうか？
簡単でかまいませんので教えていただけるとありがたいです。