Dojo学习笔记（一）

最新推荐文章于 2022-08-26 17:32:52 发布

原创最新推荐文章于 2022-08-26 17:32:52 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍如何创建一个简单的Dojo表单Demo，包括设置Dojo首部、应用Dijit主题、添加所需的组件及使用方式等内容。还提供了解决Firefox浏览器加载本地JS脚本问题的方法。

创建一个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