公司决定使用dojo这个JavaScript框架，本来没有一点点dojo的经验。在网上查了好久好久，而且用二把刀的英语死啃残缺不全的英文文档， 仅仅了解了一点点，就把这一点点经验分享出来吧。
个人测试使用的是dojo1.5，window xp sp3，apache2.2。环境搭建代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册案例</title>
<style type="text/css">
@import "dojo/resources/dojo.css";
@import "dijit/themes/tundra/tundra.css";
.dijitInputFieldFocused {
border: solid 2px #FFDF00;
}
</style>
<script type="text/javascript" djConfig="parseOnLoad: true"
src="dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.CheckBox");
//下拉列表
dojo.require("dijit.form.FilteringSelect");
//数字选项
dojo.require("dijit.form.NumberSpinner");
//验证
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojox.validate.regexp");
//解析器
dojo.require("dojo.parser");
</script>
</head>
<body class="tundra">
<form id="registForm" method="post">
<table>
<tr>
<td>
<label for="username">
用户名
</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="text" id="username" name="username"/>
</td>
</tr>
<tr>
<td>
<label for="password">
密码
</label>
</td>
<td>
<input dojoType="dijit.form.TextBox" type="password" id="password" name="password"/>
</td>
</tr>
<!-- 单项选择按钮 -->
<tr>
<td>
<label for="sex1">
性别
</label>
</td>
<td>
<input dojoType="dijit.form.RadioButton" type="radio" name="sex"
id="sex1" value="男" checked="checked"/>
<label for="sex1">
男
</label>
<input dojoType="dijit.form.RadioButton" type="radio" name="sex"
id="sex2" value="女" />
<label for="sex2">
女
</label>
<input dojoType="dijit.form.RadioButton" type="radio" name="sex"
id="sex3" value="保密" />
<label for="sex3">
保密
</label>
</td>
</tr>
<!-- 年龄 -->
<tr>
<td>
<label for="age">年龄</label>
</td>
<td>
<input dojoType="dijit.form.NumberSpinner"
value="18"
class="medium"
constraints="{max:100,places:0}"
name="age"
id="age"
required="true">
</td>
</tr>
<!-- 日历 -->
<tr>
<td>
<label for="birthday">
出生日期
</label>
</td>
<td>
<input id="birthday" value="1900-01-01" name="birthday"
dojoType="dijit.form.DateTextBox"
constraints="{min:'1900-01-01',max:'today',formatLength:'long'}"
required="true"
trim="true">
</td>
</tr>
<!-- 多项选择按钮 -->
<tr>
<td>
<label for="interest1">
兴趣
</label>
</td>
<td>
<input type="checkbox" dojoType="dijit.form.CheckBox"
name="interest" id="interest1" value="电脑">
<label for="interest1">
上网
</label>
<input type="checkbox" dojoType="dijit.form.CheckBox"
name="interest" id="interest２" value="游泳">
<label for="interest２">
游泳
</label>
<input type="checkbox" dojoType="dijit.form.CheckBox"
name="interest" id="interest３" value="网球">
<label for="interest３">
网球
</label>
<input type="checkbox" dojoType="dijit.form.CheckBox"
name="interest" id="interest４" value="看书">
<label for="interest４">
看书
</label>
</td>
</tr>
<!-- 下拉列表 -->
<tr>
<td>
<label for="nationality">
国籍
</label>
</td>
<td>
<select dojoType=dijit.form.FilteringSelect name="nationality"
id="nationality" hasDownArrow="true">
<option value="chinese">chinese</option>
<option value="USA">USA</option>
<option value="English">English</option>
</select>
</td>
</tr>
<!-- email -->
<tr>
<td>
<label>E-mail</label>
</td>
<td>
<input id="email" type="text" name="email" class="long" value="youname@qq.com"
dojoType="dijit.form.ValidationTextBox"
regExpGen="dojox.regexp.emailAddress"
trim="true"
required="true"
invalidMessage="E-mail地址是非法的。" />
</td>
</tr>
</table>
</form>
<button dojoType="dijit.form.Button">
提交
<script type="dojo/method" event="onClick">
function registCallBack(data,params){
dojo.byId("showData").innerHTML = data;
}
function registError(data,params){
dojo.byId("showData").innerHTML = '服务器错误';
}
dojo.xhrPost({
url:'./regist.do',
load:registCallBack,
error:registError,
form:'registForm',
encoding:'utf-8'
});
</script>
</button>
<div id="showData"></div>
</body>
</html>
具体的文件目录布局如下：
学习JavaScript框架文件应用时，要注意路径问题。
上面代码是参照网上老大以及查看dojo1.5原包之中的例子.
扫一扫
3158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
