dijit控件(二)

学习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>&nbsp;</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>

 

你可能感兴趣的:(JIT)