Catalystでajax (HTML::Prototypeモジュールの使い方)
http://blog.mizzy.org/articles/2005/09/10/htmlPrototype
OpenLaszlo
http://www.openlaszlo.org/
Flexのように、Flash コンテンツを生成することで知られていた OpenLaszlo ですが、なんと最近のリリースでは、DHTML(Ajax)版も吐き出せるらしい。
Flash版のデモ
DHTML(Ajax)版のデモ
ほとんど見分けがつかない……凄すぎ。
via http://ajaxian.com/archives/laszlo-demonstrates-ajax-runtime
壁紙によさそうな? Prototype の Cheat Sheet
http://www.snook.ca/archives/000531.php
via http://ajaxian.com/archives/jonathan-snooks-prototype-cheat-sheets
Yahoo! UI Librady の訳 まとめ
http://d.hatena.ne.jp/hiboma/20060215/1139978720
先日 [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 |
prototype.js の開発者向けメモ
http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html