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 >< section id = '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 >< section id = '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的更多相关文章
- Kendo UI开发教程(23): 单页面应用(一)概述
Kendo单页面应用(Single-Page Application,缩写为SPA)定义了一组类用于简化Web应用(Rich Client)开发,最常见的单页面应用为Gmail应用,使用单页面可以给用 ...
- Kendo UI开发教程(24): 单页面应用(二) Router 类
Route类负责跟踪应用的当前状态和支持在应用的不同状态之间切换.Route通过Url的片段功能(#url)和流量器的浏览历史功能融合在一起.从而可以支持把应用的某个状态作为书签添加到浏览器中.Rou ...
- Kendo UI开发教程(25): 单页面应用(三) View
View为屏幕上某个可视部分,可以处理用户事件. View可以通过HTML创建或是通过script元素.缺省情况下View将其所包含的内容封装在一个Div元素中.Kendo创建View有两种方式: 使 ...
- [置顶] Kendo UI开发教程: Kendo UI 示例及总结
前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...
- Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
- Kendo UI 单页面应用(四) Layout
Kendo UI 单页面应用(四) Layout Layout 继承自 View,可以用来包含其它的 View 或是 Layout.下面例子使用 Layout 来显示一个 View <div i ...
- 关于Kendo UI 开发教程
Kendo UI 开发教程 jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互 ...
- Kendo UI开发教程(27): 移动应用开发简介
Kendo UI 支持开发Web应用,前面介绍的SPA,也支持开发移动应用,至于使用 HTML5 + JavaScript + CSS开发移动是不是一个好的选择不在本文的讨论之中.Kendo UI M ...
随机推荐
- 2080夹角有多大II
寻人启事:2014级新生看过来! 夹角有多大II Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- Ural 1450 求最长路 SPFA
题意就是求S点到T点的有向无环图中的最长路. 用SPFA可以解决. 一开始一直RE的原因 QAQ 竟然是在开Edge 邻接表的时候开小了 改了一下4Y #include <stdio.h> ...
- 【集训笔记】【大数模板】特殊的数 【Catalan数】【HDOJ1133【HDOJ1134【HDOJ1130
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3324 http://blog.csdn.net/xymscau/artic ...
- javaScript 网页特效 输出语句
大家好,我是小强老师,今天主要讲解 三个最为常用的输出语句. alert() 弹出警示框 window.alert(‘继续学习’); 完整的写法 效果如下: 因为alert 属于window 对象 ...
- Ajax 实现无刷新分页
Ajax 实现无刷新分页
- VC命令行编译参数介绍
CL.exe是控制Microsoft C和C++编译器与链接器的32位工具.编译器产生通用对象文件格式(COFF)对象(.obj)文件.链接器产生可执行文件(.exe)或动态链接库文件(DLL). 注 ...
- POJ 2485:Highways(最小生成树&&prim)
Highways Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 21628 Accepted: 9970 Descrip ...
- block 解析 - 简介
简介 block 类似标准的c函数,除了一些函数体一些可执行的代码,还可以把变量绑定到自动栈或者托管堆上.....和js里的闭包.c# lambda表达式有些类似,实质是一个函数指针.与函数指针的区别 ...
- c++,extern “c”
C++中extern "C"的设立动机是实现C++与C及其它语言的混合编程. C++支持函数重载,而过程式语言C则不支持.函数被C++编译后在符号库中的名字与C语言的不同. 例如, ...
- 浅谈HTML之模仿人人网登陆界面(新手必学)
为方便大家对web相关知识的了解,现谈谈新手如何从HTML css Javascript到以后后台的发展.首先,让大家看看HTML仿人人登陆界面: <!doctype html> < ...