列幅を調整できるテーブルの作成方法を知りたいです。これを行う方法がわかりません。この技の秘伝をご存知でしたら教えてください。
7 に答える
「foobarのhtmlプロパティを使用する」などの簡単な答えはありません。これは、JavaScriptとDOMの操作で行われます。
Prototypeを使用したこの機能の実装を知りたい場合は、TableKitをご覧ください。
私はそこにjQueryの実装があると確信しています...私は私の古き良きプロトタイプが好きです;)
Outlookの効果を探していますか、それともテーブルのサイズを変更するために表示される<->がありますか?
- このために私が行ったことは、幅がわずか数ピクセルのdivまたはセルを作成することです。
- カーソルを矢印<->に変更します。
- そのdivコントロールの使用をクリックすると
- そのdivコントロールを使用するをクリックすると、その場で別の「フローティング」divが作成され、最終的にどこに配置されるかが示されます。
- 動きはJavaScriptのマウス移動イベントに接続されています。
- コントロールを解放したら、新しいコントロールを移動した場所に応じて、テーブルセルの高さまたは幅を再配置します。
jQuery 用のFlexigridは非常に優れているようです。
更新: @Vincent のコメントによると、使用は非常に簡単です...詳細についてはサイトを参照してください。ただし、最も基本的な例については、スクリプトを含めてから、機能をテーブルにフックします。
$('#myTableID').flexigrid();
またはオプション付き:
$('.classOfTables').flexigrid({height:'auto',striped:false});
セルヘッダーの端の領域でマウスクリックイベントをキャプチャし、マウスがドラッグされると列の幅を動的に変更するのと同じくらい簡単だと思います。
Yahoo UI (YUI)データ テーブルウィジェットでは、列のサイズを変更できます。公開されていますが、まだベータ版であり、YUI ライブラリはかなりかさばります。デフォルトの HTML テーブルにはそのような機能がないため、どのような実装も JavaScript/DHTML で行う必要があります。