気ままに綴る独学メモ帳
prototype.js、jquery 、mootools、YUI 、DojoAdobeSpry、Dojo、
MicrosoftAjax、YUI、Rico、MochiKit、Ext、Alfax、script.aclo.us…
実際使ってるのから名前は聞いたことある程度のものまで、色々と出てきて便利なのはいいんだけど、
正直どれ使えばいいのか分からない…(´д｀)という時もある。自分は大抵mootoolsだけどｗ
選ぶ時の参考になるかもしれないAjaxフレームワークのベンチマーク記事の紹介。
まずPeter Velichkov’s Blogの
MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revisedでは
タイトルに挙げたprototype.js、jquery、mootools、YUI、Dojoのベンチマークをグラフにして比較しています。
単純に速度だけの計測なので、サクサク感で選びたいときの参考になる。
jQuery練習ついでにプラグイン作って便乗。元ネタはCSS Happy Lifeさん。
最近テレビの画面左端にアナログと出るようになってますが、
あのウザい表示をIE6使ってるときにやろうじゃないか、というものです。
このプラグインはスクロールしても追いかけて常に画面左端に表示し、
さらにアイコンへマウスオーバーするとメッセージを入れ替えて
ユーザーにしつこくバージョンアップを促しますｗｗｗ
以下デモはＩＥ以外だと何も表示されません。
View Demo »
jQuery ver 1.2.6以上用プラグインです
jQuery.browserのサポートの関係で1.3以上が必要でした。
殴り書きは続く…AutoExternalLinkのjQuery版。mootools版の同タイトル記事とほぼ同じです。
jQueryは馴染みが浅いのでもっさり感漂う残念なソースになってます。
自分がサイト組む時は外部リンクに大抵relかclass属性を付与するんで、relかclass持ちにだけ追加するライト版も書いてみた。
ダウンロードはスクリプトファイル２種と、jQuery版に修正したAutoExternalLinkプラグインファイルのセット。
元ソースからの入れ替えとかは自己責任でお願いします。
wordpressプラグイン本体の改造はこちらの記事で解説していますが、
zipに修正済みのプラグインファイルも突っ込んどいたので上書きでおｋ。動作デモはこのブログそのものです。
jQueryプラグインなので普通のサイトでも使えると思います。
varは1.2.6以上対応です多分。（1.2.6と1.3.2でしか確認してない）
Header
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jExternalLink.plugin.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#main").jExternalLink();
});
//]]>
</script>
上記指定で#main以下にあるaタグを全てチェックします。
Ajaxフレームワークのプラグインの仕様比較と作成方法について。
個人的によく使うprototype、jQuery、mootoolsのプラグインテンプレートとサンプルソースをそれぞれ載せてます。
短いソースならベタ書きでも悪くはないけど、使いまわしが効いたり、衝突が起きなかったりと
大掛かりなものになればなるほどメリットはあるので、よく使うなら覚えておいて損はないと思う。
でもプラグインを作ること自体はそう難しくなくても、理解するのが大変なんだよな。
どれか１つ把握してたら応用で他のも作れるようになるはず。ソースは私。
なお、適当に書いたサンプルソースは全て
「IDで指定した要素の文字色をオプションで指定した色に変える」という内容です。
また、あえてメソッドを動作させるようにしています。
ソースの説明書き加えた
まず個人的に一番気に入ってるmootoolsから。
mootoolsのプラグインは特に決まった書式などは無く、Classで作成されているものが多いです。
Classという名前の通りPHPやJAVA等のクラスとほぼ同じ仕様なのでとっつきやすいと思われる。
Fx.Morphで弾幕作れないか試してみるテスツ。で 花火っぽく30個ほど並べてみた。 連打しすぎるとブラウザ落ちる可能性があります 直接見る » 直接見る » これはこれで面白いんだがもっさり感 … 続きを読む
スクロールした時勝手に追随して動く要素を作成するクラス。mootools ver1.2以上用。
どう見てもwrapScrollです本当に（ｒｙ）っていうツッコミは置いといて、
スクロールした時とし終わった時のイベントとか、
トランジションや遅延の指定とかがしやすい。と思う。
新規でXHTMLのページ作る時に使うタグをバラした。
Dreamweaverなら各ブロックのソースをスニペットにして保存すると便利です。
Usage
あとは適当にBodyタグの中を編集すればページが完成。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Page Title</title> </head> <body> <p>Sample Page</p> </body> </html>
前エントリーのカウントダウンタイマークラスにカウントアップとか追加してキッチンタイマーっぽい代物に。
Javascriptなのでページ内埋め込みが出来るんだけどmootoolsが必要っていう。
使い方は続きに。
mootoolsのClassでカウントダウンタイマー作ってみた。一時停止、リセット、再生、自動再生が出来る
カラフルにしようとすると結構面倒なボタンタグのCSSを作成するジェネレーター。思い立って殴り書きしたのが割と見れる状態になったので公開。
Flashを背景にしてるっぽく見せる手法についてのメモ。
Flashサイトにはしたくないけど背景をガシガシ動かしたい、みたいな時（無さそうだけど）に使えるんじゃないかなー。
まず普通に背景にしたいFlashと内容を追加する。flashのソースについては「ValidなFlash表示ソース」参照。
<div id="content"> <object type="application/x-shockwave-flash" width="500" height="300" title="title" data="index.swf"> <param name="movie" value="index.swf" /> <param name="quality" value="high" /> </object> <div class="section"> <h2>Flash Background sample</h2> <p>背景をガンガン動かしたいならこんな手法もあるよっていう。</p> </div> </div>
今更感漂うけど続くよー
mootools1.2ではEventメソッドのプロパティkeyとcodeで押されたキーのキーコードとキーの名前（小文字）を取得出来ますが、ちょっとクセがある。
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
$("text").addEvent('keydown',function(event){
var p = new Element("p");
p.set("text","Code:["+event.code+"] Key:["+event.key+"]");
$("test").adopt(p);
});
});
//]]>
</script>
Firebug使ってるならconsole.log()でもいい
<input type="text" id="text" size="40" /> <div id="test"></div>