Home   Single Page

タブパネルのロードオンデマンド

他の多くのコンポーネント同様、参照可能な(前面に表示されている)ときのみタブパネルのコンテンツを読み込むことができます。最も簡単な方法はfulfill属性を使用して、タブパネルの子コンポーネントの作成を遅らせます。

<tabbox>
    <tabs>    
        <tab label="Preload" selected="true"/>        
        <tab id="tab2" label="OnDemand"/>        
    </tabs>    
    <tabpanels>    
        <tabpanel>        
    This panel is pre-loaded since no fulfill specified    
        </tabpanel>        
        <tabpanel fulfill="tab2.onSelect">        
    This panel is loaded only tab2 receives the onSelect event    
        </tabpanel>        
    </tabpanels>    
</tabbox>

子コンポーネントを手動で作成するか、又はパネルを動的にうまく処理する場合、以下に説明したように、パネルが選択された時にonSelectイベントを監視して、パネルのコンテンツを実行します。

<tabbox id="tabbox" width="400" mold="accordion">
    <tabs>    
        <tab label="Preload"/>        
        <tab label="OnDemand" onSelect="load(self.linkedPanel)"/>        
    </tabs>    
    <tabpanels>    
        <tabpanel>        
    This panel is pre-loaded.    
        </tabpanel>        
        <tabpanel>        
        </tabpanel>        
    </tabpanels>    
    <zscript><![CDATA[    
    void load(Tabpanel panel) {    
        if (panel != null && panel.getChildren().isEmpty())        
            new Label("Second panel is loaded").setParent(panel);            
    }    
    ]]></zscript>    
</tabbox>