Dojo学习之环境搭建

公司决定使用dojo这个JavaScript框架，本来没有一点点dojo的经验。在网上查了好久好久，而且用二把刀的英语死啃残缺不全的英文文档，仅仅了解了一点点，就把这一点点经验分享出来吧。

个人测试使用的是dojo1.5，window xp sp3，apache2.2。环境搭建代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">@H_404_5@ <html>@H_404_5@ <head>@H_404_5@ <title>注册案例</title>@H_404_5@ <style type="text/css">@H_404_5@ @import "dojo/resources/dojo.css";@H_404_5@ @import "dijit/themes/tundra/tundra.css";@H_404_5@ .dijitInputFieldFocused {@H_404_5@ border: solid 2px #FFDF00;@H_404_5@ }@H_404_5@ </style>@H_404_5@ @H_404_5@ <script type="text/javascript" djConfig="parSEOnLoad: true"@H_404_5@ src="dojo/dojo.js"></script>@H_404_5@ @H_404_5@ <script type="text/javascript">@H_404_5@ dojo.require("dijit.form.Button");@H_404_5@ dojo.require("dijit.form.TextBox");@H_404_5@ dojo.require("dijit.form.DateTextBox");@H_404_5@ @H_404_5@ dojo.require("dijit.form.CheckBox");@H_404_5@ //下拉列表@H_404_5@ dojo.require("dijit.form.FilteringSelect");@H_404_5@ //数字选项@H_404_5@ dojo.require("dijit.form.NumberSpinner");@H_404_5@ //验证@H_404_5@ dojo.require("dijit.form.ValidationTextBox");@H_404_5@ dojo.require("dojox.validate.regexp");@H_404_5@ //解析器@H_404_5@ dojo.require("dojo.parser");@H_404_5@ </script>@H_404_5@ </head>@H_404_5@ @H_404_5@ <body class="tundra">@H_404_5@ <form id="registForm" method="post">@H_404_5@ <table>@H_404_5@ <tr>@H_404_5@ <td>@H_404_5@ <label for="username">@H_404_5@ 用户名@H_404_5@ </label>@H_404_5@ </td>@H_404_5@ <td>@H_404_5@ <input dojoType="dijit.form.TextBox" type="text" id="username" name="username"/>@H_404_5@ </td>@H_404_5@ </tr>@H_404_5@ <tr>@H_404_5@ <td>@H_404_5@ <label for="password">@H_404_5@ 密码@H_404_5@ </label>@H_404_5@ </td>@H_404_5@ <td>@H_404_5@ <input dojoType="dijit.form.TextBox" type="password" id="password" name="password"/>@H_404_5@ </td>@H_404_5@ </tr>@H_404_5@ @H_404_5@ <tr>@H_404_5@ <td>@H_404_5@ <label for="sex1">@H_404_5@ 性别@H_404_5@ </label>@H_404_5@ </td>@H_404_5@ <td>@H_404_5@ <input dojoType="dijit.form.RadioButton" type="radio" name="sex"@H_404_5@ id="sex1" value="男" checked="checked"/>@H_404_5@ <label for="sex1">@H_404_5@ 男@H_404_5@ </label>@H_404_5@ <input dojoType="dijit.form.RadioButton" type="radio" name="sex"@H_404_5@ id="sex2" value="女" />@H_404_5@ <label for="sex2">@H_404_5@ 女@H_404_5@ </label>@H_404_5@ <input dojoType="dijit.form.RadioButton" type="radio" name="sex"@H_404_5@ id="sex3" value="保密" />@H_404_5@ <label for="sex3">@H_404_5@ 保密@H_404_5@ </label>@H_404_5@ </td>@H_404_5@ </tr>@H_404_5@ @H_404_5@ <tr>@H_404_5@ <td>@H_404_5@ <label for="age">年龄</label>@H_404_5@ </td>@H_404_5@ <td>@H_404_5@ <input dojoType="dijit.form.NumberSpinner"@H_404_5@ value="18"@H_404_5@ class="medium"@H_404_5@ constraints="{max:100,places:0}"@H_404_5@ name="age"@H_404_5@ id="age"@H_404_5@ required="true">@H_404_5@ </td>@H_404_5@ </tr>@H_404_5@ @H_404_5@ <tr>@H_404_5@ <td>@H_404_5@ <label for="birthday">@H_404_5@ 出生日期@H_404_5@ </label>@H_404_5@ </td>@H_404_5@ <td>@H_404_5@ <input id="birthday" value="1900-01-01" name="birthday"@H_404_5@ dojoType="dijit.form.DateTextBox"@H_404_5@ constraints="{min:'1900-01-01',max:'today',formatLength:'long'}"@H_404_5@ required="true"@H_404_5@ trim="true">@H_404_5@ </td>@H_404_5@ </tr>@H_404_5@ @H_404_5@ <tr>@H_404_5@ <td>@H_404_5@ <label for="interest1">@H_404_5@ 兴趣@H_404_5@ </label>@H_404_5@ </td>@H_404_5@ <td>@H_404_5@ <input type="checkBox" dojoType="dijit.form.CheckBox"@H_404_5@ name="interest" id="interest1" value="电脑">@H_404_5@ <label for="interest1">@H_404_5@ 上网@H_404_5@ </label>@H_404_5@ <input type="checkBox" dojoType="dijit.form.CheckBox"@H_404_5@ name="interest" id="interest２" value="游泳">@H_404_5@ <label for="interest２">@H_404_5@ 游泳@H_404_5@ </label>@H_404_5@ <input type="checkBox" dojoType="dijit.form.CheckBox"@H_404_5@ name="interest" id="interest３" value="网球">@H_404_5@ <label for="interest３">@H_404_5@ 网球@H_404_5@ </label>@H_404_5@ <input type="checkBox" dojoType="dijit.form.CheckBox"@H_404_5@ name="interest" id="interest４" value="看书">@H_404_5@ <label for="interest４">@H_404_5@ 看书@H_404_5@ </label>@H_404_5@ </td>@H_404_5@ </tr>@H_404_5@ @H_404_5@ <tr>@H_404_5@ <td>@H_404_5@ <label for="nationality">@H_404_5@ 国籍@H_404_5@ </label>@H_404_5@ </td>@H_404_5@ <td>@H_404_5@ <select dojoType=dijit.form.FilteringSelect name="nationality"@H_404_5@ id="nationality" hasDownArrow="true">@H_404_5@ <option value="chinese">chinese</option>@H_404_5@ <option value="USA">USA</option>@H_404_5@ <option value="English">English</option>@H_404_5@ </select>@H_404_5@ </td>@H_404_5@ </tr>@H_404_5@ @H_404_5@ <tr>@H_404_5@ <td>@H_404_5@ <label>E-mail</label>@H_404_5@ </td>@H_404_5@ <td>@H_404_5@ <input id="email" type="text" name="email" class="long" value="youname@qq.com"@H_404_5@ dojoType="dijit.form.ValidationTextBox"@H_404_5@ regExpGen="dojox.regexp.emailAddress"@H_404_5@ trim="true"@H_404_5@ required="true"@H_404_5@ invalidMessage="E-mail地址是非法的。" />@H_404_5@ </td>@H_404_5@ </tr>@H_404_5@ </table>@H_404_5@ </form>@H_404_5@ <button dojoType="dijit.form.Button">@H_404_5@ 提交@H_404_5@ <script type="dojo/method" event="onClick">@H_404_5@ function registCallBack(data,params){@H_404_5@ dojo.byId("showData").innerHTML = data;@H_404_5@ }@H_404_5@ function registError(data,params){@H_404_5@ dojo.byId("showData").innerHTML = '服务器错误';@H_404_5@ }@H_404_5@ dojo.xhrPost({@H_404_5@ url:'./regist.do',@H_404_5@ load:registCallBack,@H_404_5@ error:registError,@H_404_5@ form:'registForm',@H_404_5@ encoding:'utf-8'@H_404_5@ });@H_404_5@ </script>@H_404_5@ </button>@H_404_5@ <div id="showData"></div>@H_404_5@ </body>@H_404_5@ </html>

具体的文件目录布局如下：

学习JavaScript框架文件应用时，要注意路径问题。

上面代码是参照网上老大以及查看dojo1.5原包之中的例子

Dojo学习之环境搭建

猜你在找的Dojo相关文章