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 相关文章推荐
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
再论Javascript的类继承
Mar 05 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
js调试系列 初识控制台
Jun 18 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
vue中添加与删除关键字搜索功能
Oct 12 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流量统计功能的实现代码
2012/09/29 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
什么是JavaScript
2009/08/13 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
python批量制作雷达图的实现方法
2016/07/26 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
python实现剪切功能
2019/01/23 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
高级护理专业毕业生推荐信
2013/12/25 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
我的中国梦口号
2014/06/16 职场文书
学校读书活动总结
2014/06/30 职场文书
应届生面试求职信
2014/07/02 职场文书
护理专科学生自荐书
2014/07/05 职场文书
2014年教师节活动总结
2014/08/29 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript