このコードは次の通りです(オブジェクトのコードは次ページ)。
<link rel="stylesheet" type="text/css"
href="../yui_2.3.0/build/container/assets/skins/sam/container.css">
<script type="text/javascript"
src="../yui_2.3.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript"
src="../yui_2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="../yui_2.3.0/build/animation/animation-min.js"></script>
<script type="text/javascript"
src="../yui_2.3.0/build/connection/connection-min.js"></script>
<script type="text/javascript"
src="../yui_2.3.0/build/container/container-min.js"></script>
<!--jsgt_LoadingPanel4yuiTest.jsを読み込む-->
<script type = "text/javascript"
src = "./jsgt_loadingpanel4yuitest.js"></script>
<!-- ここへ出力 -->
<div id="20070920A" style="width:200px;padding:8px"> </div>
<script type="text/javascript">
<!--
/**
* パネルや着信で変化させるDIV名やエフェクト色などをセット
*/
var myVars={
//出力先とパネル要素
element : '20070920A', //パネルと出力用IDまたはDom要素(必須)
width : '180px', //パネルの幅(省略時240px)
//インジケータ関係
indiImg : './loading_animation_liferay.gif',//パネル内インジケータ画像(必須)
indiDelay : 2000, //あえてインジケータを見せる場合の遅延ミリ秒(省略時0秒)
//フェイド関係
color1 : '#dddddd', //フェイド後の色1(省略時#ddd)
color2 : '#ffffff', //フェイド後の色2(省略時#fff)
//Ajax通信関係
resDecode : true //レスポンスのURLデコード 注1 (省略時false)
}
//-->
</script>
<form>
<input type="button"
value="動的ロード"
onclick="YAHOO.jsgt.yui.LoadingPanel('GET','./test.txt');">
</form>
まず、YUIの上記jsファイルを読み込んでから、jsgt_loadingpanel4yuitest.jsを読み込み、
変化させるDIV名やインジケータ画像を用意して、その名前やURLなどをオブッジェクト形式で指定します。
この使い方はほぼ前回と同じにしてみました。
{プロパティ名1:値,プロパティ名1:値,...}という形式で書いていきますが、インジケータやレスポンスを出力するための
出力先要素elementとインジケータ画像indiImgは必須です。ここでは、このオブジェクトをmyVarsという名前の変数に入れて用意しています。
少し違うのは、今回はnewキーワードを使っていません。このケースでは、いくつものパネルを使うケースは少ないと思われたので、とりあえず
試しに、前回とは違う形にしてみました。
前回は、newキーワードでYAHOO.jsgt.yui.AjaxIndiFadeコンストラクタを実行し、インスタンスをtest作成したわけですが、今回は、いきなり、
YAHOO.jsgt.yui.LoadingPanel('GET','./test.txt')
という具合に呼び出します。このように、インスタンスを作成せずにアクセスするクラスは、一般的にJavaScriptでも最近は静的クラス(static class)と呼ばれています。
ここでは、ボタンクリックで、実行されます。jsgt_loadingpanel4yuitest.jsのソースは次ページです。