左上のアローをクリックすると、チェックボックスが表示されます。 スクリプトはクッキーにも対応しており、選択した列をクッキーに保存することも可能です。 スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。 オプションでは、テーブルの幅と高さ、列選択の有無、クッキーの有無を設定できます。基本の書式は下記のようになります。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect, cookie) </textarea>
Ultimate guide to table UI patterns 秀逸なテーブルデザインのパターン集をまとめたエントリのご紹介です。 デザインだけでなく、見やすさや分かりやすさという点にも気を配りたいテーブルデザインは比較的難しいものになりますね。 テーブルデザインの例を知っておくことで、難しいテーブルのデザインをする際にも参考に出来そうです。 Apple のデザインっぽいテーブル 複雑なデータをわかりやすくスタイリッシュにまとめたテーブル 画像なども盛り込みつつ見やすいテーブル シンプルに見やすいテーブル JavaScript の入ったものも入ってきますが色々なテーブルを見てストックしておくと後に役立ちそうです。 関連エントリ CSSでデザインしたクールなテーブルのサンプル集 CSSでデザインされたテーブルレスでクールなフォームサンプル
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
更新履歴 2010-06-02 jQuery.exTable.js を Ver 0.1.2 に更新 jQuery 1.3 以上のバージョンで正常動作しない不具合を修正しました。 サンプルを含む zip ファイルでダウンロードできるようにしました。 2010-01-21 jQuery.exTable.js を Ver 0.1.1 に更新 セルの内包要素の膨張、table 要素の margin 設定等によるレイアウト崩れ抑止処理を追加しました ヘッダ・ボディ・フッタ内のテーブル要素を取得するゲッターメソッドを追加しました 記事中のソースを修正しました だいぶ前に書いた「tableのヘッダを固定させる簡易scriptをサクっと作ってみた」というエントリに、「サンプルソースを参考にフッタも固定しようとしたけどうまくいかない」というコメントを先日頂きました。今にして見ると、前回、前々回のエントリで書
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary サイズの取得 煩雑になるので height の記述しかありませんが、width に置き換えれば幅もとれます。 普通のボックス要素 height() メソッドで取得できる値には、padding や border の分の高さを含みません。 CSS の height と同じなので、css('height')メソッドで取得してもよさそうですが、こちらの場合ブラウザの種類や CSS の定義の仕方で取得される値が異なる（クロスブラウザとしての機能が完全でない）ので、純粋に px 単位の高さを取得したい場合は height() メソッドを使用した方が無難です。 スクロールバー付きボックス要素 clientHeight には
前回はサンプルだけ提示したが、今回はそのソースコードを解説する。 念のため、対応ブラウザ このページのサンプルは、下記ブラウザで確認した。 Firefox 2.0.0.10, Firefox 3.0.10 (Windows XP sp3, Mac OS X v10.5.6) IE6, IE7, IE8 (Windows XP sp3) Safari 3.2.1 (Mac OS X v10.5.6) jQueryのバージョンは、1.3.2である。 組み方のポイント 行の表示/非表示をスムーズに見せるには、jQueryの組み方だけでなく、HTML, CSSでもいくつか注意すべきところがある。概要は以下の通り。 [HTML] 各セル内部をdivで囲み、divをスライドさせるようにする。 [CSS] セルのパディング(cellpaddingまたはCSSのpaddingプロパティ)は0pxにする。
Webページに公開されている表形式の資料を利用したいと思って、Excelにコピーしようと思ってもうまくいかない――そういう経験をした人はいないだろうか。公開資料としてExcelファイルそのものがアップロードされていることもあるが、やはりテーブルタグを使って表示されているものも多い。しかし、テーブルタグで表示された表を、そのまま選択してコピーしても、狙い通りの形にならず悩んでしまう。そんなテーブルタグを使って作成された表を、HTMLソースを書き換えることなく、まるでExcelの表のように操作してしまおうというのが、「 TableTools 」というFirefoxアドオンだ。 もちろん、Excelのすべての機能が使えるというわけではないが、任意の列を元にして表全体を昇順・降順でソートしたり、オートフィルタのような絞り込みも可能。また、表の内容をタブ区切りのテキストとしてクリップボードへコピーす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く