首页 > 程序开发 > web前端 > JavaScript >

web前端之精通dojo一:创建选项框表单

2016-12-28

web前端之精通dojo一:创建选项框表单。Dijit是建立在Dojo上的小部件系统,可以为你担当重任。小部件,又称Dijit组件,适用于HTML和JavaScript语言建立起的用户界面控件。你可以向HTML标签里添加一个简单的dojoType=属性来创建小部件。

web前端之精通dojo一:创建web表单

Dijit是建立在Dojo上的小部件系统,可以为你担当重任。小部件,又称Dijit组件,适用于HTML和JavaScript语言建立起的用户界面控件。你可以向HTML标签里添加一个简单的dojoType=属性来创建小部件。

安装配置详情

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<script type="text/javascript" src="../../../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true">
</script>
<style type="text/css">
    @import "../../../dojoroot/dijit/themes/tundra/tundra.css";
    @import "../../../dojoroot/dojo/resources/dojo.css";
</style>

<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.DateTextBox");
</script>
<style type="text/css">
.formContainer{
    width: 600px;
    height: 600px;
}
label{
    width: 150px;
    float: left;
}
</style>
</head>
<body class="tundra">
    <div class="formContainer" dojoType="dijit.layout.TabContainer" style="width:600px;height:600px;">
        <div dojoType="dijit.layout.ContentPane" title="Personal Data">
            <label for="first_name">First Name:</label>
            <input type="text" name="first_name" id="first_name" dojoType="dijit.form.ValidationTextBox" trim="true" propercase="true" required="true" size="30" missingMessage="输入firstname"/><br/>
            <label for="last_name">Last Name:</label>
            <input type="text" name="last_name" id="last_name" dojoType="dijit.form.ValidationTextBox" trim="true" propercase="true" required="true" size="30" missingMessage="输入lastname" /><br/>
            <label for="middle_initial">Middle Initial:</label>
            <input type="text" name="middle_initial" id="middle_initial" size="1" /><br/>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" dojoType="dijit.form.ValidationTextBox" size="30" regExp=".*@.*"/><br/>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Address">
            <label for="address_line_1">Address Line 1</label>
            <input type="text" name="address_line_1" id="address_line_1" size="30" /><br/>
            <label for="address_line_2">Address Line 2</label>
            <input type="text" name="address_line_2" id="address_line_2" size="30" /><br/>
            <label for="city">City:</label>
            <input type="text" name="city" id="city" size="30" /><br/>
            <label for="state">State</label>
            <input type="text" name="state" id="state" size="2" /><br/>
            <label for="postal_code">Postal Code:</label>
            <input type="text" name="postal_code" id="postal_code" size="15" /><br/>
            <label for="country">Country</label>
            <input type="text" name="country" id="country" size="30" /><br/>
            <label for="date_move">Date of Move to This Address.</label>
            <input type="text" name="date_move" id="date_move" size="11" dojoType="dijit.form.DateTextBox" /><br/>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Phone">
            <label for="home_phone">Home Phone</label>
            <input type="text" name="home_phone" id="home_phone" size="30" /><br/>
            <label for="work_phone">Work Phone</label>
            <input type="text" name="work_phone" id="work_phone" size="30" /><br/>
            <label for="cell_phone">Cell Phone</label>
            <input type="text" name="cell_phone" id="cell_phone" size="30" /><br/>
        </div>
    </div>

</body>
</html>

dijit.layout.ContentPane组件在内容的周围创建边界,以便纳入其他框里

dijit.layout.TabContainer将ContentPane一个个层叠,用户可以通过顶部的选项卡加以选择

dijit.form.ValidationTextBox对单个表单进行验证:

required=”true”让该字段为必填,当这个字段被留空时,其背景颜色就会变成黄色,来提示这个字段出错了

trim=”true”自动去除输入框中头尾的空格。所以,当你输入一串字符,然后改选其他输入框时,头尾的空格会被删除

propercase=”true”和trim一样,当前输入框发生变化时,首字母变成大写,其他字母变成小写

regExp=”“这里面可以自由地使用JavaScript正则表达式

dijit.form.DateTextBox给文本框添加一个一个弹式的日历选择器

相关文章
最新文章
热点推荐