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

Dojo 前端之家
前端之家收集整理的这篇文章主要介绍了Dojo学习笔记（十二）：Dojo表单控件――Button及其变体，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1、主题

Dijit有四个主题可供选择： Claro,Tundra,Soria和Nihilo。

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

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="utf-8">
<title>HelloDijit!</title>
<!--loadDojo-->
<linkrel="stylesheet"href="dojo/dijit/themes/claro/claro.css">
</head>
<!--settheclaroclassonourbodyelement-->
<bodyclass="claro"><h1id="greeting">Hello</h1></body>
</html>

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

2、dijit/form/Button

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

--申明方式创建Button：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title></title>
<scripttype="text/javascript">
require(["dijit/form/Button","dojo/parser","dojo/domReady!"]);
</script>
</head>
<bodyclass="claro">
<buttonid="btn"data-dojo-type="dijit/form/Button"
data-dojo-props="onClick:function(){console.log('Firstbuttonwasclicked!');}">ClickMe!
</button>
</body>
</html>

--编程方式创建Button：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title></title>
<scripttype="text/javascript">
require(["dijit/form/Button","dojo/domReady!"],function(Button){
varbutton=newButton({
label:"ClickMe!",onClick:function(){
console.log("Firstbuttonwasclicked!");
}
},"btn");
button.startup();
});
</script>
</head>
<bodyclass="claro">
<buttonid="btn">
ClickMe!
</button>
</body>
</html>

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


2.1 label属性：String

用于在标记中或通过编程方式为按钮指定标签。

2.2 showLabel属性：Boolean

表示是否在Button部件中显示文本标签的值，默认值为true

2.3 iconClass属性：String

用于为Button指定一个关联图像的CSS类，并不是使用一个图标来代替整个按钮，而是将图标嵌入到按钮中。如果同时阿牛指定了label属性且showLabel为true的话，图标和标签会同时显示。

2.4 onClick(event)事件

在用户单机按钮时调用。

2.5 setLabel(content)方法

改变Button标签值。


--样例：图标改变

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<styletype="text/css">
.btn_iconClass{
background-image:url("image/sign_in.png");
background-repeat:no-repeat;
width:30px;
height:30px;
}
.btn_iconClassClicked{
background-image:url("image/sign_out.png");
background-repeat:no-repeat;
width:30px;
height:30px;
}
</style>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title></title>
<scripttype="text/javascript">
require(["dijit/form/Button",iconClass:"btn_iconClass","btn");
button.startup();
});
vartoggled=false;
functiontoggle(){
myToggleButton.set("iconClass",toggled?"btn_iconClass":"btn_iconClassClicked");
toggled=!toggled;
}
</script>
</head>
<bodyclass="claro">
<buttonid="btn">
ClickMe!
</button>
<buttontype="reset"data-dojo-type="dijit/form/Button"data-dojo-id="myToggleButton"data-dojo-props="iconClass:'btn_iconClass',showLabel:false"onclick="toggle();">重置</button>
</body>
</html>

输出结果：

wKiom1RPcsOwBNJwAABLoc91070725.jpg

wKioL1RPcxrS2PFUAABLzMWg5qU897.jpg

3、dijit/form/ToggleButton

继承自 dijit/form/Button,dijit/form/_ToggleButtonMixin，并未按钮添加了开/关功能，就像RadioButton和CheckBox一样，通过checked属性来实现。

事实上，工具栏上用于格式化文本的按钮，如斜体、粗体等，都使用ToggleButton。

--声明方式：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>ToogleButton</title>
<scripttype="application/javascript">
require(["dojo/parser","dijit/form/ToggleButton","dojo/domReady!"]);
</script>
</head>
<bodyclass="claro">
<buttondata-dojo-type="dijit/form/ToggleButton"data-dojo-props="iconClass:'dijitCheckBoxIcon',checked:true">
Toggleme
</button>
</body>
</html>

