highslideの様なscriptをjQueryを使って書いてみた。
Prototype.jsを使ってアコーディオンメニューを作ってみた。
意外に簡単に出来たが例によってCSSやHTMLの構造にかなり依存してしまっている。
実際に使うにはそれなりにカスタマイズが必要になってくる
ソースコードは以下のような感じだ。
またまた"Prototype.js"についてのちょっとしたメモ
下記のような簡単なスクリプトで
document.observe('dom:loaded', function(event) {
var item = new Image();
item.src = 'image.jpg';
$$('body')[0].insert(item);
item.observe('click', function(event) {
alert(event.element().src);
});
});
Prototype.jsを使っていてちょっと悩んだ事があった。
下記のようなごくごく単純なHTMLがあったとして
<body> <img id="item" src="images/image.jpg" /> </body>
サムネイルをクリックしたら拡大画像が表示されるというJavascriptライブラリには有名な所で'Lightbox'や'highslide'がある。
それぞれのサイトではデモも見られるし、ダウンロードして自分で使う事も出来る。
http://highslide.com/
http://www.huddletogether.com/projects/lightbox2/#download
いろんなサイトでも紹介されている。
もっと簡単なのをちょっと自分でも書いてみた。（例によってPrototype.jsを使用）
prototype.jsにはDOMを操作する為のメソッドが多数追加されているが
document.insert(Element);
は簡単なメソッドでこの場合は'document'内に'Element'を追加する。
他にも
写真のある一部分（例えば右下の矩形20px分）をドラッグする事でその写真を拡大したり縮小したりするスクリプト。
何かしらのオブジェクト（例えば写真）を任意の場所に整列させたい時、以下の様なコード（class）で実現出来る。
基準になる座標を一つ決めてそこに整列させている。
javascriptとactionscriptはよく似ている。
なのでどちらかで学んだ事をそのまま一方の言語で活かす事が出来る。
例えばボールの伸縮を表現した以下のようなactionscriptのコードがあったとして
