第一次使用DOJO,感觉DOJO非常强大
1.下载DOJO的包,最新版的是1.7.3,把包拷贝到MyEclipse的dojoroot目录下
修改dojoroot的字符集编码为utf-8,否则会报错,显示乱码
2.引入dojo的css样式
<style type="text/css">
@import "<%=path%>/dojoroot/dijit/themes/tundra/tundra.css";
@import "<%=path%>/dojoroot/dojo/resources/dojo.css"
</style>
3.设置djConfig,它是DOJO的全局设置变量,可以控制DOJO的行为
parseOnLoad:设置为true后,在页面完成加载后,启动对DOJO标签进行解析
isDebug:开启调试模式,正式发行后设置为false
<script type="text/javascript" src="<%=path%>/dojoroo/dojo/dojo.js"
djConfig="parseOnLoad: true,isDebug:true">
</script>
4. 设置css样式,控制表单元素在页面中的位置
body标签的样式设置为: class="tundra"
.formContainer {
width:600px;
height:600px;
margin: 0px 0px 0px 200px;
}
label {
width:150px;
float:left;
}
5. 传统的表单都是竖着放一排,那么这样的话,不太美观
dojo的dijit提供了类似于java的SWING的一个组建来构建页面
ContentPane 在内容周围创建边界,把各个组建放入边界内
TabContainer将ContentPane层叠,用户可以通过顶部选项卡选择
ValidationTextBox对单个控件验证
DateTextBox给文本框添加一个弹出式的日历选取器
dojoType="dijit.form.ValidationTextBox"如果为空的背景显示黄色警告
trim去掉空格
propercase首字母改为大写
regExp=".*@.*提供正则表达式验证
<div class="formContainer" dojoType="dijit.layout.TabContainer"
style="width:600px;height:600px">
<div dojoType="dijit.layout.ContentPane" title="Personal Data">
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name"
dojoType="dijit.form.ValidationTextBox" trim="true"
propercase="true" required="true" size="30"
invalidMessage="请输入你的名字" /><br/>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name"
size="30" /><br/>
<label for="middle_initial">Middle Initial:</label>
<input type="text" name="middle_initial" id="middle_initial"
size="1" /><br/>
<label for="email">Email:</label>
<input type="text" name="email" id="email" size="30"
dojoType="dijit.form.ValidationTextBox" regExp=".*@.*"/>
</div>
<div dojoType="dijit.layout.ContentPane" title="Address">
<label for="address_line_1">Address Line 1:</label>
<input type="text" name="address_line_1" id="address_line_1"
size="30" /><br/>
<label for="address_line_2">Address Line 2:</label>
<input type="text" name="address_line_2" id="address_line_2"
size="30" /><br/>
<label for="city">City:</label>
<input type="text" name="city" id="city"
size="30" /><br/>
<label for="state">State:</label>
<input type="text" name="state" id="state"
size="2" /><br/>
<label for="postal_code">Postal Code:</label>
<input type="text" name="postal_code" id="postal_code"
size="15" /><br/>
<label for="country">Country:</label>
<input type="text" name="country" id="country"
size="30" /><br/>
<label for="date_move">Date of Move to this Address:</label>
<input type="text" name="date_move" id="date_move"
dojoType="dijit.form.DateTextBox" size="11" /><br/>
</div>
<div dojoType="dijit.layout.ContentPane" title="Phones">
<label for="home_phone">Home Phone:</label>
<input type="text" name="home_phone" id="home_phone"
size="30" /><br/>
<label for="work_phone">Work Phone:</label>
<input type="text" name="work_phone" id="work_phone"
size="30" /><br/>
<label for="cell_phone">Cell Phone:</label>
<input type="text" name="cell_phone" id="cell_phone"
size="30" /><br/>
</div>
</div>
6.dojo.parser为dijit中配置使用声明式的dojoType所必须的
dojo.require动态获取所需的js,这个是必须要添加的
<script>
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.DateTextBox");
</script> dojo.require("dojo.parser");
分享到:
相关推荐
总之,Dojo框架是一个功能强大的JavaScript库,提供了模块化、UI组件、数据绑定和AJAX等功能,适合构建复杂的Web应用程序。通过阅读提供的教程资源和实践上述示例,你可以逐步掌握Dojo的使用技巧,并将其应用于实际...
Dojo 是一个强大的JavaScript工具库,专为构建复杂的Web应用程序而设计。这个压缩包包含了Dojo框架的一个早期版本——dojo-release-1.1.2,它对于了解Dojo的历史和学习Ajax应用程序的构建非常有价值。在JavaScript的...
Dojo是一个强大的JavaScript工具包,它提供了丰富的功能,包括DOM操作、AJAX交互、动画效果、事件处理以及模块化开发等,帮助开发者构建高性能、可维护的Web应用。 Dojo的核心概念之一是模块系统(dojo/_base)。这...
【标题】"第一个基于DOJO1.0程序" 指的是一个使用DOJO JavaScript库1.0版本创建的初级程序。DOJO是开源的JavaScript工具包,它提供了丰富的功能,包括DOM操作、AJAX通信、动画效果以及UI组件等,帮助开发者构建交互...
7. **dojo/ready**: 这是一个非常实用的函数,用于确保在DOM准备就绪或者页面完全加载后执行代码,避免了传统的window.onload或DOMContentLoaded事件的使用。 8. **dojo/store**: Dojo的存储模块为数据管理提供了...
通过上述步骤,我们成功地使用Dojo和JSON构建了一个简单的AJAX应用。这个应用展示了如何利用Dojo进行HTTP请求、处理服务器响应以及更新DOM元素。此外,通过创建自定义组件,可以进一步扩展应用的功能,使其更加健壮...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括AJAX、DOM操作、动画效果、事件处理、模块化等。在"dojo起步学习的好例子"这个压缩包中,我们很可能会找到一系列针对Dojo库的实例,...
Dojo 1.8是Dojo Toolkit的一个重要版本,它引入了许多新特性,例如模块化系统AMD(Asynchronous Module Definition),这个系统使得代码组织更加有序,提高了页面加载效率。同时,1.8版本改进了Dojo的DOM操作和事件...
Dojo Toolkit是一个强大的JavaScript框架,它提供了丰富的组件、工具和API,帮助开发者高效地构建高性能、跨平台的Web应用。本教程旨在通过详细讲解和实例演示,使读者能够快速上手并熟练掌握Dojo的核心概念和实用...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,尤其在构建复杂的、企业级的AJAX应用程序方面表现出色。"dojo-release-1.0.2"是Dojo框架的一个早期版本,发布于2008年,这个版本在当时包含...
Dojo 是一个强大的JavaScript 库,它为Web 开发提供了丰富的功能和工具,包括模块化、用户界面构建、数据管理、动画效果以及AJAX交互等。这个“dojo开发帮助文档”是针对Dojo 1.9版本的详细指南,旨在帮助开发者深入...
Dojo是一个强大的JavaScript库,它提供了丰富的用户界面组件、模块化开发、数据管理以及动画效果等功能,广泛应用于Web应用开发。Dojo的全名是Dojo Toolkit,它是一个开源的JavaScript框架,旨在帮助开发者创建高...
总的来说,dojo Toolkit提供了一个全面的开发环境,涵盖了Web应用开发的各个方面,无论是简单的功能增强还是复杂的组件构建,都可以借助dojo高效完成。通过深入学习和实践,开发者可以充分利用dojo的强大功能,提高...
Dojo工具包是一个广泛使用的JavaScript库,主要用于构建交互式的Web应用程序。这个压缩包包含了你在学习Dojo时可能需要用到的各种资源,旨在提供一个完整的开发环境,同时也作为一种备份手段。现在,让我们深入了解...
Dojo不仅仅是一个简单的JavaScript库,它是一个全面的开发框架,提供了丰富的功能集,包括UI组件、数据管理、动画效果、模块化以及国际化支持,帮助开发者构建复杂且高性能的Web应用。 首先,让我们深入了解Dojo的...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括DOM操作、事件处理、动画效果、AJAX交互以及模块化开发等。本实战教程将深入讲解Dojo的核心概念和实用技巧,通过具体的例子帮助你快速...
在"HelloWorld"示例中,开发者通常会展示如何引入Dojo库,创建一个简单的函数或者使用Dojo的`dojo/dom`模块来获取和操作DOM元素,然后在页面上显示欢迎信息。这通常涉及到`dojo/domReady!`这个加载器插件,它确保...
Dojo 是一个功能强大的JavaScript库和开发框架,尤其在构建复杂、可扩展的Web应用程序方面表现卓越。标题"dojo-release-1.4.3"揭示了我们讨论的是Dojo框架的一个特定版本——1.4.3。这个版本发布于2010年,尽管现在...