dijit控件（三）
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>