Kendo UI 單頁面應用(四) Layout
阿新 • • 發佈:2019-02-13
log 分享圖片 ole header nts cti ria image evel
Kendo UI 單頁面應用(四) Layout
Layout 繼承自 View,可以用來包含其它的 View 或是 Layout。下面例子使用 Layout 來顯示一個 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>
這個例子創建一個 Layout 對象,這個 Layout 含有一個 Header,一個 Content 和一個 footer ,其中 Content以setion 元素定義,作為一個 PlaceHolder, 實際應用時可以使用某個 View 來替換。
Layout 本身也是一個 View,因此在 showIn 方法中也可以傳入一個 Layout 對象,從而實現 Layout 的嵌套支持。
Layout 定義多個 View 統一的布局,定義了 View 的 Placeholder,因此在應用中可以實現 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”。 這可以通過檢查 log 來確認:
Kendo UI 單頁面應用(四) Layout