dojo1.7翻译 Dijit的主题，按钮和文本框(Dijit Themes, Buttons, and Textboxes)

thoughtfly

浏览: 686430 次
性别:
来自: 合肥

最近访客更多访客>>

exe19

qh529

二冲2010

a1002323289

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Dojo

在本教程中，我们将向您介绍使用Dijit创建和使用简单的表单元素，包括如何为你的web应用设置dijit主题。

难度：初级

Dojo的版本：1.7

介绍

Dijit是Dojo工具包的UI框架，包含一套完整的小部件，可以帮助您快速开发Web应用程序。大多数Web应用程序的核心是表单元素的简单部件，并且判断着是否允许用户输入。Dijit的有很多的部件可以让你的基于表单快速开发，其中包括按钮，文本框，验证的文本框，选择器，滑块等。

此外，Dijit还有主题化框架。如果需要对所有dijit进行视觉方面外观调整，你可以定义详细的主题内容。主题化是简单易用的。Dijit有四个主题可供选择：Claro, Tundra, Soria, Nihilo。

使用Dijit的主题

使用dijit主题，还需要两件事：引入主题的CSS文件，在你的页面上对body元素加入CSS样式名，像这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello Dijit!</title>
    <!-- load Dojo -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
</head>
<!-- set the claro class on our body element -->
<body class="claro">
    <h1 id="greeting">Hello</h1>
</body>
</html>

主题的CSS文件应该在加载dojo.js之前就引入。

要为主题是claro ， tundra ， soria和nihilo的每个元素都加上实际的CSS类名才会使页面上的所有dijit部件是一致风格。一个典型做法就是在页面的body元素上设置主题样式就行了。

您可以使用div块级元素限制dijit主题只对一个页面的一小部分有效;但是，记住，如果没有在body上设置css，那么任何弹出的部件（或部件，如使用弹出dijit/form/ComboButton dijit/form/DropDownButton ， dijit/form/Select Dijit dijit/form/Select ）创建和放置弹出的DOM结构直接子元素，将不会应用到你的主题。

现在，我们已经建立了一个典型的Dijit基本页面，让我们继续前进，开始创建我们想使用的表单控件。

Dijit的按钮

一个按钮可能在是任何页面中都是最基本的部件，作用于用户输入，允许用户触发的动作，如提交表单或表单上的重置值等。 Dijit的实现很简单：

<body class="claro">
    <button id="btn" data-dojo-type="dijit.form.Button"
        data-dojo-props="
            onClick:function(){ console.log('First button was clicked!'); }">
        Click Me!
    </button>
    <script>
        // load requirements for declarative widgets in page content
        require(["dijit/form/Button", "dojo/parser", "dojo/domReady!"]);
    </script>
</body>

不要忘记：如果您使用dojo的部件，确保data-dojo-config属性页上的dojo.js上添加"parseOnLoad: true"的脚本标记。此外，如果你打算在代码中进行解析时，则要明确require(["dojo/parser"])。

正如你可以看到，创建dijit/form/Button 是非常简单的，非常像一个普通的HTML button元素。 Dijit的按钮也支持图像标签，甚至单独的图像像这样：

<body class="claro">
    <button id="btn2" data-dojo-type="dijit.form.Button"
        data-dojo-props="
            iconClass:'dijitIconNewTask',
            showLabel:false,
            onClick:function(){ console.log('Second button was clicked!'); }">
        Click Me!
    </button>
    <script>
        // load requirements for declarative widgets in page content
        require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"]);
    </script>
</body>

运行示例

上面的例子中的属性：

iconClass ：表示CSS类使用（适用于图像）
showLabel ：决定是否显示任何按钮上的文字
title ：设置上呈现的DOM节点的widget的HTML title属性的值
label ：表明按钮标签的内容;声明，这是内容（通过指定innerHTML代表widget的元素）

当使用 dijit/form/Button （或dijit/form/Form ），你可以添加type:"submit"或type:"reset"的按钮的属性（通过data-dojo-props声明，或通过在对象的构造，编程）来实现相同类型的HTML按钮。

最简单的用法dijit/form/Button，指定type:"button"也是建议使用的很好的做法，，默认的情况下，该按钮将默认其类型submit。

Dijit的还包括其他三个按钮控件：

dijit/form/ToggleButton ：一个按钮，有开/关状态
dijit/form/DropDownButton当点击按钮显示一个弹出的窗口小部件（如菜单）
dijit/form/ComboButton ：像dijit/form/Button和 dijit/form/DropDownButton的混合体，当点击下拉区域，可以显示一个弹出窗口部件号

下面的例子显示在行动这三个部件：

