タグ: AJAX
「Sigma Grid」-表組みのソートもページネーションもカバーすしてくれるオープンソース (JSON使用)
http://www.sigmawidgets.com/products/sigma_grid2/index.html
Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェア。(データの表示に際してJSONでデータを渡す必要がある。)
参考サイト:http://www.moongift.jp/2008/11/sigma_grid/
まずカラムごとにソートができる。これは小数点や桁数をきちんと解釈した上でソートされる。セル内のデータを編集することはもちろん、ライブでバリデーションも行われる。編集されたカラムは色分けされて表示される。
テーブルについては大きさを変えることができる。さらにカラムの幅を変えることができ、長い文章の場合は「…」で省略してくれる。ページネーションにも対応し、簡易グラフ表示や印刷機能もある。
まだまだある。セルに画像やリンクを付けることができ、それはヘッダにも使える。ヘッダはグルーピングして多段にでき、ヘッダの下にテキストボックスやドロップダウンを配置(一括更新用!)もできる。フィルタリングを使ってテーブルデータを絞り込む機能があり、テキストのみならず数字に対しては以上以下といった条件指定ができる。
まだまだまだある。カラムはドラッグで移動させることができる。スキンに対応し、Vista風や中華風といったテーマが付属している。セル間における計算結果を表示する、イベント処理を感知する、メニューをつける、マウスオーバーでハイライトする、行の追加や削除処理にも対応するなどなど…とにかく多機能すぎて書ききれないほどだ。ああ、そうそう。左側のカラムを固定表示にすることもできるのだった。IDや会社名を固定に、横に長いデータをみる場合に絶賛の機能だ。
オススメ記事:jQueryを使ってAJAX/JavaScript開発を単純化
http://codezine.jp/article/detail/2907
『CodeZine』にて、「サンプルアプリケーションを作成してjQueryの概要を理解しよう」という趣旨の記事を見つけた。
jquairyは、最近WEB開発でリッチなインターフェイスを実装しようとすると、いつも出てくるけど、いざ、これって何よ?ってことになると、?だったりする。
この記事で一通りの知識を身につけておきたいところ。
jQuiryを使うと、
$(“#sampleDiv”).css(“margin-top”, “35px;”);
なんてコードで、CSSをインタラクティブに書き換えたり。
ぜひ、お勉強して、カッチョイイページを作ってチョウダイ。
jQuiryを利用したホバーアニメーション効果色々
http://snook.ca/archives/javascript/jquery-bg-image-animations/
こちらは、デモページ。
http://snook.ca/archives/javascript/jquery-bg-image-animations/
滑らかな動作で面白い効果が色々ある。
ナビゲーションをちょっとデザインしたいときなんかに良いね。
その他のjQuiryとかCSSを使ったアニメーション効果色々。
- Create a Cool Animated Navigation with CSS and jQuery [nettuts.com]
- CSS Sprites2 – It’s JavaScript Time [alistapart.com]
- Animated navigation items using jQuery [tyssendesign.com.au]
- Garage Door Style Menu [css-tricks.com]