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>

 

dijit控件入门(一)

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

Dojo Toolkit 1.2.0: Dojo + Dijit + DojoX

  • 2008年10月31日 11:27
  • 1.63MB
  • 下载

dojo 树形列表 dijit.tree

  • 2009年03月14日 22:57
  • 1.33MB
  • 下载

Dojo 1.6 官方教程: 理解Dijit Widget系统的基础架构

作者: Tom Trenka原文链接: http://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget/译者: feij...

dijit.tree的简单应用实例

近来项目中总部功能有几个关键页面需要用树形结构来展示相关数据,便对dojo中的tree进行了一些应用。Dojo官网上对于dojo.tree(1.7)的介绍止步于基本方法和属性结构的介绍,在http:/...
  • lfsfxy9
  • lfsfxy9
  • 2012年10月30日 22:18
  • 3509

Dijit Tree Example

Dijit Tree Example

开发自己的 Dijit

开发自己的 Dijit

Dijit Editor

Dijit Editor

dijit中边框容器BorderContainer

dijit中边框容器BorderContainer

Dojo,Dijit基本内容总结

dojo.declare dojo.declare在dojo中被广泛使用,理解它将对弄懂dojo的代码有很大帮助。简单的说,dojo.declare提供了一种声明类的方式,通过它可以很方便的扩展其他...
  • pwosboy
  • pwosboy
  • 2011年04月24日 18:33
  • 821
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dijit控件(二)
举报原因:
原因补充:

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