SpryDataとは SpryDataとは、Ajaxを行うためのユーティリティーでもありますが、他のライブラリーとは違いHTMLにわずかな修正を加えるだけで、動的にページを表示する機能まで有しています。さらにXMLデータをXPathで指定することで煩わしいDOMプログラムが軽減できるのが大きな魅力です。 詳しくはダウンロードしたzipファイルを解凍して articles/data_set_overview/index.html を読まれるのがよいと思います SpryDataを使う前準備 必要なのは2つのファイルです。もちろんインストールは済ませておく必要があります。 <script type="text/javascript" src="your install path/xpath.js"></script> <script type="text/javascript" src="you

SpryではXMLデータを読み込んでソートして表示することもできます。ソートするにはsort()メソッドを使います。「myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");」として読み込んだXMLデータはmyDatabaseオブジェクトに入っています。このmyDatabaseオブジェクトにsort()メソッドがあります。最初のパラメータにソートしたいデータ名（XMLタグ名または属性名）を指定します。もし、ソートしたい項目が2つある場合には['price','counter']のように配列形式で指定します。以下のサンプルではボタンをクリックすると価格順で昇順でソートします。（サンプルを実行する） 【XMLファイル：fruits.xml】 <?xml version="1.0" encoding="utf-8"?

OrderByColumnデモ tableの列でソートするjavascriptです。 テーブルの列名をクリックして列順にソートするためのJavascriptライブラリの紹介。 MochiKit でも同様のことが出来ますが、他の不要なライブラリも含まれるのが面倒だという方に便利。 prototype.jsさえあれば、その他1つのファイルでシンプルに実装可能です。 更に実装方法も次のように簡単で第一引数にテーブルのidを指定するだけ。 new OrderByColumn("test",["string","number","number"]); これは便利ですね。

Need to sort? SortedTable allows you to make any valid table a sortable one. Tables can be sorted automatically or manually by moving rows. Instructions To start using SortedTable all you need is: have a valid XHTML document, have a valid table* in this document download the following javascripts to a folder on your server: Event.js and SortedTable.js add a class="sorted" to the table include the

Spry framework for Ajax（以下、Spry）は、アドビが提唱しているデザイナー向けの JavaScript ライブ ラリです。無償で配布されているこのライブラリを利用することで、サーバサイドで特別なプログラムを用意したり、ユーザの Web ブラウザへ新たなプラグインをインストールすることなく、今話題の Ajax を利用した動的でリッチなインタフェースやコンテンツを HTML の中に作り出すことができます。 “デザイナー向け”というのが Spry の大きな特長であり、他の Ajax ライブラリと比べてもユニークな点です。Spry そのものは JavaScript ライブラリ群ですが、難解な JavaScript のプログラミング知識はそれほど必要ではありません。HTML コーディングのスキルがあれば、XML からのデータを取得し、加工し、ダイナミックな形で Web ページ

データテーブル XMLデータを読み込んでランキングのデータテーブルを作成してみます。 まず最初に、XMLデータを用意します。 ※サンプルデータは、Vectorサイトのソフトウェアランキングのデータを拝借させていただきました（感謝）。 ソフトウェアのランキングなので親ノードのタグ名は「SOWFTWEAR」とし、その子ノード名を「ROW」としました。 子ノード部分はデータ部分なので繰り返し使います。 区別するためにROW要素に「recordid」というID名を付けます。 ranking.xml <?xml version="1.0" encoding="UTF-8" ?> <SOFTWEAR> <ROW recordid="1"> <PRODUCT>Area61 ビデオダウンローダー 2.4</PRODUCT> <CATEGORY>ダウンロード支援</CATEGORY>

1行間隔で行の背景色を変える widgets プロパティに zebra を指定すると、1行間隔でテーブル行の背景色を入れ替わり表示できます。 jQuery(function($) { $('#r4').tablesorter({ widgets: ['zebra'] }); }); //jQuery tr 要素のクラスに even と odd が交互に付与されるので、スタイルシートを使って even と odd の背景色を指定します。 table.tablesorter tbody tr.odd td { background-color:#F0F0F6; } # 都道府県 フリガナ ふりがな ローマ字

このページはAjaxを勉強してみたい人向けの学習用ページです。サーバーを入れ替えたため一部CGIを使用したものが動作していません。時間のある時に修正します。また、書いてから、かなり時間が経過しているため内容的に古いものもあります。ご了承ください。 Ajaxで利用されるエフェクトに関しては別ページ(Ajax Effect)に移動しました。 Ajax関連書籍に関してはAjax関連書籍一覧ページを用意しました。 Prototype系ライブラリ サンプルプログラム【New !!】のページを用意しましたので、Prototype系のライブラリを利用している方は参考にしてみてください。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 第一章　Ajaxって？ AjaxとRIA AjaxとDHTML AjaxとFlash Ajaxに必要な知識と技術 Aja