当前位置: 代码迷 >> Web前端 >> Dojo学习之环境筹建
  详细解决方案

Dojo学习之环境筹建

热度:124   发布时间:2012-11-16 14:12:15.0
Dojo学习之环境搭建


?公司决定使用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原包之中的例子.

?