きまぐれ事典

ウェブデザイナーがあれこれきまぐれにつづる日々のくらしの百科事典。

JavaScriptでタブ切り替え

Posted on | 2009年 3月 20日 | Permalink

【Tabbed Document Interface(タブ)】
ウェブブラウザなどのアプリケーションにおいて、複数の画面を1つのウィンドウ内で切り替えて使用する方式または、切り替えのためにクリックするグラフィカルユーザインタフェース部分のこと。

ここのところ使ってみたJavaScriptのチップスを一個メモ書きしときます。JavaScriptとCSSを駆使してお知らせとかブログ新着とか複数カテゴリのエリアをタブで切り替えて見せるというUI。こんなやつ。ウェブ上でよく見かけるのですが、自分的にこれまであんまり制作に取り入れてなかったんです。つい最近やったコーディングの案件で、ここはタブ切り替えで…っていう指示があったのでやらざるを得なかったというのが正直なところ。避けては通れないお勉強です。望むところだ。

本当はDreamweaverにSpryといわれるAdobe独自のAjaxなパーツを実装する機能が付いていて、タブ切り替えUIも組め込めちゃうらしいんですが、使ってないもんだからあんまり分からない。ということで、ネット上でなんか探してきて手動でやった方が早いかもと思ったわけであります。探して見るとやっぱりいろいろあるみたいですが、今回参考にしたのはこれ。

JavaScriptでタブ切り替えUIを実装する

うんこれこれ。ドンピシャ。すみませんが今回はソースコードとか詳しい説明は上のサイトにおまかせ。私の今回のお仕事の場合、要素を違うもので代用したり、タブのロールオーバー用のCSSの当て方をちょっぴり工夫する必要がありましたが、意外とすんなり実装完了しました。

選択されていないタブの情報は表示されないようになっているけれど、実際には今見ているページの中にすでにすべて読み込まれているわけですよね。だからページを遷移する煩わしさもなく、カチカチ気持ち良く切り替る。JavaScriptがOFFの場合でもきちんとすべての内容を見ることができます。きちんとユーザビリティに配慮して設計されてていいですねえ。

とまあ、なかなかタブ切り替えも良いモノですね。これからも使っていこう。

関連する(かもしれない)記事


コメント

コメントをする





CAPTCHA


書いてる人

taca

taca。1978年生まれのB型。ウェブ制作のお仕事をしています。MacユーザーでiPhoneユーザー。写真を撮るのが好き。BBQをこよなく愛しますが、やむを得ない場合はホットプレートでの焼肉でも可。[profile...]

Instagram

Tumblr

リンク

MONO

ikususu

この質感は男ならたまらないものがある。

RECOMMEND

4861000084

Design rule index—デザイン、新・100の法則
William Lidwell, Kritina Holden, Jill Butler

フィボナッチの数列、フィッツの法則にオッカムの剃刀、5つの帽子掛けやらグーテンベルク・ダイヤグラムなどなど、デザインにまつわるキーワードがぎっしり詰まった本。必ずしも奇抜なセンスが必要なのではなく、しっかり基礎的ルールに基づけば自然と美しいデザインは生まれるもの。デザインに興味があるならばぜひとも本棚に。うーむ、いい意味で、本棚の肥やしとしてもサイコーの一冊。

410538502X

フル・ムーン
Michael Light

月旅行を体験できる本。人類初の月面着陸に成功したアポロ11号の宇宙飛行士たちが、興奮しながら目にしただろう月面の壮大で茫漠とした風景がそこにあります。記録写真というより、映画のひとコマのように思えるのは、宇宙飛行士たちのドラマを感じられるカットが散りばめられているからかな。月平線(?)から見える地球の出にも感涙。

B0007OC71O

In Between Dreams
Jack Johnson

アコースティックでナチュラルで、何の違和感もなく耳から浸透してくる心地よいメロディ。あまり聴きすぎると仕事が手に着かなくなる可能性があります。

PAGE TOP