当前位置 : 主页 > 网页制作 > Dojo >

Dojo学习笔记（十三）：Dojo表单控件――TextBox及其变体

来源：互联网 收集：自由互联 发布时间：2021-06-15
1、通用方法 dijit/form/TextBox ：一个基本的文本框 dijit/form/SimpleTextarea ：大量文字输入，一个基本的textarea dijit/form/Textarea ：一个扩展dijit/form/SimpleTextarea动态增加或减少其高度 dijit/form/

1、通用方法

dijit/form/TextBox ：一个基本的文本框

dijit/form/SimpleTextarea ：大量文字输入，一个基本的textarea

dijit/form/Textarea ：一个扩展dijit/form/SimpleTextarea动态增加或减少其高度

dijit/form/NumberTextBox或dijit/form/NumberSpinner：输入是数字，确保输入一个文本框，dijit/form/NumberSpinner提供扩展dijit/form/NumberTextBox逐步改变值的按钮

dijit/form/DateTextBox ：输入是日期，一个文本框，其中包括一个弹出日历

dijit/form/TimeTextBox ：输入是时间，一个文本框，其中包括一个弹出时间选择器

dijit/form/CurrencyTextBox ：输入是货币，一个扩展dijit/form/NumberTextBox本地化货币

dijit/form/ValidationTextBox：一个基本的验证能力，可以进一步定制

    如果你要使用dijit/form/DateTextBox或dijit/form/TimeTextBox ，你将需要有主题的CSS引入并设置body元素的css样式。

--申明方式：

<!DOCTYPE html>
<html >
<head>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src='dojo/dojo.js'></script>
    <script>
        require(["dojo/parser", "dijit/form/TextBox","dojo/domReady!"]);
    </script>
    <title>TextBox</title>
</head>
<body class="claro">
<label for="firstname">Auto-trimming, Proper-casing Textbox:</label>
<input type="text" name="firstname" value="testing testing"
       data-dojo-type="dijit/form/TextBox"
       data-dojo-props="trim:true, propercase:true" id="firstname" />
</body>
</html>

结果：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1953201500-1.png" title="快照1.jpg" alt="wKiom1RSXG2TsHeyAACiYxAEI2Q870.jpg" d="3714157" s="71e_3ab" t="jpg">

--编程方式

<!DOCTYPE html>
<html >
<head>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src='dojo/dojo.js'></script>
    <script>
        require(["dijit/form/TextBox", "dojo/domReady!"], function(TextBox){
            var myTextBox = new dijit.form.TextBox({
                name: "firstname",
                value: "" /* no or empty value! */,
                placeHolder: "type in your name"
            }, "firstname");
        });
    </script>
    <title>TextBox</title>
</head>
<body class="claro">
<input id="firstname" />
</body>
</html>

结果：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1953201500-1.png" title="快照2.jpg" alt="wKioL1RSXWPwpyqlAACGmVPtBtk042.jpg" d="3714158" s="326_506" t="jpg">

    注意：placeHolder和value属性的区别，placeHolder在输入框处入焦点时文字会消失，而value不会。

--使用set()方法和get()方法：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src='dojo/dojo.js'></script>
    <script>
        require(["dojo/parser", "dijit/registry", "dojo/on", "dijit/form/TextBox", "dojo/domReady!"],
                function (parser, registry, on) {
                    parser.parse();
                    var box0 = registry.byId("value0Box");
                    var box1 = registry.byId("value1Box");
                    box1.set("value", box0.get("value") + " modified");
                    on(box0, "change", function () {
                        box1.set("value", box0.get("value") + " modified");
                    });
                });
    </script>
    <title>TextBox</title>
</head>
<body class="claro">
<label for="value0Box">A textbox with a value:</label>
<input id="value0Box" data-dojo-type="dijit/form/TextBox"
       value="Some value"
       data-dojo-props="intermediateChanges:true"></input>
<br>
<label for="value1Box">A textbox set with a value from the above textbox:</label>
<input id="value1Box"
       data-dojo-type="dijit/form/TextBox"></input>
<br>
</body>
</html>


--综合应用：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src='dojo/dojo.js'></script>
    <script>
        // load requirements for declarative widgets in page content
        require(["dijit/form/NumberTextBox", "dijit/form/CurrencyTextBox", "dijit/form/TimeTextBox", "dijit/form/DateTextBox", "dojo/domReady!"], function (NumberTextBox, CurrencyTextBox, TimeTextBox, DateTextBox) {
            var number = new NumberTextBox({
                value: 54,
                required: true
            }, "number");
            number.startup();
            var currency = new CurrencyTextBox({
                value: 54775.53,
                required: true,
                constraints: {fractional: true},
                currency: "CNY",
                invalidMessage: "无效值."
            }, "currency");
            currency.startup();
            var time = new TimeTextBox({
                constraints: {
                    timePattern: "HH:mm:ss",
                    clickableIncrement: "T00:15:00",
                    visibleIncrement: "T00:15:00",
                    visibleRange: "T01:00:00"
                },
                invalidMessage: "Invalid time."
            }, "time");
            time.startup();
            var date = new DateTextBox({
                value: new Date(2011, 8, 15)
            }, "date");
            date.startup();
        });
    </script>
    <title>TextBox</title>
