AJAXでポップアップしてみるサンプル
予め、script.aculo.usからjsファイルをダウンロードしておく。
普通はscriptaculous.jsにリンクするのだが、今回はscriptaculous.jsがインクルードするjsファイルの中でもeffects.jsしか使用しないので、読み込み量をケチるために、effects.jsを単体で読み込む。また、このライブラリはprototype.jsが必要となるので、先にprototype.jsも読み込んでおく。
●マウスオーバーでフェードインバージョン
※ちと急に現れるのでユーザーの心臓には悪げ。
・後から現れる部分
<div id="sample01" style="width:●px;height:●px;background:url(xxx.gif) no-repeat;padding:10px;display:none;">
<p>サンプルでーす</p>
</div>
・通常表示されてる部分
<p><a href="#"><img src="http://redline.hippy.jp/images/061106_03.gif" alt="サンプル" width="108" height="108" onmouseover="new Effect.Appear('sample01')" /></a></p>
●クリックでフェードインバージョン
※今度はポップアップした中身のテキストも背景画像内に入れてみた。でもdivの中に何も入ってないっつーのも嫌なので、上と同様のテキストを入れてtext-indentで追い出した。
<div id="sample02" style="width:●px;height:●px;background:url(xxx.gif) no-repeat;display:none;text-indent:-9999px;">
<p>サンプルでーす</p>
</div>
<p><a href="#"><img src="http://redline.hippy.jp/images/061106_04.gif" alt="サンプル" width="108" height="108" onclick="new Effect.Appear('sample02')" /></a></p>
script.aculo.usには今回使用したフェードイン以外にもさまざまな面白いエフェクトがある。
>>CombinationEffectsDemo
クリックでフェード
クリックで拡大してフェード
スイッチオフ
●クリックでフェード
<p id="test01" style="width:100%;height:30px;background-color:#9c0;" onclick="new Effect.Fade(this)">クリックでフェード</p>
●クリックで拡大してフェード
<p id="test02" style="width:100%;height:30px;background-color:#3cf;" onclick="new Effect.Puff(this)">クリックで拡大してフェード</p>
●スイッチオフ
<p id="test03" style="width:100%;height:30px;background-color:#fc6;" onclick="new Effect.SwitchOff(this)">スイッチオフ</p>
要するに、onclickでもonmouseoverでも何でもいいので、与えられたnew Effect.hoge(対象)の部分を書き換えていろいろと表現を与えているという仕組み。
今回も当然js無効の環境では何も起こらない。ポップアップの中身がすげーー大事な情報の際は使用は控えるべきだと思うが、補助的な目的ならいいかなーとか。先日書いた「cssでポップアップネタ」の方が実用的なかもしれないけど、まぁこれはこれでいつか使ってみたいネタとしてストック。
