学生成绩:<span id="tip" ></span>
<hr />
<div id="ss" style="height:400px;width:400px">
</div>
<script>
$("#ss").slider({
mode:"h",
min:0,
max:100,
rule:[0,'|',25,'|',50,'|',75,'|',100],
showTip:true,
value:60
});
$("#ss").slider({
onChange:function(newValue){
if(newValue==60){
$("#tip").text("合格").css("color","yellow");
}else if(newValue==70){
$("#tip").text("中等").css("color","pink");
}else if(newValue==80){
$("#tip").text("良好").css("color","blue");
}else if(newValue==90){
$("#tip").text("优秀").css("color","green");
}
}
})
</script>
6.5 NumberSpinner（数字微调）
数字微调控件的创建是基于微调控件和数值输入框控件的。他可以转换输入的值，比如：数值、百分比、货币等。它也允许使用上/下微调按钮调整到用户的期望值。
商品数量：
<input id="ss" style="width:100px"> <br />
你一共买了<span id="num">1</span>件商品
<script>
$('#ss').numberspinner({
value:1,
min:1,
max:100
});
$('#ss').numberspinner({
onSpinUp:function(){
var value=$("#ss").numberspinner("getValue");
//将当前值设置到span标签
$("#num").text(value).css("color","red");
},
onSpinDown:function(){
var value=$("#ss").numberspinner("getValue");
//将当前值设置到span标签
$("#num").text(value).css("color","red");
}
});
//添加键盘事件
$('#ss').keyup(function(event){
//获取按键的unicode编码
var myevent=event;
var code=myevent.keyCode;
if(code==13){
var value=$(this).val();
//将当前值设置到span标签
$("#num").text(value).css("color","red");
}
});
</script>
七、窗口组件的使用
7.1 Window（窗口）
扩展自$.fn.panel.defaults。使用$.fn.window.defaults重写默认值对象。
窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。
静态方法创建：
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
Window Content
</div>动态创建：
<input type="button" value="打开窗口1" id="open1"/>
<input type="button" value="打开窗口2" id="open2"/>
