本文主要内容是介绍EasyUI的一些常用组件的使用，都是一些非常基础的知识，适合入门者学习，主要包括Base（基础）、Layout(布局）、菜单和按钮、表单、窗口、表格和树等的使用。要求完全掌握这些内容，学会查阅文档，了解开发基本思想。如果想进一步深入学习，可以直接去官网进行学习，查阅文档等http://bo.defaults。使用$.fn.datebox.defaults重写默认值对象。

日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。

日期：

<input id="dd" type="text"></input> <script> $('#dd').datebox({ required:true }); $("#dd").datebox({ onSelect:function(mydate){ var year=mydate.getFullYear(); var month=mydate.getMonth()+1; var date=mydate.getDate(); alert(year+"年"+month+"月"+date+"日"); } }); </script>

6.4 Slider（滑动条）

使用$.fn.slider.defaults重写默认值对象。

滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。

学生成绩:<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"/> <div id="win1"></div> <div id="win2"></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="打开对话框" id="open1"/> <div id="win1"></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(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

<input type="button" value="确认框" /><br /> <input type="button" value="警告框" /><br /> <input type="button" value="输入框" /><br /> <input type="button" value="显示框" /><br /> <script> $("input").click(function(){ //定位button按钮，提供单击事件 var tip=$(this).val(); tip=$.trim(tip); if("警告框"==tip){ $.messager.alert("警告框","警告处分","waring",function(){ //alert("关闭"); }); } if("确认框"==tip){ $.messager.confirm("确认框","你确认要删除么",function(value){ alert(value); }); } if("输入框"==tip){ $.messager.prompt("输入框","请输入你的姓名",function(name){ alert(name); }); } if("显示框"==tip){ $.messager.show({ showType: "slide", showSpeed: 600, width:300, height:300, title:"显示框", timeout:5000, msg:'消息将在5秒后关闭。' } ); } }); </script>

八、表格和树组件的使用

使用$.fn.tree.defaults重写默认值对象。

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

<ul id="treeID" class="easyui-tree"> <li> <span>第一章</span> <ul> <li> <span>第一节</span> <ul> <li> <span>第一条</span> </li> <li> <span>第二条</span> </li> </ul> </li> <li> <span>第二节</span> </li> </ul> </li> <li> <span>第二章</span> </li> </ul> <script type="text/javascript"> $(function(){ //收起所有的选项 $("#treeID").tree("collapseAll"); }); </script>

我们还可以引入外部文件，使用json格式的文件来添加到这个tree中。

<ul id="treeID"></ul> <script type="text/javascript"> $("#treeID").tree({ url : "/EasyUi/json/pro.json" }); </script>

json格式为：

[ { "id":1, "text":"广东", "state":"closed", "children":[ { "id":11, "text":"广州" , "state":"closed", "children":[ { "id":111, "text":"天河" }, { "id":112, "text":"越秀" } ] }, { "id":12, "text":"深圳" } ] }, { "id":2, "text":"湖南" } ]

以上所述是小编给大家介绍的jQuery EasyUI基础教程之EasyUI常用组件(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！