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控件入门(三)

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

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

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

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

dijit控件布局

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

dijit控件入门(一)

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

dijit.form.NumberTextBox常用操作

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

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控件(二)

学习dijit.form.Select控件 dijit.form.Select test dojo.require("dijit.form.Select"); d...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:06
  • 349
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dijit控件(三)
举报原因:
原因补充:

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