?公司决定使用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="interest2" value="游泳"> <label for="interest2"> 游泳 </label> <input type="checkbox" dojoType="dijit.form.CheckBox" name="interest" id="interest3" value="网球"> <label for="interest3"> 网球 </label> <input type="checkbox" dojoType="dijit.form.CheckBox" name="interest" id="interest4" value="看书"> <label for="interest4"> 看书 </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原包之中的例子.
?