关闭

dijit控件(三)

270人阅读 评论(0) 收藏 举报

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>

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:282392次
    • 积分:8455
    • 等级:
    • 排名:第2300名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:4条
    最新评论