博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Kendo UI开发教程(26): 单页面应用(四) Layout
阅读量:5300 次
发布时间:2019-06-14

本文共 1087 字,大约阅读时间需要 3 分钟。

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来替换。

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来确认:

 

 

转载于:https://www.cnblogs.com/pangblog/p/3313155.html

你可能感兴趣的文章
css背景样式
查看>>
JavaScript介绍
查看>>
开源网络漏洞扫描软件
查看>>
yum 命令跳过特定(指定)软件包升级方法
查看>>
创新课程管理系统数据库设计心得
查看>>
Hallo wolrd!
查看>>
16下学期进度条2
查看>>
Could not resolve view with name '***' in servlet with name 'dispatcher'
查看>>
Chapter 3 Phenomenon——12
查看>>
C语言中求最大最小值的库函数
查看>>
和小哥哥一起刷洛谷(1)
查看>>
jquery对id中含有特殊字符的转义处理
查看>>
遇麻烦,Win7+Ubuntu12.10+Archlinux12.10 +grub
查看>>
SqlBulkCopy大批量导入数据
查看>>
pandas 修改指定列中所有内容
查看>>
「 Luogu P2285 」打鼹鼠
查看>>
lua语言入门之Sublime Text设置lua的Build System
查看>>
vue.js基础
查看>>
电脑的自带图标的显示
查看>>
[转载] redis 的两种持久化方式及原理
查看>>