创建一个HelloWorld级别的Dojo 表单Demo有一下几个步骤:
- 在<head>部分添加标准的Dojo首部(路径根据自己本地目录修改)
<style type="text/css">
@import "../lib/dojoroot/dijit/themes/tundra/tundra.css";
@import "../lib/dojoroot/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="../lib/dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
- 将<body>标签的class属性设置为一种Dijit主题(应用了tundra主题)
<body class="tundra">
- 根据需要的组建添加dojo.require语句(使用了4种组件)
<script type="text/javascript">
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>
- 在html中添加组件属性
<div class="formContainer" dojoType
="dijit.layout.TabContainer">
<!-- Personal Data -->
<div dojoType="dijit.layout.ContentPane" title="Personal Data">
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" size="30"
dojoType="dijit.form.ValidationTextBox" trim="true" propercase="true" required="true" invalidMessage="You must enter your first name"/><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/>
</div>
在Dojo中存在两种使用Dijit组件的方式;
- 声明式:
<div class="formContainer" dojoType="dijit.layout.TabContainer">
- 组件式:
var programmticPane = new dijit.layout.ContentPane(
{ href: 'http://www.yahoo.com'}
);
上面的HelloWorld采用的是申明式的方式。
在本地用FireFox直接打开html文件时,有可能会出现:
Could not load 'dojo.parser'; last tried './parser.js'
是由于火狐默认情况下不允许本地文件加载js脚本:
- about:config
- security.fileuri.strict_origin_policy
- need to be set to false
- to be able serve from filesystem
分享到:
相关推荐
Dojo 是一个功能丰富的 JavaScript 库,它提供了一系列模块化、面向对象的工具,用于构建高性能的 Web 应用程序。在 Dojo 中,模块和包的概念是核心组成部分,它们帮助开发者组织和管理代码,使其更易于维护和重用。...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括AJAX、DOM操作、动画...在“dojo学习笔记”中,你可能找到了关于这些概念的详细讲解和实践案例,这对理解和掌握Dojo技术体系非常有帮助。
dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane dojo学习笔记(四)...
dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane dojo学习笔记(四)...
dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane dojo学习笔记(四)...
dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane dojo学习笔记(四)...
【Dojo 学习笔记】 Dojo 是一个强大的JavaScript工具库,特别适合于Web编程,尤其在面向对象的JavaScript编程方面表现出色。学习Dojo之前,建议先掌握JavaScript的面向对象编程基础,这对于理解Dojo的源码和设计...
和前一个树形菜单 大多数例子是基于 PHP 的 发现很多 dojo 学者想下载 dojo 的API…… 结论是:下不到的! 发现很多想下载一些帮助例子,在http://download.dojotoolkit.org/ 下才能找到,进去点版本,比如 ...
这个压缩包包含了Dojo的源代码和相关学习笔记,旨在帮助开发者深入理解Dojo的工作原理和使用方法。 1. **Dojo 源代码解析**: Dojo 的源代码是用JavaScript编写的,并遵循AMD(Asynchronous Module Definition)...
首先,"dojo文档.doc"可能是作者整理的个人学习笔记,通常这样的文档会包含对Dojo核心概念的理解、常用函数和方法的解释、实例代码以及可能遇到的问题解决方案。个人笔记是学习过程中宝贵的经验总结,可以帮助快速...
【Dojo 教程笔记】 Dojo 是一个强大的JavaScript工具库,它采用了面向对象的编程方式,对于熟悉JavaScript面向对象编程的开发者来说尤其有用。在开始学习Dojo之前,建议先掌握JavaScript的基础知识,特别是面向对象...
### Dojo框架学习笔记 #### 一、Dojo框架简介 Dojo是一个开源的JavaScript库,主要用于构建高性能的Web应用程序。它提供了一系列的功能强大的工具,包括DOM操作、AJAX、事件处理、用户界面控件等,使开发者能够...
在"dojo学习笔记.pdf"中,你可能会学习到如何导入Dojo,如何使用模块系统,以及一些基本的Dojo API。"Dojo快速入门.pdf"可能会介绍Dojo的安装、配置过程,快速上手的方法,以及Dijit组件的初步使用。最后,"dojo组件...
《Dojo 学习笔记入门篇 - 首个Dojo示例解析》 Dojo是一个功能强大的JavaScript工具包,它提供了丰富的UI组件、模块化系统、数据存储以及Ajax等功能,广泛应用于Web开发中。本篇文章将引导你完成Dojo的基础配置,并...