CPoll.jsから始まる =================================================================== (1) CPoll.fixSize(); CRefCnt.init(); (2) CCMS.trigger("page-setup"); CRefCnt.setup(this,function(){ (3) CTop.cover(true); (4) CPoll.releaseSize(); CRefCnt.init(); (5) CCMS.trigger("page-ready"); CRefCnt.setup(this,function(){ CRefCnt.init(); (6) CCMS.trigger("page-display"); CRefCnt.setup(this,function(){ (7) CCMS.trigger("page-start"); }); }); }); ------------------------------------------------------------------- (1) Pollのサイズを固定します。 この時点では、Pollのサイズは前ページと同じです。 (2) "page-setup"で次のページのHTMLを読み込み 各HTMLのElementをレイアウトします。 この時点では、「スクロールバー出現によるページ幅の縮小」は考慮されていません。 (3) topカバーをopaqueにして、前ページ、次ページの両方とも見えなくします。 (4) Pollのサイズ固定を外します。これでPollは次ページのサイズと同じになります。 (5) "page-ready"で再レイアウトします。これで「スクロールバー出現によるページ幅の縮小」 が考慮されたレイアウトになります。 (6) "page-display"でレイアウトが完了していないとできない表示作業をおこないます。 [例] 背景をパンするテンプレート (7) オープニング・アニメーションを開始します。 =================================================================== =================================================================== CCMS.trigger("page-setup"); ------------------------------------------------------------------- このEventでは、pageのHTMLを完成します。 大概、このステージで画像などのリソースも読み込んでしまいますが、 HTMLが完成していないとリソースが読めない場合は、 次の"page-ready"で読み込みを行います。 (1) まず前のpageのwidthとheightを固定して、新しいページを 挿入しても、サイズに変化がないようにします。 (2) CPageが、テンプレートのHTMLを、opacity=0のdivに挿入します。 (2) 外部の各"page-setup"を実行します。 実行順序は、 1. テンプレートの"apsxy-tplcode" 2. ホストページの"psxy_onpcode_" (3) 内部の各"page-setup"を実行します。 =================================================================== CCMS.trigger("page-ready"); ------------------------------------------------------------------- pageのHTML後、"page-ready"のEventが発生します。 pageのHTMLが完成していないとできない作業を行います。 (1) リサイズを行い、htmlの寸法を計算します。 =================================================================== CCMS.trigger("page-display"); ------------------------------------------------------------------- 背景などの基本要素の表示を行います。 ※ 画像を読み込むのに、"page-ready"、または"page-display"のどちらを使用するか ですが、"page-ready"後でも、投票項目(popt)はresizeすることがありますので、 投票項目(popt)のサイズが必要なものは、"page-display"で、それ以外は "page-ready"で読み込んでください。 =================================================================== CCMS.trigger("page-start"); ------------------------------------------------------------------- (1) HTMLのopacityを1にして表示します。 (2) pageのwidth&heightをautoにします。 (3) 投票所トップにスクロールします。 (4) アニメーションを開始します。 (5) windowsのEvent(scroll,resize,visibility)をbindします。 ===================================================================