<body class="claro">
    <button id="toggle" data-dojo-type="dijit.form.ToggleButton"
        data-dojo-props="iconClass:'dijitCheckBoxIcon', checked:true">
        Toggle
    </button>
 
    <div id="combo" data-dojo-type="dijit.form.ComboButton"
        data-dojo-props="
            optionsTitle:'Save Options',
            iconClass:'dijitIconFile',
            onClick:function(){ console.log('Clicked ComboButton'); }">
        <span>Combo</span>
        <div id="saveMenu" data-dojo-type="dijit.Menu">
            <div data-dojo-type="dijit.MenuItem"
                data-dojo-props="
                    iconClass:'dijitEditorIcon dijitEditorIconSave',
                    onClick:function(){ console.log('Save'); }">
                Save
            </div>
            <div data-dojo-type="dijit.MenuItem"
                data-dojo-props="onClick:function(){ console.log('Save As'); }">
                Save As
            </div>
        </div>
    </div>
 
    <div id="dropDown" data-dojo-type="dijit.form.DropDownButton"
        data-dojo-props="iconClass:'dijitIconApplication'">
        <span>DropDown</span>
        <div data-dojo-type="dijit.TooltipDialog">
            This is a TooltipDialog. You could even put a form in here!
        </div>
    </div>
 
    <script>
        // load requirements for declarative widgets in page content
        require(["dijit/form/ToggleButton", "dijit/form/ComboButton", "dijit/Menu", "dijit/MenuItem", "dijit/form/DropDownButton", "dijit/TooltipDialog", "dojo/parser"]);
    </script>
</body>

注意弹出的部件， dijit/form/ComboButton dijit/form/DropDownButton和 dijit/Menu dijit/TooltipDialog dijit/ColorPalette一样都是弹出框式的

Dijit的TextBox系列

没有基本的用户输入的UI工具包将是不完整的，Dijit也不例外。在dijit/form的命名空间内，有一些基础的部件，每一个都具有特定用途：

dijit/form/TextBox ：一个基本的文本框
dijit/form/SimpleTextarea ：大量文字输入，一个基本的textarea
dijit/form/ValidationTextBox文本框，一个基本的验证能力，可以进一步定制
dijit/form/NumberTextBox ：确保输入一个文本框，是数字
dijit/form/DateTextBox ：一个文本框，其中包括一个弹出日历
dijit/form/TimeTextBox ：一个文本框，其中包括一个弹出时间选择器
dijit/form/CurrencyTextBox ：一个扩展dijit/form/NumberTextBox本地化货币
dijit/form/NumberTextBox dijit/form/NumberSpinner提供扩展dijit/form/NumberTextBox逐步改变值的按钮
dijit/form/Textarea ：一个扩展dijit/form/SimpleTextarea动态增加或减少其高度

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

在接下来的例子中，我们创建的实例dijit/form/TextBox和dijit/form/SimpleTextarea 。

<body class="claro">
    <div>
        <label for="text">Name:</label>
        <input id="text" data-dojo-type="dijit.form.TextBox"
            data-dojo-props="placeHolder:'Enter text here.'">
    </div>
    <div>
        <label for="textarea">Description:</label>
        <textarea id="textarea" rows="5" cols="50"
            data-dojo-type="dijit.form.SimpleTextarea"
            data-dojo-props="
                onFocus:function(){ console.log('textarea focus handler') },
                onBlur:function(){ console.log('textarea blur handler') },
                selectOnClick:true
        ">This is a sample SimpleTextarea.</textarea>
    </div>
    <script>
        // load requirements for declarative widgets in page content
        require(["dijit/form/TextBox", "dijit/form/SimpleTextarea", "dojo/parser", "dojo/domReady!"]);
    </script>
</body>

运行示例

下面的例子演示了基本功能dijit/form/NumberTextBox dijit/form/CurrencyTextBox dijit/form/TimeTextBox dijit/form/DateTextBox 。

<body class="claro">
    <div>
        <label for="number">Age:</label>
        <input id="number" type="text" value="54" required="true" data-dojo-type="dijit.form.NumberTextBox">
    </div>
    <div>
        <label for="currency">Annual Salary:</label>
            <input id="currency" value="54775.53" required="true"
                data-dojo-type="dijit.form.CurrencyTextBox"
                data-dojo-props="
                    constraints:{fractional:true},
                    currency:'USD',
                    invalidMessage:'Invalid amount. Cents are mandatory.'">
    </div>
    <div>
        <label for="time">Start Time:</label>
        <input id="time" required="true"
            data-dojo-type="dijit.form.TimeTextBox"
            data-dojo-props="
                constraints: {
                    timePattern: 'HH:mm:ss',
                    clickableIncrement: 'T00:15:00',
                    visibleIncrement: 'T00:15:00',
                    visibleRange: 'T01:00:00'
                },
                invalidMessage:'Invalid time.'">
    </div>
    <div>
        <label for="date">Start Date:</label>
            <input id="date" value="2011-09-15" data-dojo-type="dijit.form.DateTextBox">
    </div>
    <script>
        // load requirements for declarative widgets in page content
        require(["dijit/form/NumberTextBox", "dijit/form/CurrencyTextBox", "dijit/form/TimeTextBox", "dijit/form/DateTextBox", "dojo/domReady!", "dojo/parser"]);
    </script>
</body>

运行示例

同样，如果你要定义你的部件，不要忘记dojo/parser ，并添加“parseOnLoad：true”到标记data-dojo-config的脚本dojo.js 。

结论

在本教程中，我们已经向您展示如何Dijit的为您提供了许多功能：两个基本输入任何类型的按钮和文本框。此外，我们已经向您展示包括一个基于CSS的主题，使你的用户界面既美观又实用的技术。

0
顶

0
踩

分享到：

dojo1.7翻译数组工具(Arrays Made Eas ... | dojo1.7翻译动画效果(Animations)

2012-05-03 15:52
浏览 2192
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论