下準備
１ mootools -http://mootools.net/ （英語）にアクセス（左）※２００８年８月２２日現在、バージョンは1.2になっており、下記のような手順を踏んでもうまく行かない可能性があります。
２ まず、デモページに目を通して、どんな事が出来るのかを把握しましょう。
３ ページ上部の「download」から、ダウンロードページへ（中）
４ mootoolsを使って実装したい機能に合わせて（これはサンプルページに記載）、ページの左側のチェックボックスをチェックし、圧縮タイプを選択したら、最後にページの一番下の「DOWNLOAD」をクリックすると、Javascriptのダウンロードが始まります。（右）※2008年3月時点で、フルサイズのmootols.jsは、64KB近くあります。使わない機能は削ってしまいましょう。
５ ダウンロードしたmootoolsのファイルを、HTML上に読み込みます。
<script type="text/javascript" src="mootools.js"></script>
６ 上記のmootoolsとは別に、それぞれの機能を動作させる為のJavascriptも併せてどこかに（HTML内or他のjsファイルに）記述する必要があります。これは機能毎に異なりますので、導入したい機能のサンプルページを確認しましょう。ツールチップの場合は、以下のようなスクリプトが必要なようです（ソース）。今回は、以下のスクリプトをmoo-tooltip.jsという外部ファイルを作ってその中に格納しました。
window.addEvent('domready', function(){
/* Tips 1 */
var Tips1 = new Tips($$('.Tips1'));
/* Tips 2 */
var Tips2 = new Tips($$('.Tips2'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});
/* Tips 3 */
var Tips3 = new Tips($$('.Tips3'), {
showDelay: 400,
hideDelay: 400,
fixed: true
});
/* Tips 4 */
var Tips4 = new Tips($$('.Tips4'), {
className: 'custom'
});
});
ここで注意。mootools demos - startに記載されていますが、スクリプトの上と下に、赤い部分を入れないとmootoolsは動きません。デモをベースにmootoolsを使う時は、忘れずに入れておきましょう。
７ あとは、「CSSを読み込む」「各機能のデモを見て、必要なコードをHTMLに組み込む」といった手順を踏めば準備完了です。
８ ここでおおまかにまとめ。特に気をつける事を箇条書きにしてみました。
- mootools.jsをダウンロードする際は、使いたい機能がmootoolsの中の「何を」必要としているのかを把握しましょう
- もしどの機能を使うのかが分からない場合は、ダウンロード画面で全てのチェックボックスにチェックを付けて全機能をダウンロードするのがいいかも
- デモをベースにmootoolsを使う時は、window.addEvent('domready', function(){ を忘れずにJavascript内に挿入
- mootoolsの複数の機能を使う場合は、相性の問題もあるので、読み込みの順番に注意
９ このページでは、Slimbox（mootools版Lightbox）とツールチップとスムーススクロールとの機能を組み込んでいます。この場合のJavascriptの読み込みの順番は以下の通り。組み合わせによっては正常に動かない可能性もありますので、JSの読み込みの順番をどうするかは、意識の片隅に入れておきましょう。
<!--Slimbox + Tooltip + SmoothScroll-->
<link href="slimbox/slimbox.css" rel="stylesheet" type="text/css" />
<link href="moo-tooltip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slimbox/slimbox.js"></script>
<script type="text/javascript" src="moo-tooltip.js"></script>
<script type="text/javascript" src="moo-scroll.js"></script>
<script type="text/javascript" src="reflection.js"></script>
使用例
Slimbox（mootools版Lightbox）
※Slimboxのダウンロード
http://www.digitalia.be/software/slimbox
<a href="img2.gif" rel="lightbox" title="テストです。">
<img src="img1.gif" alt="" width="320" height="240" border="0" />
</a>
ツールチップ（mootoolsデモより）も含めたSlimbox
HEAD
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slimbox/slimbox.js"></script>
<script type="text/javascript" src="moo-tooltip.js"></script>
HTML
<a href="img2.gif" rel="lightbox" title="Slimboxのキャプション">
<img src="img1.gif" alt="" width="320" height="240" border="0" title="タイトル::ここにキャプションが入ります。" class="Tips2" />
</a>
Slimboxでイメージギャラリーを作る
<div id="imgs" class="Tips2" title="Help::イメージをクリック後、カーソルを【拡大されたイメージ】に移動。すると【前の番号】と【次の番号】の画像へのリンクが出現します。">
<p><a href="number/1.gif" rel="lightbox[number]"><img src="number/s_1.gif" width="160" height="120" border="0" /></a><a rel="lightbox[number]" href="number/2.gif"><img src="number/s_2.gif" width="160" height="120" border="0" /></a><a rel="lightbox[number]" href="number/3.gif"><img src="number/s_3.gif" width="160" height="120" border="0" /></a><br />
<a rel="lightbox[number]" href="number/4.gif"><img src="number/s_4.gif" width="160" height="120" border="0" /></a><a rel="lightbox[number]" href="number/5.gif"><img src="number/s_5.gif" width="160" height="120" border="0" /></a><a rel="lightbox[number]" href="number/6.gif"><img src="number/s_6.gif" width="160" height="120" border="0" /></a></p>
</div>
Reflection.js for mootools（class="reflect"を設定した画像に「映り込み」エフェクトをプラス）
※Reflection.js for mootools のダウンロード
http://www.digitalia.be/software/reflectionjs-for-mootools
<img src="img1.gif" alt="" width="320" height="240" border="0" class="reflect" />
テキストにツールチップを実装
１ リンクテキストにツールチップ
Mootools.net
<a href="http://www.mootools.net" class="Tips2" title="Mootools::Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore ">Mootools.net</a> </p>
２ 太くした文字にツールチップ（この文字の上にカーソルを乗せてください）
<strong onclick="return false;" class="Tips2" title="Mootools::Sed （中略） voluptatem">
２ 太くした文字にツールチップ（この文字の上にカーソルを乗せてください）
</strong>
スムーススクロール
ページ最下部の「トップへ戻る」をクリック！
Javascript
window.addEvent('domready', function(){
new SmoothScroll();
});
ページトップのHTML
<a name="top" id="top"></a>
リンクのHTML
<a href="#top">トップへ戻る</a>
All known forms of life are based on the same fundamental biochemical organisation: genetic information encoded in DNA, transcribed into RNA, through the effect of protein- and RNA-enzymes, then translated into proteins by (highly similar) ribosomes, with ATP, NADH and others as energy currencies, etc. Furthermore, the genetic code (the "translation table" according to which DNA information is translated into proteins) is nearly identical for all known lifeforms, from bacteria to humans, with mo evolution and therefore cannot be explained by convergence, tend to be very compelling support for the universal common descent tmon ancestor, these different methods should give wildly different results, thus the phylogenetic tree is strong evidence of common descent. All known forms of life are based on the same fundamental biochemical organisation: genetic information encoded in DNA, transcribed into RNA, through the effect of protein- and RNA-enzymes, then translated into proteins by (highly similar) ribosomes, with ATP, NADH and others as energy currencies, etc. Furthermore, the genetic code (the "translation table" according to which DNA information is translated into proteins) is nearly identical for all known lifeforms, from bacteria to humans, with mo evolution and therefore cannot be explained by convergence, tend to be very compelling support for the universal common descent tmon ancestor, these different methods should give wildly different results, thus the phylogenetic tree is strong evidence of common descent.
All known forms of life are based on the same fundamental biochemical organisation: genetic information encoded in DNA, transcribed into RNA, through the effect of protein- and RNA-enzymes, then translated into proteins by (highly similar) ribosomes, with ATP, NADH and others as energy currencies, etc. Furthermore, the genetic code (the "translation table" according to which DNA information is translated into proteins) is nearly identical for all known lifeforms, from bacteria to humans, with mo evolution and therefore cannot be explained by convergence, tend to be very compelling support for the universal common descent tmon ancestor, these different methods should give wildly different results, thus the phylogenetic tree is strong evidence of common descent.
トップへ戻る
