学习dijit.form.Select控件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dijit.form.Select test</title>
<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Select");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="claro">
使用dijit.form.Select 对象，然后maxHeight:100
<span id="s5" data-dojo-id="s5" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s5", value:"move" , maxHeight:100 '>
<span data-dojo-value="copy"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../dojo/dijit/themes/tundra/images/dndCopy.png" /> Copy</span>
<span data-dojo-value="move"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../dojo/dijit/themes/tundra/images/dndMove.png" /> Move</span>
<span data-dojo-value="nocopy"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../dojo/dijit/themes/tundra/images/dndNoCopy.png" /> No Copy</span>
<span data-dojo-value="nomove"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../dojo/dijit/themes/tundra/images/dndNoMove.png" /> No Move</span>
<span data-dojo-value="long"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../dojo/dijit/themes/tundra/images/dndNoMove.png" /> Very Long Menu Entry</span>
</span>
<p>
让上面的下拉控件失效<br>
<button data-dojo-type="dijit.form.Button" data-dojo-props="type:'button',onClick:function(){s5.set('disabled',!s5.get('disabled'));}">
ToggleButton
</button>
<p>
分组显示下拉列表<br>
<select data-dojo-id="hb" data-dojo-type="dijit.form.Select" data-dojo-props="style:{width:'150px'},required:true,onChange:function(){
if(!this.options[0].value){
this.removeOption(0);
}
}">
<option> </option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option></option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option></option>
<option value="CA">California</option>
</select>
<br>
选择默认值
<br>
<select data-dojo-type="dijit.form.Select" data-dojo-props="value:'CA'">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
<br>
<select data-dojo-id="display_id" data-dojo-type="dijit.form.Select" data-dojo-props="">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ" selected="selected">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
<p>
隐藏下拉列表
<br>
<button data-dojo-type="dijit.form.Button" data-dojo-props="type:'button',onClick:function(){
//display_id._setDisabledAttr(true);
display_id._setStyleAttr('display:none');
}">
_setStyleAttr('display:none')
</button>
<br>
<button data-dojo-type="dijit.form.Button" data-dojo-props="type:'button',onClick:function(){
//display_id._setDisabledAttr(true);
display_id._setStyleAttr('display:block');
}">
_setStyleAttr('display:block')
</button>
</body>
</html>
?
dijit.form.ToggleButton的Demo
?
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.ToggleButton");
dojo.ready(function(){
new dijit.form.ToggleButton({
showLabel:true,//是否显示文字标签
checked:false,
onChange:function(val){this.set('label',val);},
label:"huangbiao"//按钮显示的内容
},"toggle_test");//toggle_test指定的button的id
});
</script>
</head>
<body class="claro">
<button id="toggle_test"></button>
<p>
<button data-dojo-type="dijit.form.ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">
Toggle me
</button>
</body>
</html>
?