滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。
学生成绩:<span ></span> <hr /> <div> </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> <br /> 你一共买了<span>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 title="My Window" data-options="iconCls:'icon-save',modal:true"> Window Content </div>
动态创建：
<input type="button" value="打开窗口1"/> <input type="button" value="打开窗口2"/> <div></div> <div></div> <script> $("#open1").click(function(){ $('#win1').window({ width:600, height:400, modal:false , minimizable :false, maximizable:false, title:"我的窗口" }); }); $("#open2").click(function(){ $('#win2').window({ width:600, height:400, modal:false , minimizable :false, maximizable:false, title:"我的窗口" }); }); </script>
7.2 Dialog（对话框窗口）
该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。
<input type="button" value="打开对话框"/> <div></div> <script> $("#open1").click(function(){ $('#win1').dialog({ width:400, height:400, modal:false , minimizable :false, maximizable:false, title:"我的对话框", toolbar:[ { text:'编辑', iconCls:'icon-edit', handler:function(){alert('edit')} },{ text:'帮助', iconCls:'icon-help', handler:function(){alert('help')} } ], buttons:[ { text:'保存', handler:function(){alert("保存");} },{ text:'关闭', handler:function(){ //关闭对话框 $("#win1").dialog("close"); } } ], href:"/EasyUi/form.html" }); }); </script>
7.3 Messager（消息窗口）
消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。