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的更多相关文章

  1. Kendo UI 单页面应用(三) View

    Kendo UI 单页面应用(三) View view 为屏幕上某个可视部分,可以处理用户事件. View 可以通过 HTML 创建或是通过 script 元素.缺省情况下 View 将其所包含的内容 ...

  2. Kendo UI 单页面应用(二) Router 类

    Kendo UI 单页面应用(二) Router 类 Route 类负责跟踪应用的当前状态和支持在应用的不同状态之间切换.Route 通过 Url 的片段功能(#url)和流量器的浏览历史功能融合在一 ...

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

    Layout继承自View,可以用来包含其它的View或是Layout.下面例子使用Layout来显示一个View 1 <div id="app"></div&g ...

  4. [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)

    有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...

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

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

  6. Kendo UI for jQuery使用教程:使用MVVM初始化(二)

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  7. Kendo UI for jQuery使用教程:使用MVVM初始化(一)

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  8. Kendo UI for jQuery使用教程:初始化jQuery插件

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  9. 数据管理必看!Kendo UI for jQuery过滤器状态保持

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

随机推荐

  1. tyvj1659救援队——最小生成树

    题目:http://www.joyoi.cn/problem/tyvj-1659 想清楚了是非常简单的最小生成树: 1.树中每条边都会被走两边: 2.每个点会走度数遍,起点又多走一遍: 根据以上两条处 ...

  2. poj2279排队——杨氏矩阵与钩子公式(DP爆内存)

    题目:http://poj.org/problem?id=2279 书上的DP做法会爆内存,尝试写了一个,过了样例. 转载: 代码如下: #include<iostream> #inclu ...

  3. 基于zookeeper的MySQL主主负载均衡的简单实现

    1.先上原理图 2.说明 两个mysql采用主主同步的方式进行部署. 在安装mysql的服务器上安装客户端(目前是这么做,以后想在zookeeper扩展集成),客户端实时监控mysql应用的可用性,可 ...

  4. fabric添加多主机ssh互信

    最近折腾fabric,把服务器ssh互信用fabric写了一遍,单向互信,master可以无密码访问client,具体如下: 执行:fab  -f ./copyrsa.py allsshkey 即可, ...

  5. 一 Kubernetes介绍

    Kubenetes是一款由Google开发的开源的容器编排工具,它可以解决以下分布式环境下的问题: 调度 你已经得到了这个很棒的基于容器的应用程序? 太棒了!现在你需要确保它能够运行在它应该运行的地方 ...

  6. 86标准SQL与92标准SQL用法区别

    86标准SQL与92标准SQL用法区别 在开发Oracle 9i时, 数据库还时间了ANSL SQL/92标准的链接语法, 在书中建议在使用Oracle 9i及更高版本时,应该使用SQL/92标准的语 ...

  7. 《Java多线程编程核心技术》读后感(三)

    synchronized同步语句块 用synchronized声明方法在某些情况下是有弊端的,比如A线程调用同步方法执行以一个长时间的任务,那么B线程则必须等待比较较长的时间.在这样的情况下可以使用s ...

  8. 泛型(Generic)

    当集合中存储的对象类型不同时,那么会导致程序在运行的时候的转型异常 import java.util.ArrayList; import java.util.Iterator; public clas ...

  9. 实训随笔2:Git Gui——拯救菜鸟的工具

    熟练使用git进行多人协作开发,是程序猿必备的专业技能之一,可惜我等实在太菜搞不来复杂的命令行. 幸好除了Git Bash还有一个Git gui存在——专门为了拯救我们这些菜鸡程序猿而存在的工具. 下 ...

  10. Unity ShadowMapping

    原理: 场景中一个plane,一个cube,一个light,一个mainCamera 为了在plane上呈现cube的shadow,先在light上放一个lightCamera(位置方向跟light相 ...