首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Kendo UI开发课程(26): 单页面应用(四) Layout

2013-09-11 
Kendo UI开发教程(26): 单页面应用(四) LayoutLayout继承自View,可以用来包含其它的View或是Layout。下面例

Kendo UI开发教程(26): 单页面应用(四) Layout

Layout继承自View,可以用来包含其它的View或是Layout。
下面例子使用Layout来显示一个View

1<div id="app"></div>2 3<script>4    var view = new kendo.View("<span>Foo</span>");5 6    var layout = new kendo.Layout("<header>Header</header><sectionid='content'></section><footer></footer>");7 8    layout.render($("#app"));9 10    layout.showIn("#content", view);11</script>

这个例子创建一个Layout对象,这个Layout含有一个Header,一个Content和一个footer,其中Content以setion元素定义,作为一个PlaceHolder, 实际应用时可以使用某个View来替换。
Kendo UI开发课程(26): 单页面应用(四) Layout

Layout本身也是一个View,因此在showIn方法中也可以传入一个Layout对象,从而实现Layout的嵌套支持。

Layout定义多个View统一的布局,定义了View的Placeholder,因此在应用中可以实现View的切换。例如:

1<div id="app"></div>2 3<script>4    var foo = new kendo.View("<span>Foo</span>", { hide: function() { console.log("Foo is hidden now"); }});5    var bar = new kendo.View("<span>Bar</span>");6 7    var layout = new kendo.Layout("<header>Header</header><sectionid='content'></section><footer></footer>");8 9    layout.render($("#app"));10 11    layout.showIn("#content", foo);12    layout.showIn("#content", bar);13</script>

这段代码首先显示”foo” ,然后很快切换到显示 “bar”。 这可以通过检查log来确认:

Kendo UI开发课程(26): 单页面应用(四) Layout

 

热点排行