JavaScriptでタブ切り替え
Posted on | 2009年 3月 20日 | Permalink
ウェブブラウザなどのアプリケーションにおいて、複数の画面を1つのウィンドウ内で切り替えて使用する方式または、切り替えのためにクリックするグラフィカルユーザインタフェース部分のこと。
ここのところ使ってみたJavaScriptのチップスを一個メモ書きしときます。JavaScriptとCSSを駆使してお知らせとかブログ新着とか複数カテゴリのエリアをタブで切り替えて見せるというUI。こんなやつ。ウェブ上でよく見かけるのですが、自分的にこれまであんまり制作に取り入れてなかったんです。つい最近やったコーディングの案件で、ここはタブ切り替えで…っていう指示があったのでやらざるを得なかったというのが正直なところ。避けては通れないお勉強です。望むところだ。
本当はDreamweaverにSpryといわれるAdobe独自のAjaxなパーツを実装する機能が付いていて、タブ切り替えUIも組め込めちゃうらしいんですが、使ってないもんだからあんまり分からない。ということで、ネット上でなんか探してきて手動でやった方が早いかもと思ったわけであります。探して見るとやっぱりいろいろあるみたいですが、今回参考にしたのはこれ。
うんこれこれ。ドンピシャ。すみませんが今回はソースコードとか詳しい説明は上のサイトにおまかせ。私の今回のお仕事の場合、要素を違うもので代用したり、タブのロールオーバー用のCSSの当て方をちょっぴり工夫する必要がありましたが、意外とすんなり実装完了しました。
選択されていないタブの情報は表示されないようになっているけれど、実際には今見ているページの中にすでにすべて読み込まれているわけですよね。だからページを遷移する煩わしさもなく、カチカチ気持ち良く切り替る。JavaScriptがOFFの場合でもきちんとすべての内容を見ることができます。きちんとユーザビリティに配慮して設計されてていいですねえ。
とまあ、なかなかタブ切り替えも良いモノですね。これからも使っていこう。
関連する（かもしれない）記事
コメント
コメントをする
書いてる人
taca。1978年生まれのB型。ウェブ制作のお仕事をしています。MacユーザーでiPhoneユーザー。写真を撮るのが好き。BBQをこよなく愛しますが、やむを得ない場合はホットプレートでの焼肉でも可。[profile...]