--编程方式：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>ToogleButton</title>
<scripttype="application/javascript">
require(["dijit/form/ToggleButton",function(ToggleButton){
newToggleButton({
showLabel:true,checked:false,onChange:function(val){
this.set('label',val);
},label:"按钮标签"
},"programmatic");
});
</script>
</head>
<bodyclass="claro">
<buttonid="programmatic"></button>
</body>
</html>

4、dijit/form/CheckBox

Extends: dijit/form/ToggleButton,dijit/form/_CheckBoxMixin，直接扩展了ToggleButton，是普通<input type="checkBox">元素的替代部件。

--声明方式：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>CheckBox</title>
<scripttype="application/javascript">
require(["dojo/parser","dijit/form/CheckBox"]);
</script>
</head>
<bodyclass="claro">
<inputid="checkBox"name="MyCheckBox"data-dojo-type="dijit/form/CheckBox"value="agreed"checked="false"onChange="alert('onChangecalledwithchecked='+this.checked+',andwidgetgetValue()='+this.getValue())"/>Iagree
</body>
</html>

--编程方式：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>CheckBox</title>
<scripttype="application/javascript">
require(["dijit/form/CheckBox",function(CheckBox){
varcheckBox=newCheckBox({
name:"MyCheckBox",value:"agreed",onChange:function(b){
alert('onChangecalledwithchecked='+this.checked+',andwidgetgetValue()='+this.getValue());
}
},"checkBox");
});
</script>
</head>
<bodyclass="claro">
<inputid="checkBox"/>Iagree
</body>
</html>

5、dijit/form/RadioButton

Extends: dijit/form/CheckBox,dijit/form/_RadioButtonMixin，组织成一组（name属性值决定），每次只能选择其中一个。

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>RadioButton</title>
</head>
<bodyclass="claro">
<formid="myform">
<inputtype="radio"name="drink"data-dojo-type="dijit/form/RadioButton"id="radioOne"value="tea"/>Tea<br/>
<inputtype="radio"name="drink"data-dojo-type="dijit/form/RadioButton"id="radioTwo"value="coffee"/>Coffee<br/>
<inputtype="radio"name="drink"data-dojo-type="dijit/form/RadioButton"id="radioThree"value="milk"/>milk<br/>
</form>
</body>
</html>

输出结果：

wKiom1RRy2-yEYr0AAAVDRWLkbc184.jpg

--事件绑定：

<!DOCTYPEhtml>
<html>
<head>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<script>dojoConfig={parSEOnLoad:true}</script>
<scriptsrc='dojo/dojo.js'></script>
<script>
require(["dijit/form/RadioButton","dojo/on","dijit/registry",function(RadioButton,on,registry,parser){
parser.parse();
on(document.getElementById("summaryBtn"),"click",function(evt){
vartoppings=[];
if(registry.byId("topping1").get("checked")){
toppings.push(registry.byId("topping1").get("value"));
}
if(registry.byId("topping2").get("checked")){
toppings.push(registry.byId("topping2").get("value"));
}
if(registry.byId("topping3").get("checked")){
toppings.push(registry.byId("topping3").get("value"));
}
alert("Topping:"+toppings.join(","));
});
});
</script>
<title>RadioButton</title>
</head>
<bodyclass="claro">
<h2>dijit/form/RadioButtonvaluesetters</h2>
<h3>PizzaToppings</h3>
<ulstyle="list-style-type:none">
<li>
<inputid="topping1"type="radio"name="topping"value="anchovies"checked
data-dojo-type="dijit.form.RadioButton">
<labelfor="topping1">Anchovies</label>
</li>
<li>
<inputid="topping2"type="radio"name="topping"value="olives"
data-dojo-type="dijit.form.RadioButton">
<labelfor="topping2">Olives</label>
</li>
<li>
<inputid="topping3"type="radio"name="topping"value="pineapple"
data-dojo-type="dijit.form.RadioButton">
<labelfor="topping3">Pineapple</label>
</li>
</ul>
<buttonid="summaryBtn">WhichToppings?</button>
</body>
</html>


6、dijit/form/DropDownButton

Extends: dijit/form/Button,dijit/_Container,dijit/_HasDropDown。

--声明方式：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>DropDownButton</title>
<scripttype="application/javascript">
require(["dojo/parser","dijit/form/DropDownButton","dijit/form/TextBox","dijit/TooltipDialog","dijit/form/Button"]);
</script>
</head>
<bodyclass="claro">
<divdata-dojo-type="dijit/form/DropDownButton">
<span>Register</span>
<divdata-dojo-type="dijit/TooltipDialog">
<labelfor="name">Name:</label><inputdata-dojo-type="dijit/form/TextBox"id="name"name="name"><br>
<labelfor="hobby">Hobby:</label><inputdata-dojo-type="dijit/form/TextBox"id="hobby"name="hobby"><br>
<buttondata-dojo-type="dijit/form/Button"type="submit">Save</button>
</div>
</div>
</body>
</html>

输出结果：

wKioL1RR-HSz8bx9AABG7cm0UAg371.jpg


--编程方式：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>DropDownButton</title>
<scripttype="application/javascript">
require(["dijit/form/DropDownButton","dijit/DropDownMenu","dijit/MenuItem","dojo/dom",function(DropDownButton,DropDownMenu,MenuItem,dom){
varmenu=newDropDownMenu({style:"display:none;"});
varmenuItem1=newMenuItem({
label:"Save",iconClass:"dijitEditorIcondijitEditorIconSave",onClick:function(){alert('save');}
});
menu.addChild(menuItem1);
varmenuItem2=newMenuItem({
label:"Cut",iconClass:"dijitEditorIcondijitEditorIconCut",onClick:function(){alert('cut');}
});
menu.addChild(menuItem2);
varbutton=newDropDownButton({
label:"hello!",name:"programmatic2",dropDown:menu,id:"progButton"
});
dom.byId("dropDownButtonContainer").appendChild(button.domNode);
});
</script>
</head>
<bodyclass="claro">
<divid="dropDownButtonContainer"></div>
</body>
</html>

输出结果：

wKioL1RR-KCTEtdJAAAeq9j9YY4952.jpg

--典型应用：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>DropDownButton</title>
<scripttype="application/javascript">
require(["dojo/parser","dijit/form/Button"]);
</script>
</head>
<bodyclass="claro">
<buttondata-dojo-type="dijit/form/DropDownButton">
<span>Save...</span>
<divdata-dojo-type="dijit/Menu">
<divdata-dojo-type="dijit/MenuItem"label="Save">
<scripttype="dojo/method"event="onClick"args="evt">
console.log("youclicked",this.label);
</script>
</div>
<divdata-dojo-type="dijit/MenuItem"label="Saveas...">
<scripttype="dojo/method"event="onClick"args="evt">
console.log("youclicked",this.label);
</script>
</div>
<divdata-dojo-type="dijit/MenuItem"label="SavetoFTP...">
<scripttype="dojo/method"event="onClick"args="evt">
console.log("youclicked",this.label);
</script>
</div>
</div>
</button>
</body>
</html>

输出：

wKiom1RSJ_Xz7wgrAAAwu8hO_WM363.jpg


7、dijit/form/ComboButton

Extends: dijit/form/DropDownButton。

像dijit/form/Button和 dijit/form/DropDownButton的混合体，在按钮上提供了专门的区域，单击该区域才能出现下拉菜单；如果单机按钮上的“其他”区域，那么会执行默认操作。

--声明方式：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>ComboButton</title>
<scripttype="application/javascript">
require(["dojo/parser","dijit/form/ComboButton","dijit/MenuItem"]);
</script>
</head>
<bodyclass="claro">
<divdata-dojo-type="dijit/form/ComboButton"data-dojo-props="onClick:function(){console.log('Hi,Save!')}">
<span>Save</span>
<divdata-dojo-type="dijit/DropDownMenu">
<divdata-dojo-type="dijit/MenuItem"data-dojo-props="onClick:function(){console.log('Save!')}">Save</div>
<divdata-dojo-type="dijit/MenuItem"data-dojo-props="onClick:function(){console.log('Saveas..')}">Saveas..</div>
</div>
</div>
</body>
</html>

--编程方式：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>ComboButton</title>
<scripttype="application/javascript">
require(["dijit/Menu",function(Menu,ComboButton){
varmenu=newMenu({style:"display:none;"});
varmenuItem1=newMenuItem({
label:"Save",onClick:function(){
alert('hi，Save');
}
});
menu.addChild(menuItem1);
varmenuItem2=newMenuItem({
label:"Saveas..",onClick:function(){
alert('hi,Saveas..');
}
});
menu.addChild(menuItem2);
varbutton=newComboButton({
label:"Save",onClick:function(){
alert('Save!');
}
});
button.placeAt(dojo.body());
});
</script>
</head>
<bodyclass="claro">
</body>
</html>

--特定应用：

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>ComboButton</title>
<scripttype="application/javascript">
require(["dijit/Menu","dojo/domReady!"]);
</script>
</head>
<bodyclass="claro">
<buttondata-dojo-type="dijit/form/ComboButton">
<span>Save</span>
<scripttype="dojo/method"event="onClick"args="evt">
console.log("youclickedthebuttonitself");
</script>
<divname="foo"data-dojo-type="dijit/Menu">
<divdata-dojo-type="dijit/MenuItem"label="Save">
<scripttype="dojo/method"event="onClick"args="evt">
console.log("youclicked",this.label);
</script>
</div>
<divdata-dojo-type="dijit/MenuItem"label="SaveAs...">
<scripttype="dojo/method"event="onClick"args="evt">
console.log("youclicked",this.label);
</script>
</div>
</div>
</button>
</body>
</html>
原文链接：https://www.f2er.com/dojo/291111.html

猜你在找的Dojo相关文章

dojo/Deferred类和dojo/promise类的使用
参考博客：https://blog.csdn.net/blog_szhao/article/details/50220181 　　　       ...
设置查询以搜索dojo数据网格的所有字段
我有一个包含多个字段的Dojo DataGrid.我目前正在设置查询一次搜索一个字段,如下所示： gr...
dojo – 为JsonRestStore设置HTTP Accept标头
我正在使用JsonRestStore,但想为它添加一个自定义Accept标头.最好的方法是什么？ 这与diji...
dojo.query不适用于包含波形符(〜)字符的属性选择器
我需要选择一个给定其URL的链接节点.使用属性选择器的效果非常好,除了少数几个url有tilda的...
带有JSONREST问题的Dojo增强型网格
我正在尝试使用Dojo JSONREST的增强网格,我遇到了一些问题. 我一直在寻找一些例子,但无法弄...
什么时候会发布Dojo 2.0？
我使用过Dojo 1.0,但我有一些与版本相关的问题： >什么时候会发布Dojo 2.0？ >也是最...
dojo中的setSelected()DataGrid使前一个选择活动,即使对于带有selectionMode =“single”的网格也是如此
我有一个dojox.grid.DataGrid,我想以编程方式选择一行.我正在使用setSelected()这样做,它第...
dojo – 如何从dijit.form.Select中获取选项文本？
我的页面上有一个dijit.form.Select： <c:set var="qualId" value="${prev...
如何检查dojo.datagrid加载完成？
参见英文答案 > How to determine if a dojo grid has finished loading?       ...
dojo – 扩展dijit.Tree中的所有节点
有没有一种很好的方法来扩展/关闭dijit.Tree中的所有可扩展节点？ 对于那些寻找答案的人,请...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作