dijit控件(二)

原创 2013年12月04日 10:06:55

学习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>

 

Dojo 输入数值 dijit.form.NumberSpinner

输入整数,可以设定最大值与最小值。 但是不知道如何判定是否合法。
  • lmn13
  • lmn13
  • 2010年06月07日 19:51
  • 1040

dijit/Tree 部件美化

说到美化,无非就是图标、样式等等方面的内容,下面就将就如何替换dijit/Tree部件中的图标: 1.准备样式: .organ_icon {background: url("../images/w...
  • Burongwawa520
  • Burongwawa520
  • 2016年03月07日 17:35
  • 799

dijit控件布局

tab标签布局 Insert title here dojo.require('doh.runner'); dojo.require("dijit...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:07
  • 202

dojo小例子(35)带校验功能SimpleTextarea

//////////////////////// // 带校验功能的SimpleTextarea /////////////////////// define(["dojo/_base/declare...
  • earthhour
  • earthhour
  • 2015年09月05日 10:25
  • 591

dijit.form.NumberTextBox常用操作

只能输入任意长度整数
  • earthhour
  • earthhour
  • 2014年05月05日 13:22
  • 1375

dijit控件入门(一)

dijit是dojo的一套UI控件,可以显示一些控件,下面是form简单的控件入门   dijit ui @import "../dojo/dojo/resourc...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:06
  • 523

dijit控件(三)

slider Dialog Widget Dojo Tests dojo.require("dijit.dijit"); // optimize: ...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:08
  • 318

dijit控件入门(三)

checkbox_radio dojo.require("dijit.form.CheckBox"); dojo.require("dijit.form.Radio...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:07
  • 268

AngularJS介绍

AngularJS   AngularJS是web应用的下一个巨头。   AngularJS如果为创建web应用而设计,那它就是HTML的套路了。具有数据绑定, MVW, MVVM, MV...
  • xiaoyu90520
  • xiaoyu90520
  • 2015年09月08日 14:46
  • 1258

dijit.Dialog样例及其原型关系

Dojo中dijit.Dialog对话框控件由于其良好的设计和封装,得到了很多人的喜爱。而通过继承dijit.Dialog类,我们也可以设计出内在逻辑复杂,功能各异的各种自定义对话框。 本文通过分析...
  • eengel
  • eengel
  • 2011年01月17日 14:41
  • 3279
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dijit控件(二)
举报原因:
原因补充:

(最多只允许输入30个字)