dijit控件(三)

原创 2013年12月04日 10:08:03

slider

<%@ 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>Dialog Widget Dojo Tests</title>
	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css"/>
	<script type="text/javascript" src="../dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
	<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer

dojo.require("dijit.form.HorizontalSlider");
dojo.require("dijit.form.VerticalSlider");
dojo.require("dijit.form.HorizontalRule");
dojo.require("dijit.form.VerticalRule");
dojo.require("dijit.form.HorizontalRuleLabels");
dojo.require("dijit.form.VerticalRuleLabels");

dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // scan page for widgets

	</script>
</head>
<body class="claro">

		<div id="slider1" data-dojo-type="dijit.form.HorizontalSlider" data-dojo-props='name:"horizontal1",
			onChange:function(val){ alert(val);dojo.byId("slider1input").value=dojo.number.format(val/100,{places:1,pattern:"#%"}); },
			value:10,
			maximum:100,
			minimum:0,
			pageIncrement:100,
			showButtons:true,
			intermediateChanges:true,
			slideDuration:500,
			style:{width:"500px", height:"20px"}
			'>
			<!-- 水平进度条,top刻度,有6个刻度,即就是6竖五段 ,显示的内容是numericMargin(数字)-->
				<ol data-dojo-type="dijit.form.HorizontalRuleLabels" data-dojo-props='container:"topDecoration", style:{height:"1.2em",fontSize:"75%"}, count:6, numericMargin:1'></ol>
			<!-- 下面两个div是现实的是刻度 -->	
				<div data-dojo-type="dijit.form.HorizontalRule" data-dojo-props='container:"topDecoration", count:6, style:{height:"5px"}'></div>
				<div data-dojo-type="dijit.form.HorizontalRule" data-dojo-props='container:"bottomDecoration", count:5, style:{height:"5px"}'></div>
			<!-- 显示的是刻度的内容 -->	
				<ol data-dojo-type="dijit.form.HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em",fontSize:"75%"}'>
					<li>lowest</li>
					<li>normal</li>
					<li>highest</li>
				</ol>
		</div>

		Slider1 Value:<input readonly id="slider1input" size="4" value="10.0%"/>
		
		<p>
		<p>
		<div id="slider2" data-dojo-type="dijit.form.VerticalSlider" data-dojo-props='name:"vertical1",
			onChange:function(val){ dojo.byId("slider2input").value = val; },
			value:10,
			maximum:100,
			minimum:0,
			discreteValues:11,
			style:{height:"300px"}
			'>
				<ol data-dojo-type="dijit.form.VerticalRuleLabels" data-dojo-props='container:"leftDecoration", style:{width:"2em"}, labelStyle:"right:0px;"'>
					<li>0</li>
					<li>100</li>
				</ol>
				<div data-dojo-type="dijit.form.VerticalRule" data-dojo-props='container:"leftDecoration", count:11, style:{width:"5px"}, ruleStyle:"border-color: #888"'></div>
				<div data-dojo-type="dijit.form.VerticalRule" data-dojo-props='container:"rightDecoration", count:11, style:{width:"5px"}, ruleStyle:"border-color: #888"'></div>
				<!-- 用数字显示刻度表示,用6条竖线分为5段 -->
				<ol data-dojo-type="dijit.form.VerticalRuleLabels" data-dojo-props='container:"rightDecoration", style:{width:"2em"}, count:6, numericMargin:1, maximum:100, constraints:{pattern:"#"}'></ol>
		
		
		</div>
		Slider2 Value:<input readonly id="slider2input" size="3" value="10"/>
		<p>
		<p>
		<div id="slider3" data-dojo-type="dijit.form.HorizontalSlider" data-dojo-props='name:"horizontal2",
			title:"Fancy HTML Labels",
			minimum:1,
			value:2,
			maximum:3,
			discreteValues:3,
			showButtons:false,
			intermediateChanges:true,
			slideDuration:0,
			style:"width:300px; height: 40px;"
			'>
				<div data-dojo-type="dijit.form.HorizontalRule" data-dojo-props='container:"bottomDecoration", count:3, style:{height:"5px"}'></div>
				<ol data-dojo-type="dijit.form.HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em", fontSize:"75%"}'>
					<li><img width=10 height=10 src="../images/note.gif"/><br><span style="font-size: small">small</span></li>
					<li><img width=15 height=15 src="../images/note.gif"/><br><span style="font-size: medium">medium</span></li>
					<li><img width=20 height=20 src="../images/note.gif"/><br><span style="font-size: large">large</span></li>
				</ol>
		</div>

</body>
</html>

 

发布信息

<%@ 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>Dialog Widget Dojo Tests</title>
	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css"/>
	<script type="text/javascript" src="../dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
	<script type="text/javascript">
 
 var sub = dojo.subscribe("huang.biao",function(message,para1){
 	alert(message+"----"+para1);
 });
 
 dojo.publish("huang.biao",["param1","param2"]);
		
		
	</script>
</head>
<body class="claro">


</body>
</html>

 

对象切换

<%@ 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>dojo_hitch</title>
	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css"/>
	<script type="text/javascript" src="../dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
	<script type="text/javascript">
 var obj = { 
   name : "Alex", 
   lang : "中文"
 }; 
 /*
 这里的this的值可以看做
 {
 	name:"Alex",
 	lang:"中文",
 }
 */
 var func = dojo.hitch(obj, function() { 
    alert(this.name); 
 }); 
 
 func();
 
 
 function sayHello(to, message) { 
    alert(to + ":" + message + "(" + this.lang + ")"); 
 } 
 /*
 第一个参数:传递的对象,就是这个方法中的this
 第二个参数:这是一个方法,将他作为第一个对象的一个属性
 第三个参数:这个是第二个参数(方法)中的第一个参数值
 */
 var sayHelloToAlex = dojo.hitch(obj, sayHello, "Alex"); 
 //最后弹出信息——Alex:你好(中文)
 sayHelloToAlex("你好!"); 
 
  var tttt = dojo.hitch(obj, sayHello, "Alex","ddd"); 
 tttt();
	</script>
</head>
<body class="claro">

</body>
</html>

 

 

dijit控件入门(一)

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

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
  • 下载

dijit.tree的简单应用实例

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

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

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

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个字)