表を楽しむ
Dave Massy
Microsoft Corporation
July 24, 2001
日本語版最終更新日 2001 年 9 月 25 日
これまで統計データの表をじっと眺めて、その完全な意味を推測しようと懸命に努力したことはありませんか ?
そんな経験があるのはあなただけではありません。
画面に表示される静的な表は、必ずしもすぐに理解できるようにはなっていません。
ただし、標準の HTML の表に適用できる優れた、動的なビヘイビアがいくつかあります。
これらのビヘイビアを使用すると、
ユーザーはデータをさまざまな方法で参照できるようになります。
これらのビヘイビアは、表に対する興味を増すだけでなく、
表のデータを解読、比較するのを大いに役立ちます。
今月は、これらのビヘイビアについて、
そしてこれを使用して表と動的に連携する方法についてお話します。
これらのビヘイビアの詳しく見ていく前に、
ビヘイビアについて、またビヘイビアが DHTML ページにもたらす利点について思い出してみましょう。
ビヘイビアを考えるのに最も良い方法は、ビヘイビアを再利用可能な DHTML コンポーネントとして考える方法です。
ビヘイビアにはアタッチされるビヘイビアと、エレメント ビヘイビアの 2 種類があります。
アタッチされるビヘイビアは Microsoft® Internet Explorer 5.0 で導入されました。
このビヘイビアは、エレメントの機能に追加するために CSS (カスケード スタイル シート) を使用して、
HTML ドキュメント内のすべてのエレメントにアタッチできます。
エレメント ビヘイビアは Internet Explorer 5.5 で導入されました。
このビヘイビアは、HTML ドキュメントに独自のカスタム エレメントを実装する能力をさらに高めます。
詳細については、DHTML Behaviors をご覧ください。
この記事で説明するビヘイビアは、すべてアタッチされるビヘイビアです。
したがって、これらのビヘイビアは Internet Explorer 5.0 以降で機能し、
HTML コンポーネントとして実装されます。
このようなビヘイビアは多くの場合 HTC ファイルとして参照されます。
これらのビヘイビアは HTC ファイルとして実装されるので、
クライアントのコンピュータにファイルをインストールする必要はなく、
これらのビヘイビアを使用する HTML ファイルと共にこれらのビヘイビアをサーバーに配置できます。
この記事では 3 つのビヘイビアについて見ていきます。
マーカー、並べ替え機能、および列のドラッグのビヘイビアです。
これらはすべて HTC (HTML コンポーネント) ファイルとして記述されているので、
特別に何かをインストールする必要はありません。
これらのビヘイビアを HTML ファイルと共にサーバーに配置するだけです。
ここでは、これらのファイルを公開しています。
テキスト エディタを使用して、これらのビヘイビアがどのように機能するかを詳しく見ることができます。
お望みであれば変更や、新しい機能の追加も可能です。
注 これらのビヘイビアは Microsoft Internet Explorer for Windows Version 5.0 以降で機能します。
これらはアタッチされるビヘイビアなので、
ほかのブラウザで表示すると、ユーザー側には元の表が記述どおりに表示され、
追加された動的な機能は表示されません。
マーカー
最初に説明するビヘイビアはマーカーです。
コードの表示
サンプルの表示
まず、qualhl.asp ファイルを実行すると、データの標準的な表が表示されます。
次に、マウスをデータ行の上に移動します。
行が強調表示され、データが 1 行に並んでいるように見えるでしょう。
今度は強調表示された行をクリックします。
クリックした行は別の色で強調表示されたままになります
このビヘイビアを利用するのは簡単です。
以下に HTML ファイルからの関連コードを示します。
<TABLE style="behavior:url(tablehl.htc);"slcolor='#FFFFCC' hlcolor='#BEC5DE' >
table タグは、tablehl.htc ファイルを指すことでビヘイビアをアタッチする style を含んでいます。
この tablehl.htc ファイルは強調表示する機能を追加します。
このビヘイビアには 2 つの属性があります。
hlcolor はマウスが移動されたときの強調表示色を定義します。
slcolor は、マウス クリックで選択された行の色を定義します。
特定の行でマウスがクリックされたときに発生する onrowselect というイベントもあります。
必要に応じて、ページの独自のスクリプトでこのイベントを処理できます。
このビヘイビアが機能する方法を詳しく説明するつもりはありませんが、
テキスト エディタで .htc ファイルを調べてみると、
このビヘイビアが runtimeStyle を使用してテーブル行の背景色を適切に変更し、
ファイルの先頭でプロパティを表示しているのがわかります。
ソーター
ソーター ビヘイビアは、
表の見出しを指定し、その列のコンテンツに基づいてデータを並べ替えることができるので、
マーカーよりもやや興味深いビヘイビアです。
コードの表示
サンプルの表示
qualsort.asp ファイルを実行すると、
表にアタッチされるビヘイビアにより、表の列の見出しをクリックしたときに、
クリックした列のコンテンツがアルファベット順に並べ替えられるのがわかります。
このビヘイビアを表にアタッチすることは、マーカーと同様簡単です。
<TABLE style="behavior:url(sort.htc);" >
ただし、THEAD で列見出しを定義し、
TBODY に表の残りのコンテンツを含めるようにして、
表を適切に形成する必要があります。
このビヘイビア自体が簡単な並べ替えアルゴリズムを規定していますが、
見出しがクリックされると HTML の表のコンテンツを適切な順序に調整するために DHTML オブジェクト モデルを使用しています。
また、並べ替えのキーおよび並べ替えの方向を示すために、一番上の列で小さな画像ファイルを使用しています。
表のデータを並べ替える機能は、複雑な統計資料を理解するのに役立ちます。
ドラッグ
次に説明する表の 3 番目のビヘイビアは、もっと楽しいビヘイビアです。
コードの表示
サンプルの表示
qualdrag.asp ファイルを開くと、ある列見出しを別の列にドラッグして、表を再編成できることがわかるでしょう。
繰り返しになりますが、THEAD と TBODY を使用する標準の表にこのビヘイビアをアタッチすることは簡単です。
<TABLE style="behavior:url(sort.htc);" >
このビヘイビアは、ドラッグ先の色を指定するために dragcolor 属性を公開しています。
HTML は列順ではなく行順にレイアウトされているので、
このビヘイビアで表のコンテンツを操作することは並べ替え機能よりもやや複雑です。
組み合わせて使用する
これらのビヘイビアは独立したコンポーネントとして記述されたので、
次の構文を使用して、これらのビヘイビアを同じ表で組み合わせて使用できます。
<TABLE style="behavior:url(dragdrop.htc) url(tablehl.htc) url(sort.htc);" >
サンプルの表示
この CSS 構文を使用すると、
これらの優れたビヘイビアを異なるエレメントを分離せずに同じタグで使用できるようになります。
さらに、これらのビヘイビアを常に組み合わせて使用する場合は、
これらのビヘイビアの機能を 1 つの .htc ファイルにまとめることができます。
コードの表示
サンプルの表示
Qual.asp ファイルを開くと、
3 つのビヘイビアすべてが表にアタッチされていることがわかります。
独自の変更を加える
IE チームのデモンストレーションから引用したこれらのビヘイビアは、
DHTML とアタッチされるビヘイビアの能力を示しています。
このデモンストレーションは標準的な HTML ページに機能を追加して、
なおかつ以前のバージョンのブラウザでもページを正しく表示できる方法を示している優れた例です。
皆さんのページでこれらのビヘイビアを自由に使用してみてください。
独自に変更を加えてみることもお勧めします。
興味深い変更を発見した場合は、
DHTMLDud@Microsoft.com までご連絡ください。
ただし、すべてのメールに返事を書くことをお約束できないことをあらかじめご了承ください。
DHTML Dude
|
