HTML5 の構造とセマンティクス (5): interaction_html5 チュートリアルのスキル

http://www.jb51.net/html_xhtml/20080306/html_xhtml_4688.html
HTML 5はWebアプリケーション1.0とも呼ばれます。この目標を達成するために、Web ページにインタラクティブなエクスペリエンスを提供するいくつかの新しい要素が追加されました。
詳細
データグリッド
メニュー
コマンド
これらの要素は、サーバーから新しいページを読み込むことなく、ユーザーの操作や選択に応じて表示内容を変更できます。
詳細
詳細要素は、デフォルトでは表示されない詳細情報を表します。オプションの凡例要素は、詳細情報の概要を提供できます。
詳細要素の使用法の 1 つは、脚注と文末脚注を提供することです。例えば：
カンムリウミスズメのくちばしは、ザンタスカンムリウミスズメのくちばしよりも約 10% 薄いです

[Sibley, 2000]

Sibley、David Allen、The Sibley Guide to Birds、
(ニューヨーク: Chanticleer Press、2000) p.247

具体的な表示方法は指定しておりません。ブラウザは脚注、文末脚注、ツールヒントから選択できます。

各詳細要素は open 属性を持つことができます。このプロパティが設定されている場合、最初に詳細が表示されます。このプロパティが設定されていない場合、ユーザーが表示を要求するまで非表示になります。どちらの場合も、ユーザーはアイコンまたはその他のコントロールをクリックすることで詳細を表示または非表示にすることができます。
データグリッド
datagrid 要素はグリッド コントロールを提供します。これを使用してツリー、リスト、テーブルを表示でき、ユーザーとスクリプトはこれらのインターフェイス要素を更新できます。対照的に、従来のテーブルは主に静的データを表示するために使用されます。
データグリッドは、そのコンテンツ (テーブル、選択、またはその他の HTML 要素) から初期データを取得します。たとえば、コード 9 のデータグリッドには成績のテーブルが含まれています。この例では、データグリッドのデータはテーブルから取得されます。より単純な 1 次元のデータグリッドでは、選択した要素からデータを取得できます。他の HTML 要素が使用される場合、各子要素はグリッド内の行になります。


ジョーンズ アリソン A- B A
スミス ジョニー A C A

Jones	Allison	A-	B	A
Smith	Johnny	A	C	A
Willis	Sydney	C-	D	F
Wilson	Frank	B-	B	A

ウィリス シドニー C- D td> F ウィルソン フランク B- B A

この要素と通常のテーブルの違いは、ユーザーが行、列、セルを選択したり、行、列、セルを削除したり、その他の操作を実行したりできることです。クライアントブラウザで直接データ操作を行うことができます。更新は JavaScript コードを使用して監視できます。この要素をサポートするために、HTMLDataGridElement インターフェイスがドキュメント オブジェクト モデル (DOM) に追加されました (コード 10 HTMLDataGridElement)。
インターフェイス HTMLDataGridElement : HTMLElement {
属性 DataGridDataProvider データ;
読み取り専用属性 DataGridSelection 選択;
属性 boolean multiple;
属性 boolean 無効;
void updateEverything();
void updateRowsChanged (RowSpec 行内、unsigned Long カウント内);
void updateRowsInserted(RowSpec 行内、unsigned Long カウント内);
void updateRowsRemoved(RowSpec 行内、unsigned Long カウント内);
void updateRowChanged(in RowSpec 行);
void updateColumnChanged(符号なしの長い列内);
void updateCellChanged(RowSpec 行、符号なしの長い列内);
};
DOM を使用して、グリッドにデータを動的にロードすることもできます。つまり、データグリッドには、初期データを提供する子要素が含まれていない可能性があります。 DataGridDataProvider オブジェクトを使用して設定できます (リスト 11 | DataGridDataProvider)。これにより、データベース、XmlHttpRequest、または JavaScript コードがアクセスできる任意のリソースからデータを読み込むことができます。
interface DataGridDataProvider {
voidInitialize(in HTMLDataGridElement datagrid);
unsigned long getRowCount(in RowSpec 行);
unsigned long getChildAtPosition(in RowSpecparentRow,
in unsigned long 位置);
unsigned long getColumnCount();
DOMString getCaptionText(unsigned long 列内);
void getCaptionClasses(unsigned long 列内、DOMTokenList クラス内);
DOMString getRowImage(RowSpecific 行内);
HTMLMenuElement getRowMenu(RowSpec 行内);
void getRowClasses(RowSpec 行内、DOMTokenList クラス内);
DOMString getCellData(RowSpec 行内、unsigned Long 列内);
void getCellClasses(RowSpec 行内、DOMTokenList クラス内) unsigned long 列、DOMTokenList クラスの
);
void toggleColumnSortState(unsigned long 列内);
void setCellCheckedState(RowSpecific 行、unsigned long 列内、long 状態の
);
voidcycleCell(RowSpec 行、符号なしの Long 列内);
void editCell(RowSpec 行内、符号なし Long 列内、DOMString データ内);
};
メニューとコマンド
このメニュー要素は実際には HTML 2 で登場しました。これは HTML 4 で非推奨になりましたが、HTML 5 で復活し、新しい意味が割り当てられました。 HTML 5 では、メニューにコマンド要素が含まれており、各コマンド要素がアクションをトリガーします。たとえば、コード 12 HTML 5 メニューは、アラート ボックスをポップアップするメニューです。





Checked="checked" 属性を使用してコマンドをチェックボックスに変換することもできます。チェックボックスは、radiogroup 属性を指定することでラジオ ボタンに変換できます。この属性の値は、相互に排他的なボタンのグループ名です。
単純なコマンド リストに加えて、menu 要素を使用してツールバーまたはポップアップ コンテキスト メニューを作成することもできます。これには、type 属性をツールバーまたはポップアップに設定する必要があります。たとえば、コード 13. HTML 5 ツールバーには、WordPress などのブログ エディターのツールバーと同様のツールバーが表示されます。 icon 属性を使用してボタンの画像にリンクします。
















label 属性はメニューのタイトルを提供します。たとえば、コード 14 です。HTML 5 編集メニューでは、編集メニューが表示されます。








メニューを他のメニューにネストして、階層的なメニュー構造を形成できます。