easyui的其他控件的练习
来源：互联网 发布：音频剪辑软件 编辑：程序博客网 时间：2024/05/17 19:59
上次练习了一些基本的控件，现在来学习一下表单还有其他树等的控件：
Form表单的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>16_Form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body><form id="ff" method="post"> <div> <label for="name">姓名:</label> <input class="easyui-validatebox" type="text" name="vname" data-options="required:true" /> </div> <div> <label for="email">邮箱:</label> <input class="easyui-validatebox" type="text" name="vemail" data-options="required:true,validType:'email'" /> </div> <div> <a id="ss" href="#" data-options="iconCls:'icon-no'" class="easyui-linkbutton" style="margin-left:70px">提交</a> </div> </form> <script type="text/javascript">//web页面加载时触发$(function(){//定位按钮，添加点击事件$("#ss").click(function(){$("#ff").form({ //动态的创建表单url:"/mjf.haihan.easyui01/FormServlet",onSubmit:function(param){ //param表示向服务器提交参数的封装对象param.vname = $("input[name='vname']").text().trim(),param.vemail = $("input[name='vemail']").text().trim()},success:function(backData){//var jsonObj = $("#ss").linkbutton("options"); //得到按钮的图片//jsonObj.iconCls = "icon-ok"; // 修改json对象的属性//$("#ss").linkbutton(jsonObj); //重新在设置到linkbutton中$("#ss").linkbutton({iconCls :"icon-ok"})alert(backData);}});//提交表单，别忘了$("#ff").submit();});});</script> </body> </html>Validatebox验证框的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>11_ValidateBox.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body>姓名:<input id="name" type="text" value="毛竣锋"/><br/>邮箱:<input id="email" type="text"/><br/><script type="text/javascript">$(function(){//自定义规则Chinese//自定义规则//chinese:验证规则名//function(value){}具体的验证逻辑//value表示用户输入的内容//message出错以后的提示信息$.extend($.fn.validatebox.defaults.rules,{chinese:{validator:function(value){if(/^[\u3220-\uFA29]+$/.test(value)){ //使用正则表达式来验证return true;}},message:"内容需要为中文"}});//动态设置验证框$("#name").validatebox({required:true,missingMessage:"姓名为必填",validType:['length[1,4]','chinese']});//动态设置邮箱 $("#email").validatebox({required:true,missingMessage:"邮箱为必填",validType:['email','length[1,40]']});});</script> </body> </html>ComboBox下拉列表框的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>12B_ComboBox.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body>城市：<input id="cc" type="text" value="选择城市"/><script type="text/javascript">$(function(){//参数一：访问远程的路径，返回值需要一个JSON字符串//url:"/CityServlet"，将来访问是一个请求，响应结果就是JSON字符串//参数二：valueField看不见的值,是传递给服务器的值//参数三：textField看得见的值$("#cc").combobox({url:"citys.json",valueField:"id",textField:"name"});});</script> </body> </html>DateBox日期输入框的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>13_DateBox.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body>入职时间：<input id="dd"/><a id="ss" href="#" class="easyui-linkbutton">提交</a><script type="text/javascript">//自定义规则$(function(){var buttons = $.extend([], $.fn.datebox.defaults.buttons);buttons.splice(1, 0, {text: "嘿嘿",handler: function(target){alert("hehe");}});//动态设置DateBox$("#dd").datebox({required:true,panelWidth:300,panelHeight:250,okText:"没问题",disabled:false,buttons:buttons,formatter:function(date){var y = date.getFullYear();var m = date.getMonth()+1;var d = date.getDate();return y+'-'+m+'-'+d;}}); //为提交按钮动态添加事件$("#ss").click(function(){//var tip = $(this).text().trim();//alert(tip);var strDate = $("#dd").datebox("getValue");alert(strDate);}); });</script><!-- 思想：1_先找EasyUI自己的属性，事件，方法，如果没有的话2_再找JQuery的，如果没有的话3_后找JS --> </body> </html>NumberSpinner数字微调的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>14_NumberSpinner.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body>商品数量：<input id="ss" style="width:80px;" ><p><span id="pp" style="color:red">1</span><script type="text/javascript">$(function(){//动态设置spinner$("#ss").numberspinner({required:true,missingMessage:"商品量须填写",min:1,value:1,max:50,increment:5,editabled:false,readonly:false});//为spinner设置事件监听器$("#ss").numberspinner({onSpinUp:function(){ //上调//获取当前numberspinner的值var curr = $(this).numberspinner("getValue");//设置到span标签中去$("#pp").text(curr);},onSpinDown:function(){ //下调//获取当前numberspinner的值var curr = $(this).numberspinner("getValue");//设置到span标签中去$("#pp").text(curr);}});});</script> </body> </html>Slider滑动条的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>15_Slider.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body>拖动滑块条，改变盒子的宽：<br/><br/><br/><div id="box" style="border-style:dotted;width:0px;height:100px"></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><div id="ss" style="height:200px;width:1000px"></div> <script type="text/javascript">$(function(){$("#ss").slider({mode:"h",showTip:true,value:0,min:0,max:100,rule:[0,10,20,30,40,50,60,70,80,90,100]});$("#ss").slider({//value表示新值onChange:function(value){//定位盒子$("#box").css("width",10*value+"px");}});$("#ss").slider({//滑动值被改变时onComplete:function(value){alert("现在移动到：" + value);}});});</script> </body> </html>Window窗口的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>17_Window.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body><input type="button" value="打开窗口"/><input type="button" value="关闭窗口"/><hr/><div id="win"></div><script type="text/javascript">$(function(){//打开窗口$("#win").window({width:200,height:200,title:"窗口1",top:100,left:50,minimizable:false,maximizable:false,closable:false,closed:false,draggable:false,resizable:false});//关闭窗口,默认创建的为打开状态$("#win").window("close");//定位二个按钮，同时添加单击事件$(":button").click(function(){var tip = $(this).val().trim();//判断if(tip=="打开窗口"){$("#win").window("open");//动态为窗口加载指定的页面,路径既可以用相对，又可以用绝对，项目用绝对路径$("#win").window("refresh","../base.html");}else if(tip=="关闭窗口"){$("#win").window("close");}});});</script> </body> </html>Dialog对话框窗口的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>18_Dialog.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body><input type="button" value="打开对话框"/><hr/><div id="dd"></div><script type="text/javascript">$(function(){$("#dd").dialog({width:300,height:300,top:100,left:300,draggable:false,title:"对话框1",toolbar:[{text:"打开",iconCls:"icon-print",handler:function(){alert("打开")$("#dd").dialog({href:"../base.html"});}}],buttons:[{text:"关闭",iconCls:"icon-no",handler:function(){$("#dd").dialog("close");}}]});//开启的时候。默认为关闭$("#dd").dialog("close");//点击按钮，打开对话框$(":button").click(function(){$("#dd").dialog("open");});});</script> </body> </html>Messager消息窗口的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>19_Messager.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body><input type="button" value="显示警告窗口" style="background-color:#FF0000"/><input type="button" value="显示确认窗口" style="background-color:#00FF00"/><input type="button" value="显示提示窗口" style="background-color:#0000FF"/><input type="button" value="显示消息窗口" style="background-color:yellow"/><script type="text/javascript">$(function(){$(":button").click(function(){var tip = $(this).val().trim();if(tip == "显示警告窗口"){//参数四：关闭窗口的回调函数$.messager.alert("标题","内容","warning");}else if(tip == "显示确认窗口"){//参数三：按确认或取消后的回调函数$.messager.confirm("标题","你确认要关闭窗口码",function(value){if(value){window.close();}});}else if(tip == "显示提示窗口"){$.messager.prompt("城市选择","你希望去哪个城市工作",function(city){if(city!=""){alert(city+"是一个不错的城市，但压力山大");}else{alert("您输出的数据为空");}});}else if(tip == "显示消息窗口"){$.messager.show({showType:"slide",title:"当前状态",msg:"您卡上余额不足，请及时充值"});//$.messager.progress();}});});</script> </body> </html>Datadrid表格的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>20E_DataGrid.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body><table id="dg" style="width:600px"></table><script type="text/javascript">$(function(){$("#dg").datagrid({url:"users2.json",singleSelect:true,fitColumns:true,columns:[[ {field:"id",title:"编号",width:100}, {field:"name",title:"姓名",width:100}, { field:"sal", title:"薪水", width:100, align:'center', formatter:function(value){ return "￥" + value; }, styler:function(value){ if(value<=9000){ return "color:blue"; }else if(value<=13000){ return "color:green"; }else{ return "color:red"; } } } ]], pagination:true, pageNumber:1, pageSize:2, pageList:[2,4]});});</script> </body> </html>Tree树的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>21B_Tree.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body><ul id="tt" style="width: 200px" data-options="checkbox:true"></ul><script type="text/javascript">$(function(){$("#tt").tree({url:"countrys.json"});});</script> </body> </html>基本把api里面的常用方法和控件都练习了一次，今后还是需要大量的练习才行。
0 0
- easyui的其他控件的练习
- easyui的基本练习
- easyUI的课程表练习
- easyUI的时间控件
- easyui 树控件的bug
- easyUi 取的时间控件
- easyUI的控件操作问题
- easyui控件的常用属性
- easyui的简单控件使用
- EasyUI界面控件的使用
- Easyui的DateBox控件和DateTimeBox控件
- 其他数据控件的使用
- EasyUI中calender控件的使用方法
- 第二讲 EasyUI控件dialog的使用
- EasyUI常用控件的禁用方法
- EasyUI常用控件的禁用方法
- EasyUI Layout布局控件的缓存问题
- EasyUI中datagrid控件的Editor
- deepin下安装curl 附 CURL常用命令
- 【POJ1321】棋盘问题(简单dfs)
- 自定义视图framework.web.servlet.view.BeanNameViewResolver
- Oracle-游标
- 微软云计算业务表现强劲，股价创历史新高
- easyui的其他控件的练习
- Android获取用户信息新思路
- 存储过程
- json字符串格式
- 华为oj素数伴侣，利用匈牙利算法求解
- 欢迎使用CSDN-markdown编辑器
- C++生成dump文件
- Java初学者必学的JSTL
- unity around common good offers hope for future
