文档章节

knockout快速创建树形菜单

d
 doliangzhe
发布于 2013/05/11 13:46
字数 214
阅读 93
收藏 0

效果图,图比较简陋:

如何创建

引入knockout

<script type='text/javascript' src='http://www.see-source.com/js/knockout-2.2.0.js'></script>
Html代码

<ul  data-bind='template: { name: "guideTmpl", foreach: menus }'></ul>
Js代码

<!--菜单项模板-->
<script id="guideTmpl" type="text/html">
    <li >
		<span data-bind='text: name, click:$root.openOrClose'></span>
		<ul data-bind='template: { name: "guideTmpl", foreach: children }, visible:opened'></ul>
	</li>
</script>
<script type="text/javascript">
var Menu = function(name, children, opened) {
    this.name = ko.observable(name);
	this.children = ko.observableArray(children || []);	//下级子菜单
	this.opened = ko.observable(opened); //true:展开  false:折叠
};

var PeopleModel = function() {
    this.menus = ko.observableArray([
	    new Menu("Twitter BootStrap", [
		    new Menu("bootstrap介绍"),
			new Menu("响应式设计"),
			new Menu("JavaScript插件")
		]),
		new Menu("Knockout", [
		    new Menu("监控属性(Observables)"),
			new Menu("控制流绑定(Control flow)"),
			new Menu("表单域绑定(Form fields)"),
			new Menu("自定义绑定(Custom)")
		])
	]);
	//展开、折叠操作
	this.openOrClose = function(source){
	   var opened = source.opened();
	   if(opened)
	      source.opened(false);
	   else
	      source.opened(true);
	};
};

ko.applyBindings(new PeopleModel());
</script>
以上代码可直接粘贴运行



来自:http://www.see-source.com/front/front!index


© 著作权归作者所有

d
粉丝 2
博文 14
码字总数 11064
作品 0
海淀
私信 提问
个人整理的Knockout.js文档,有兴趣的朋友可以直接下载!

上周四在看Knockout.js的官方文档,阅读过程中顺便将其整理成了一份完整的文档,如果你此有兴趣,可以从这里下载。 P.S. Knockout.js简介[来自百度百科] Knockout是一个轻量级的UI类库,通过...

长平狐
2012/09/04
327
0
jQuery EasyUI使用教程之使用标记创建树形菜单

jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建。easyui树形菜单也可以定义在“ul”元素中,无序列表的“ul”元素提供一个基础的树(Tree)结构。每一个 “li”元素将产...

Miss_Hello_World
2016/05/31
51
0
knockout不操作dom来实现带管理功能的树形菜单

knockout已经使用一段时间了,但真正感觉到一些东西了,还是从下面这个例子开始的。不需要直接操作dom,有个绑定(当然是双向的)即可,将数据和dom元素联系起来,免去了在定位dom。 一个tree树...

doliangzhe
2013/05/13
483
0
用Word和在线工具快速制作6寸PDF

最近在看Play2和Knockout的在线文档,时间实在不够用,便打算做成6寸的PDF放到电子书里在地铁上看。懒得装什么PDF处理的软件,便想试着用现有的软件和一些在线的工具来做。其实非常的简单: ...

yanhua365
2012/11/14
185
0
基于adminlte的后台管理系统开发

前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立,让我们这些后端开发人员瑟瑟发抖。为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没有那...

gongxufan
2018/06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IT兄弟连 HTML5教程 HTML5表单 小结及习题

小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据。HTML表单一直都是Web的核心技术之一,有了它我们才能...

老码农的一亩三分地
15分钟前
7
0
向maven工程中导入自己封装好的jar包方法

1.打开cmd窗口 输入并执行:mvn install:install-file -DgroupId=com.test   -DartifactId=ptest -Dversion=0.1  -Dfile=E:\test\test-0.1.0.jar    -Dpackaging=jar注:Dgr......

gantaos
17分钟前
3
0
【jQuery基础学习】09 jQuery与前端(这章很水)

本文转载于:专业的前端网站➨【jQuery基础学习】09 jQuery与前端(这章很水) 这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的...

前端老手
28分钟前
8
0
深度科技与金山云完成兼容互认证 共同促进我国软件生态发展

近日,深度科技与金山云完成兼容互认证工作,经双方共同严格测试,深度操作系统ARM服务器版软件V15与金山云分布式数据库软件DragonBase V1.0相互兼容、稳定运行,可以为企业级应用提供全面保...

后浪涛涛
29分钟前
7
0
Less导入选项

Less 提供了CSS @import CSS规则的几个扩展,以提供更多的灵活性来处理外部文件。 语法: @import (keyword) "filename"; 以下是导入指令的相关详情: reference,使用较少的文件但不输出。 ...

凌兮洛
45分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部