W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
Layout 繼承自 View,可以用來(lái)包含其它的 View 或是 Layout。下面例子使用 Layout 來(lái)顯示一個(gè) View
<div id="app"></div>
<script>
var view = new kendo.View("<span>Foo</span>");
var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");
layout.render($("#app"));
layout.showIn("#content", view);
</script>
這個(gè)例子創(chuàng)建一個(gè) Layout 對(duì)象,這個(gè) Layout 含有一個(gè) Header,一個(gè) Content 和一個(gè) footer ,其中 Content以setion 元素定義,作為一個(gè) PlaceHolder, 實(shí)際應(yīng)用時(shí)可以使用某個(gè) View 來(lái)替換。
Layout 本身也是一個(gè) View,因此在 showIn 方法中也可以傳入一個(gè) Layout 對(duì)象,從而實(shí)現(xiàn) Layout 的嵌套支持。
Layout 定義多個(gè) View 統(tǒng)一的布局,定義了 View 的 Placeholder,因此在應(yīng)用中可以實(shí)現(xiàn) View 的切換。例如:
<div id="app"></div>
<script>
var foo = new kendo.View("<span>Foo</span>", { hide: function() { console.log("Foo is hidden now"); }});
var bar = new kendo.View("<span>Bar</span>");
var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");
layout.render($("#app"));
layout.showIn("#content", foo);
layout.showIn("#content", bar);
</script>
這段代碼首先顯示”foo” ,然后很快切換到顯示 “bar”。 這可以通過(guò)檢查 log 來(lái)確認(rèn):
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: