先日 [2006-02-16-3] とりあえげた Javascript のライブラリ群に、Scriptaculous があります。
Scriptaculous
http://script.aculo.us/
Scriptaculous は、Prototype(Ajax とともに使われたりする Javascript Library の名前です)をベースにしたものですが、この手のライブラリを使ったことがなかったのでちょこっと勉強がてら、使ってみました。
Scriptaculous をダウンロードして解凍すると
- builder.js
- controls.js
- dragdrop.js
- effects.js
- prototype.js
- scriptaculous.js
- slider.js
- unittest.js
のように、機能別にライブラリがわかれています。たとえば、エフェクト、Draag & Dropを使いたければ <head></head> の間に
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
みたいに、指定してやります。全機能使うんだ!ということであれば
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js" type="text/javascript"></script>
だけでよい......はず。
エフェクトとかの利用は、わりと簡単で、エフェクトを掛けたいところのタグに id を
<table id="blind-test">
<tr>
<th>日本語</th><th>英語</th>
</tr>
<tr>
<td>りんご</td><td>Apple</td>
</tr>
</table>
このように talbe タグに直接 id を振ってみたり、<div id="hogehoge"></div> で囲ってやったりします。
<div id="blind-test">
<table>
<tr>
<th>日本語</th><th>英語</th>
</tr>
<tr>
<td>りんご</td><td>Apple</td>
</tr>
</table>
</div>
あとは、掛けたいエフェクトからこの id を呼び出せば OK です。で呼び出し方としては、勝手に実行させる場合には
<script type="text/javascript">new Effect.BlindDown('blind-test')</script>
こんな感じで HTML 内に記述して、実行させます。クリックして実行とかをしたければ
<input type="button" value="消えたり" id="SubmitBtn" onclick="Effect.BlindUp('blind-test');">
<a href="#" onclick="Effect.BlindDown('blind-test');">現れたり</a>
というおなじみの指定でOKです。
で、実際のデモ。クリックするとテーブルがずるずると表示されたり、消えたりします(消えてるのに、また"消えたり"をクリックすると、消えっぱなしになるなぁ......そういうもの?)
日本語 | 英語 |
---|---|
りんご | Apple |
<script type="text/javascript">new Draggable('drag-test')</script>
としてしてやれば移動できるようになります。
で、デモ。下の表は、マウスで、Drag & Drop できます。出来たところで、意味はないですが(^^;
#ドラッグ中は半透明になったりして、芸が細かい......
日本語 | 英語 |
---|---|
りんご | Apple |
流行りの Ajax など実現するために、さまざまなライブラリが提供されていますが、それらをまとめたサイトがありました。
Javascript libraries roundup
http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/
数多すぎ(汗)
やっぱり Prototype 系は堅い? この手のやつは疎いので、Prototype, Mochikit, Scriptaculous あたりは実際に試してみたいなぁ。
ちなみに Scriptaculous はその大きさが問題視されることが多いらしいんだけど、
script.aculo.us のファイルサイズを軽減する
http://d.hatena.ne.jp/secondlife/20060204/1139013893
で紹介されているように
<script src="/js/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
こんな感じで必要なパッケージだけをロードすれば、少なく済ませられるらしい。
http://developer.yahoo.net/yui/
http://labs.cybozu.co.jp/blog/akky/archives/2006/02/yahoo_ui_librar.html
via http://www.pochi.cc/%7Esasaki/chalow/2006-02-14-7.html
Yahoo! が実際に使っている Javascript のライブラリ集。
しかも BSDライセンス。
FireBug - Firefox Extension
使い方がよくわからん(´・ω・`)
via http://d.hatena.ne.jp/send/20060120/p2
複雑で重くなった JavaScript を高速化する方法
http://cl.pocari.org/2006-01-15-2.html
"." による参照回数を減らすと、それだけ速くなるらしい。