`
jkbjxy
  • 浏览: 83967 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

使用DOJO简单的构建一个页面

    博客分类:
  • DOJO
阅读更多

第一次使用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框架使用教程

    总之,Dojo框架是一个功能强大的JavaScript库,提供了模块化、UI组件、数据绑定和AJAX等功能,适合构建复杂的Web应用程序。通过阅读提供的教程资源和实践上述示例,你可以逐步掌握Dojo的使用技巧,并将其应用于实际...

    Dojo构建Ajax应用程序源码(包括书中用到的dojo-release-1.1.2)

    Dojo 是一个强大的JavaScript工具库,专为构建复杂的Web应用程序而设计。这个压缩包包含了Dojo框架的一个早期版本——dojo-release-1.1.2,它对于了解Dojo的历史和学习Ajax应用程序的构建非常有价值。在JavaScript的...

    dojo中文文档-dojo手册

    Dojo是一个强大的JavaScript工具包,它提供了丰富的功能,包括DOM操作、AJAX交互、动画效果、事件处理以及模块化开发等,帮助开发者构建高性能、可维护的Web应用。 Dojo的核心概念之一是模块系统(dojo/_base)。这...

    第一个基于DOJO1.0程序

    【标题】"第一个基于DOJO1.0程序" 指的是一个使用DOJO JavaScript库1.0版本创建的初级程序。DOJO是开源的JavaScript工具包,它提供了丰富的功能,包括DOM操作、AJAX通信、动画效果以及UI组件等,帮助开发者构建交互...

    Dojo的一些学习资料

    7. **dojo/ready**: 这是一个非常实用的函数,用于确保在DOM准备就绪或者页面完全加载后执行代码,避免了传统的window.onload或DOMContentLoaded事件的使用。 8. **dojo/store**: Dojo的存储模块为数据管理提供了...

    使用Dojo,JSON开发ajax

    通过上述步骤,我们成功地使用Dojo和JSON构建了一个简单的AJAX应用。这个应用展示了如何利用Dojo进行HTTP请求、处理服务器响应以及更新DOM元素。此外,通过创建自定义组件,可以进一步扩展应用的功能,使其更加健壮...

    dojo起步学习的好例子

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括AJAX、DOM操作、动画效果、事件处理、模块化等。在"dojo起步学习的好例子"这个压缩包中,我们很可能会找到一系列针对Dojo库的实例,...

    dojo1.8.chm+dojo1.11中文入门pdf

    Dojo 1.8是Dojo Toolkit的一个重要版本,它引入了许多新特性,例如模块化系统AMD(Asynchronous Module Definition),这个系统使得代码组织更加有序,提高了页面加载效率。同时,1.8版本改进了Dojo的DOM操作和事件...

    dojo权威入门教程

    Dojo Toolkit是一个强大的JavaScript框架,它提供了丰富的组件、工具和API,帮助开发者高效地构建高性能、跨平台的Web应用。本教程旨在通过详细讲解和实例演示,使读者能够快速上手并熟练掌握Dojo的核心概念和实用...

    dojo-release-1.0.2

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,尤其在构建复杂的、企业级的AJAX应用程序方面表现出色。"dojo-release-1.0.2"是Dojo框架的一个早期版本,发布于2008年,这个版本在当时包含...

    dojo开发帮助文档

    Dojo 是一个强大的JavaScript 库,它为Web 开发提供了丰富的功能和工具,包括模块化、用户界面构建、数据管理、动画效果以及AJAX交互等。这个“dojo开发帮助文档”是针对Dojo 1.9版本的详细指南,旨在帮助开发者深入...

    学习dojo

    Dojo是一个强大的JavaScript库,它提供了丰富的用户界面组件、模块化开发、数据管理以及动画效果等功能,广泛应用于Web应用开发。Dojo的全名是Dojo Toolkit,它是一个开源的JavaScript框架,旨在帮助开发者创建高...

    dojo快速入门(中文版)

    总的来说,dojo Toolkit提供了一个全面的开发环境,涵盖了Web应用开发的各个方面,无论是简单的功能增强还是复杂的组件构建,都可以借助dojo高效完成。通过深入学习和实践,开发者可以充分利用dojo的强大功能,提高...

    dojo工具包zip

    Dojo工具包是一个广泛使用的JavaScript库,主要用于构建交互式的Web应用程序。这个压缩包包含了你在学习Dojo时可能需要用到的各种资源,旨在提供一个完整的开发环境,同时也作为一种备份手段。现在,让我们深入了解...

    Dojo JS框架最新版

    Dojo不仅仅是一个简单的JavaScript库,它是一个全面的开发框架,提供了丰富的功能集,包括UI组件、数据管理、动画效果、模块化以及国际化支持,帮助开发者构建复杂且高性能的Web应用。 首先,让我们深入了解Dojo的...

    dojo实战+实用例子

    Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括DOM操作、事件处理、动画效果、AJAX交互以及模块化开发等。本实战教程将深入讲解Dojo的核心概念和实用技巧,通过具体的例子帮助你快速...

    dojo例子 各方法的用法

    在"HelloWorld"示例中,开发者通常会展示如何引入Dojo库,创建一个简单的函数或者使用Dojo的`dojo/dom`模块来获取和操作DOM元素,然后在页面上显示欢迎信息。这通常涉及到`dojo/domReady!`这个加载器插件,它确保...

    dojo-release-1.4.3

    Dojo 是一个功能强大的JavaScript库和开发框架,尤其在构建复杂、可扩展的Web应用程序方面表现卓越。标题"dojo-release-1.4.3"揭示了我们讨论的是Dojo框架的一个特定版本——1.4.3。这个版本发布于2010年,尽管现在...

Global site tag (gtag.js) - Google Analytics