--
--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
02
2008

prototype.jsでリスト開閉

なんだか結構暇だったので(…)ちょっとこんなものを作ったりしてました。

ajax_test001.png

リスト開閉サンプルページはこちら

かなりざっくりとしたサンプルです 誰のためと言うより、自分の備忘録みたいな感じなので、コレくらいでいいかなぁ…と。
一応コンセプトは次のような感じ。

初期値ではリスト1のみOPEN。リスト2・3は閉じている。
リスト1~3のリンクをクリックすると、それに応じて開閉する。


初期状態のOPEN/CLOSE設定も、prototype.jsを使ってJavaScriptで制御しています。(CSSでdisplay: noneにしたりはしていない)
もっとスマートなやり方は多々あると思うんですが、まぁ…これが私の限度ってことで。

まずはprototype.jsでオーソドックスなサンプルをいくつか作ったら、今度は同じ所作をするものをjQueryで作ってみようと思っています。

前にprototype.jsとjQueryとどっちを使ったらいいかわかんない…的記事を書いたと思いますが、判らないなら両方使って比較すればいいんじゃん! みたいなね(笑)。
限りなく力技と言う気もしますが、まぁキニシナイ



2008.07.03修正
同じ動作をするjQuery版ページも作りました。リスト部分のHTMLは全く同じで、JavaScriptの部分だけ変わっています。
こうやって見ると、なんだかjQuery版の方がスッキリって感じが個人的にはするなぁ…。

次はフォームの操作(といっても入力チェックとかではなく、選択した項目によって表示を切り替えるとかそういう程度の)に関してのページをつくろーと思っています。

0 Comments

Leave a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。