加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-16 21:25:36 所属栏目：百科 来源：网络整理
导读：1、主题 Dijit有四个主题可供选择： Claro,Tundra,Soria和Nihilo。 使用dijit主题，还需要两件事：引入主题的CSS文件，在你的页面上对body元素加入CSS样式名。 !DOCTYPEhtmlhtmlheadmetacharset="utf-8"titleHelloDijit!/title!--loadDojo--linkrel="stylesh

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同