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

 

Kendo UI开发教程(26): 单页面应用(四) Layout的更多相关文章

  1. Kendo UI开发教程(23): 单页面应用(一)概述

    Kendo单页面应用(Single-Page Application,缩写为SPA)定义了一组类用于简化Web应用(Rich Client)开发,最常见的单页面应用为Gmail应用,使用单页面可以给用 ...

  2. Kendo UI开发教程(24): 单页面应用(二) Router 类

    Route类负责跟踪应用的当前状态和支持在应用的不同状态之间切换.Route通过Url的片段功能(#url)和流量器的浏览历史功能融合在一起.从而可以支持把应用的某个状态作为书签添加到浏览器中.Rou ...

  3. Kendo UI开发教程(25): 单页面应用(三) View

    View为屏幕上某个可视部分,可以处理用户事件. View可以通过HTML创建或是通过script元素.缺省情况下View将其所包含的内容封装在一个Div元素中.Kendo创建View有两种方式: 使 ...

  4. [置顶] Kendo UI开发教程: Kendo UI 示例及总结

    前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...

  5. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

    本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...

  6. Kendo UI开发教程(9): Kendo UI Validator 概述

    Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...

  7. Kendo UI 单页面应用(四) Layout

    Kendo UI 单页面应用(四) Layout Layout 继承自 View,可以用来包含其它的 View 或是 Layout.下面例子使用 Layout 来显示一个 View <div i ...

  8. 关于Kendo UI 开发教程

    Kendo UI 开发教程 jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互 ...

  9. Kendo UI开发教程(27): 移动应用开发简介

    Kendo UI 支持开发Web应用,前面介绍的SPA,也支持开发移动应用,至于使用 HTML5 + JavaScript + CSS开发移动是不是一个好的选择不在本文的讨论之中.Kendo UI M ...

随机推荐

  1. pl/sql 中F8执行单行sql

    pl/sql中设置: tools->preferences->sql window->AutoSelect statement

  2. 【Demo 0025】注册/反注册窗体类RegisterClassEx/UnregisterClass

    所有窗体在创建前都必须注册窗体类,只有注册的窗体类才被系统认知并允许实例化,换句话说通过注册告诉进程窗体管理器此类窗体的属性如: 背景色,窗体上的鼠标样式以及窗体事件处理函数等;  有一些控件类系统自 ...

  3. Java For循环效率试验

    非常奇怪的结果! ..! 测试方法如以下 public class Main { public static void main(String[] args){ long ti = System.cu ...

  4. JS - 按钮倒计时

    效果: html代码: <input type="button" id="btn" value="点击获取效验码" /> js代 ...

  5. Case of the Zeros and Ones

    Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Description Andrew ...

  6. arm:c语言和汇编混合编程

    仅作演示. 1.C和汇编可相互调用,汇编子函数格式参考 汇编:普通的函数调用的汇编代码解析 http://www.cnblogs.com/mylinux/p/4139972.html 本文演示了 : ...

  7. MDCC为移动开发者服务:一看、一聊、一聚

    MDCC为移动开发者服务:一看.一聊.一聚-CSDN.NET     MDCC为移动开发者服务:一看.一聊.一聚    发表于2013-11-05 20:54| 2698次阅读| 来源CSDN| 6 ...

  8. Creating Spatial Indexes(mysql 创建空间索引 The used table type doesn't support SPATIAL indexes)

    For MyISAM tables, MySQL can create spatial indexes using syntax similar to that for creating regula ...

  9. BIRT使用2:安装、一般使用顺序

    上篇博客介绍的关于的birt的一些概念和设计器等知识,这篇博客介绍一下安装和一般使用顺序. 安装:安装分为两种,一种是下载已经安装好birt的eclipseIDE环境,配置环境变量之后即可使用,具体方 ...

  10. JEECG社区 一个微信教育站点案例源代码分享

    微信教育站点案例演示: http://t.cn/RvPgLcb 源代码分享: http://pan.baidu.com/s/1cUImy 截图演示: watermark/2/text/aHR0cDov ...