dojo常用组件案例

dojo作为一个JavaScript框架,使用量个人感觉很少,使用文档也不想jQuery那样全面。最近在做政府项目时,调用政府的本地地图,要用arcgis api for js,而arcgis for js就是建立在dojo上开发的。于是研究了一下dojo。。。

上代码:

    <!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="[email protected]"  
                                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>  
关于dojo toolkit可以上官网下载,我的版本比较低1.5,新版本写法可能不一样。

猜你喜欢

转载自blog.csdn.net/qq_35372414/article/details/80321930