dojo学习第一天 Tab选项卡 实现


Posted in Javascript onAugust 28, 2011

其实不然,用《精通Dojo》里的话来说就是"Dojo不只是一个程序库,而是一个工具包",它比其他所有的JS库的插件更全面更广阔。它包含大约40个用户界面控件、1个图形框架、cometd支持、1个打包系统,还有其他的一些东西。

从dojo官方网站 上下载最新版1.6,解压下来,它有三个文件夹分别是:

dojo学习第一天 Tab选项卡 实现 

1. dojo: 是Dojo基础,你要做的其它事情都是在它的基础上,类似于jquery.js文件,但比它更丰富了一些其他功能;

2. dijit : Dojo的小部件框架及内建的小控件集.(大约有40个HTML用户小控件);

3 dojox: Dojo的扩展库,包含了从表格小部件到绘图库的所有功能。

 了解了这些就足够了,虽然才发布到1.6,没有像jquery那样到6.1,但dojo绝对是强大的,选择它,将是你一生不变的追求。(广告词)

 (注:dojo始于2004年,alex发起,然后经过众多DHTML专家开发,所以它现在已经很成熟了。)

 接下来,我们要来配置我们的第一个例子,准备好了吗?dojo旅程正式开始,我们要做一个表单注册的例子.

首先我们要引用它的主题样式:

<style> 
@import url(../dijit/themes/tundra/tundra.css); 
@import url(../dojo/resources/dojo.css); 
</style>

themes就是主题样式了,里面已经存在了几个,我任选了其中的"tundra",然后还要引用下dojo.css。再就是引用dojo基础文件dojo.js:

<script src='../dojo/dojo.js' djConfig='parseOnLoad:true'></script>
这里要注意的是djConfig,由于我们要用到声明式小部件,所以需要parse,这个使用起来会简单点,如果用编程式写法就不需要了,只需注意下就行了。然后是引用parser.js和ContentPane.js,parser是使用声明式所必需的,ContentPane是内容面板所必需的。在dojo里引用的方式是调用require方法,这个和PHP里的 require_once很相似,就是只引用一次该文件.

<script> 
dojo.require("dojo.parser"); 
dojo.require('dijit.layout.ContentPane'); 
dojo.require('dijit.layout.TabContainer'); 
</script>

这里的"."写法,可以理解为文件夹下的类,或者命名空间,和AS3里很相似。大家是不是发现多了一个TabContainer,这个是我们要用到的选项卡切换小插件了。如果调用这个插件呢,很简单,只需要在我们要使用的地方用dojoType属性指明就行了。
<div dojoType='dijit.layout.TabContainer' class="myForm"> 
<div dojoType='dijit.layout.ContentPane' title='个人信息'> 
<label for="firstName">First Name:</label><input type='text' id='firstName' /></br> 
<label for="lastName">Last Name:</label><input type='text' id='lastName' /></br> 
<label for="middleInitial">Middle Initial:</label><input type='text' id='middleInitial' /></br> 
</div> 
<div dojoType='dijit.layout.ContentPane' title='联系地址'> 
<label>Email:</label><input type='text' id='email' /></br> 
<label>Address:</label><input type='text' id='address' /></br> 
<label>State:</label><input type='text' id='state' /></br> 
<label>City:</label><input type='text' id='city' /></br> 
<label>Country:</label><input type='text' id='country' /></br> 
</div> 
<div dojoType='dijit.layout.ContentPane' title='联系电话'> 
<label>Work Phone:</label><input type='text' id='workPhone' /></br> 
<label>Home Phone:</label><input type='text' id='homePhone' /></br> 
<label>Cell Phone:</label><input type='text' id='CellPhone' /></br> 
</div> 
</div>

然后我们来一句句理解, dojoType='dijit.layout.TabContainer'是指让容器拥有tab选项卡功能,dojoType='dijit.layout.ContentPane'这个是指该容器是一个内容块,也就是单个的选项卡.

最后就没了,这个简单的选项卡就完成了。大家是不是觉得很奇怪,我们竟然没写其它的一行代码就完成了这个功能?这就是声明式小插件的好处了,因为你给dojoType声明了,它就会自动去绑定这个功能。

好了,这是我第一天的正式接触dojo,可能有理解错误的地方,大家可以指出来,我们一起学习进步。 如果你喜欢,我会写第二篇甚至更多.

本文的最终示例图:demo演示请查阅:http://www.lovewebgames.com/dojoroot/myStudy/study_001.html

dojo学习第一天 Tab选项卡 实现

完整代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>第一天 </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<style> 
@import url(../dijit/themes/tundra/tundra.css); 
@import url(../dojo/resources/dojo.css); 
</style> 
<script src='../dojo/dojo.js' djConfig='parseOnLoad:true'></script> 
<script> 
dojo.require("dojo.parser"); 
dojo.require('dijit.layout.ContentPane'); 
dojo.require('dijit.layout.TabContainer'); 
</script> 
<style> 
.myForm{width:600px;height:300px;line-height:1.6;} 
.myForm label{width:150px;float:left;} 
</style> 
</head> <body class="tundra"> 
<div dojoType='dijit.layout.TabContainer' class="myForm"> 
<div dojoType='dijit.layout.ContentPane' title='个人信息'> 
<label for="firstName">First Name:</label><input type='text' id='firstName' /></br> 
<label for="lastName">Last Name:</label><input type='text' id='lastName' /></br> 
<label for="middleInitial">Middle Initial:</label><input type='text' id='middleInitial' /></br> 
</div> 
<div dojoType='dijit.layout.ContentPane' title='联系地址'> 
<label>Email:</label><input type='text' id='email' /></br> 
<label>Address:</label><input type='text' id='address' /></br> 
<label>State:</label><input type='text' id='state' /></br> 
<label>City:</label><input type='text' id='city' /></br> 
<label>Country:</label><input type='text' id='country' /></br> 
</div> 
<div dojoType='dijit.layout.ContentPane' title='联系电话'> 
<label>Work Phone:</label><input type='text' id='workPhone' /></br> 
<label>Home Phone:</label><input type='text' id='homePhone' /></br> 
<label>Cell Phone:</label><input type='text' id='CellPhone' /></br> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
js实现文字截断功能
Sep 14 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
js中设置元素class的三种方法小结
Aug 28 #Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 #Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 #Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 #Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 #Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 #Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 #Javascript
You might like
PHP中动态显示签名和ip原理
2007/03/28 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python中反射用法实例
2015/03/27 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python实现音乐下载器
2018/04/15 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
节电标语大全
2014/06/23 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers