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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
Javascript变量作用域详解
Dec 06 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
微信小程序实现bindtap等事件传参
Apr 08 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 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
source.php查看源文件
2006/12/09 PHP
php+highchats生成动态统计图
2014/05/21 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
两款万能的php分页类
2015/11/12 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
python使用PyQt5的简单方法
2019/02/27 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
django model object序列化实例
2020/03/13 Python
Python实现代码块儿折叠
2020/04/15 Python
python脚本和网页有何区别
2020/07/02 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
给学校的建议书范文
2014/05/15 职场文书
班级心理活动总结
2014/07/04 职场文书
地道战观后感400字
2015/06/04 职场文书
九不准学习心得体会
2016/01/23 职场文书
Python 键盘事件详解
2021/11/11 Python