</head>
<body class="claro">
<h1>dijit/form/NumberTextBox, dijit/form/CurrencyTextBox, dijit/form/TimeTextBox, dijit/form/DateTextBox</h1>
<div>
    <label for="number">Age:</label>
    <input id="number">
</div>
<div>
    <label for="currency">Annual Salary:</label>
    <input id="currency">
</div>
<div>
    <label for="time">Start Time:</label>
    <input id="time">
</div>
<div>
    <label for="date">Start Date:</label>
    <input id="date">
</div>
</body>
</html>

结果:

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1953201500-1.png" title="快照3.jpg" alt="wKiom1RU-93B6k7HAAITvGdvWVc441.jpg" d="3714159" s="dfd_0f0" t="jpg">



2、 dijit/form/ValidationTextBox

    Extends: dijit/form/TextBox，利用required属性指定字段必填，regExp属性指定字段验证规则。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: ValidateTextBox</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
    <style type="text/css">
        label {
            display: inline-block;
            width: 140px;
        }
    </style>
    <script>
        require(["dojo/parser", "dijit/form/ValidationTextBox"]);
    </script>
</head>
<body class="claro">
<label for="zip">Also 5-Digit U.S. Zipcode only:</label>
<input type="text" id="zip" name="zip" value="00000" required="true"
       data-dojo-type="dijit/form/ValidationTextBox"
       data-dojo-props="regExp:'\\d{5}', invalidMessage:'Invalid zip code.'" />
</body>
</html>

输出：

650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1953201500-1.png" title="快照12.jpg" alt="wKiom1RXNKeAnd1pAACW-c2Gpkc756.jpg" d="3714160" s="cf5_db6" t="jpg">


3、 dijit/form/ComboBox

    Extends: dijit/form/ValidationTextBox, dijit/form/ComboBoxMixin。ComboxBox包含可选值的下拉列表，另外还可以手工输入。

属性 属性类别 描述 autoComplete Boolean
true 判断是否自动完成用户输入的内容。当值为真时，用户输入部分字符串，ComboBox widget 会把能匹配上的可选值列出，如果光标离开此 widget，会显示第一个匹配的选项值。 hasDownArrow Boolean
true 判断是否现实下拉按钮。 ignoreCase Boolean
true 判断是否忽略大小写（针对英文的输入）。 pageSize Integer
Infinity 此属性可以设置下拉列表显示的条数，如果出现多页的情况，会在下拉列表中显示” Previous choices ”和” More choices ”按钮。用户可以通过点击这两个按钮来查找选项。 query Object
{} 设置查询表达式以过滤’ store ’里的选项。 searchAttr String
name 设置查找的匹配表达式 searchDelay boolean
true 当用户输入内容后到 Dojo 开始查找用户输入值的匹配项之间的间隔时间。 store Object 数据提供对象的一个引用。 .Dijit 中一般应用 JSON 格式的数据。

--编程方式样例：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: ComboBox</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
    <style type="text/css">
        label {
            display: inline-block;
            width: 140px;
        }
    </style>
    <script>
        require([
            "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"
        ], function(Memory, ComboBox){
            var stateStore = new Memory({
                data: [
                    {name:"Alabama", id:"AL"},
                    {name:"Alaska", id:"AK"},
                    {name:"American Samoa", id:"AS"},
                    {name:"Arizona", id:"AZ"},
                    {name:"Arkansas", id:"AR"},
                    {name:"Armed Forces Europe", id:"AE"},
                    {name:"Armed Forces Pacific", id:"AP"},
                    {name:"Armed Forces the Americas", id:"AA"},
                    {name:"California", id:"CA"},
                    {name:"Colorado", id:"CO"},
                    {name:"Connecticut", id:"CT"},
                    {name:"Delaware", id:"DE"}
                ]
            });
            var comboBox = new ComboBox({
                id: "stateSelect",
                name: "state",
                value: "California",
                store: stateStore,
                searchAttr: "name"
            }, "stateSelect");
        });
    </script>
</head>
<body class="claro">
<input id="stateSelect">
<p><button onClick="alert(dijit.byId('stateSelect').get('value'))">Get value</button></p>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: ComboBox</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
    <style type="text/css">
        label {
            display: inline-block;
            width: 140px;
        }
    </style>
    <script>
        require(["dojo/parser", "dijit/form/ComboBox"]);
    </script>
</head>
<body class="claro">
<select data-dojo-type="dijit/form/ComboBox" id="fruit" name="fruit">
    <option>Apples</option>
    <option selected>Oranges</option>
    <option>Pears</option>
</select>
</body>
</html>

--select样例：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: ComboBox</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
    <style type="text/css">
        label {
            display: inline-block;
            width: 140px;
        }
    </style>
    <script>
        require(["dojo/parser", "dijit/form/ComboBox", "dojo/store/Memory"]);
    </script>
</head>
<body class="claro">
<div data-dojo-type="dojo/store/Memory"
     data-dojo-id="stateStore"
     data-dojo-props="data: [{id: 'y', name: 'yes'}, {id: 'n', name: 'no'}]"></div>
<input data-dojo-type="dijit/form/ComboBox"
       value="yes"
       data-dojo-props="store:stateStore, searchAttr:'name'"
       name="state"
       id="stateInput"/>
</body>
</html>
上一篇：Dojo Deferreds 和 Promises
下一篇：学习dojo Deferred
网友评论
相关栏目
最近更新
热门文章