easyui基本练习

最新推荐文章于 2019-11-15 08:58:26 发布
转载 最新推荐文章于 2019-11-15 08:58:26 发布 · 494 阅读 · 0

Base：基础的网页

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>我的第一个EasyUI应用</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.       
  9.     <!-- 引入EasyUI的CSS文件 -->  
  10.     <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">     
  11.     <link rel="stylesheet" type="text/css" href="themes/icon.css">   
  12.           
  13.     <!-- 引入EasyUI的JS文件 -->      
  14.     <script type="text/javascript" src="js/jquery.min.js"></script>     
  15.     <script type="text/javascript" src="js/jquery.easyui.min.js"></script>    
  16.       
  17.   </head>  
  18.   <body>  
  19.       
  20.     <!-- 采用的是静态的使用方式-->  
  21.     <div  
  22.         id="pp"  
  23.         class="easyui-panel"  
  24.         style="width:500px;height:150px;padding:10px;background:#fafafa;"    
  25.         data-options="border:true,collapsible:false,maximizable:false, closable:false,fit:true"  
  26.         >  
  27.     <!--     iconCls="icon-ok"  
  28.         collapsible="true"  
  29.         maximizable="true"  
  30.         closable="true" -->  
  31.       
  32.         这是第一个easyui案例。  
  33.     </div>   
  34.       
  35.     <!--解释上述代码   
  36.         div块标签  
  37.         id属性表示为div标签取一个在web页面中唯一的名字，便于将来用jquery等技术定位，如$("#pp")  
  38.         class属性引用第三方的样式文件，EasyUI的样式文件有这么一个规定：easyui-小写字母开头，后面接着使用UI组件的名字  
  39.         style属性是控件div的样式，style书写一定是css代码，语法：key:value;key:value;key:value;  
  40.         title属性为面板取名  
  41.         iconCls属性图标  
  42.         collapsible属性是否面板可折叠,true表示可折叠；false表示不可折叠  
  43.     -->  
  44.       
  45.     <!-- 采用动态的方式来创建easyui   
  46.     <div id="pp" style="padding:10px;background:#fafafa;"  >  
  47.         呵呵  
  48.     </div>  
  49.       
  50.     <script type="text/javascript">  
  51.         $(function(){  
  52.         $("#pp").panel({      
  53.             width:500,      
  54.             height:150,      
  55.             title: 'My Panel',      
  56.             iconCls:'icon-ok',      
  57.             collapsible:'true',  
  58.             maximizable:'true',   
  59.              closable:'true',  
  60.              border:true  
  61.             });     
  62.         });     
  63.     </script>  
  64.     -->  
  65.   </body>  
  66. </html>  

Pagination分页控件：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>01_Pagination.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.   
  9.     <!-- 引入EasyUI的CSS文件 -->  
  10.     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">     
  11.     <link rel="stylesheet" type="text/css" href="../themes/icon.css">   
  12.           
  13.     <!-- 引入EasyUI的JS文件 -->      
  14.     <script type="text/javascript" src="../js/jquery.min.js"></script>     
  15.     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>    
  16.     <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>    
  17.       
  18.   </head>  
  19.     
  20.   <body>  
  21.     <!-- 用HTML标签创建UI控件的方式：静态方式   
  22.          凡是使用easyUI特有的属性，需要在html标签中使用一个叫data-options的属性。  
  23.          total表示总记录数  
  24.          pageSize表示每页显示多少条记录  
  25.          pageNumber表示当前页号  
  26.          pageList表示可供选择的每页显示记录数  
  27.          注意:pageSize的值是pageList值之一  
  28.          NaN Not a Number  
  29.          适合于属性值少的情况  
  30.     -->  
  31.     <div  
  32.         id="pp1" style="width:1000px;background-color: #efefef"  
  33.         class="easyui-pagination"  
  34.         data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10],loading:false,buttons:[  
  35.             {  
  36.                 iconCls:'icon-add',  
  37.                 handler:function(){alert('增加')}  
  38.             }  
  39.             ,{  
  40.                 iconCls:'icon-remove',  
  41.                 handler:function(){alert('删除')}  
  42.             }],  
  43.             layout:['list',  
  44.                         'first',  
  45.                         'next',  
  46.                         'prev',  
  47.                         'last',  
  48.                         'refresh',  
  49.                         'manual',  
  50.                         'links']"  
  51.     >  
  52.     </div>  
  53.       
  54.     <hr/>  
  55.       
  56.     <!-- 用JS技术创建UI控件的方式：动态方式（相对较多） -->  
  57.     <div id="pp2" style="width:1000px;background-color: #efefef" ></div>  
  58.     <script type="text/javascript">  
  59.         //当web页面加载时执行,用Jquery的语法  
  60.         $(function(){  
  61.             //用Jquery的语法定位<div标签>  
  62.             //用EasyUI的语法，参数是一个JSON对象，属性名：属性值（number,boolean,"string",[array]）---属性  
  63.             $("#pp2").pagination({  
  64.                 total:100,  
  65.                 pageSize:5,  
  66.                 pageNumber:1,  
  67.                 pageList:[5,10],  
  68.                 showPageList:true,  
  69.                 showRefresh:true,  
  70.             });  
  71.             //为pagination这个UI控件设置事件监听器，参数是一个JSON对象，事件名 ：无名函数------------------事件  
  72.             $("#pp2").pagination({  
  73.                 onSelectPage:function(pageNumber, pageSize){  
  74.                     //pageNumber:当前页号，2  
  75.                     //pageSize: 每页显示记录数,10  
  76.                     alert(pageNumber+"#"+pageSize);           
  77.                 }  
  78.             });  
  79.             //调用pagination这个UI控件的方法---------------------------------------------------方法  
  80.             //自动跳转到第三页  
  81.             $("#pp2").pagination("select",3);  
  82.         });  
  83.     </script>  
  84.   
  85.   </body>  
  86. </html>  

SearchBox搜索框的控件：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>02_SearchBox.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.     <!-- 引入EasyUI的CSS文件 -->  
  9.     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">     
  10.     <link rel="stylesheet" type="text/css" href="../themes/icon.css">   
  11.     <!-- 引入EasyUI的JS文件 -->      
  12.     <script type="text/javascript" src="../js/jquery.min.js"></script>     
  13.     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>    
  14.     <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>    
  15.   </head>  
  16.     
  17.   <body>  
  18.       
  19.         <input id="ss"></input>   
  20.          
  21.         <div id="mm" style="width:200px">   
  22.             <div>麻生希</div>   
  23.             <div>桃谷绘里香</div>  
  24.             <div>樱井莉亚</div>  
  25.         </div>   
  26.           
  27.         <script type="text/javascript">  
  28.             //web界面加载时触发  
  29.             $(function(){  
  30.                 //将div菜单动态添加到input中  
  31.                 $("#ss").searchbox({  
  32.                     prompt:"你喜欢那个明星？",  
  33.                     menu:"#mm",  
  34.                     width:200  
  35.                 });  
  36.             });  
  37.         </script>  
  38.           
  39.         <script type="text/javascript">  
  40.             $("#ss").searchbox({  
  41.                 //按搜索钮  
  42.                 searcher:function(value,name){  
  43.                     //获取用户输入的内容  
  44.                     //var value = $("#ss").searchbox("getValue");  
  45.                     //window.alert("value="+value);  
  46.                     //value:表示用户输入的值  
  47.                     //name:表示下拉框中的内容  
  48.                     window.alert(value+"#"+name);  
  49.                 }  
  50.             });  
  51.           
  52.           
  53.         </script>  
  54.   
  55.   </body>  
  56. </html>  

ProgressBar进度条的控件：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>03B_ProgressBar.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.     <!-- 引入EasyUI的CSS文件 -->  
  9.     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">     
  10.     <link rel="stylesheet" type="text/css" href="../themes/icon.css">   
  11.     <!-- 引入EasyUI的JS文件 -->      
  12.     <script type="text/javascript" src="../js/jquery.min.js"></script>     
  13.     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>    
  14.     <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>    
  15.   </head>  
  16.     
  17.   <body>  
  18.       
  19.     <div id="pp" style="width:1000px;height:100px"></div>  
  20.       
  21.     <script type="text/javascript">  
  22.         $(function(){  
  23.             //动态设置进度条的值为0  
  24.             $("#pp").progressbar({  
  25.                 value:0  
  26.             });  
  27.             //计数器  
  28.             var i = 0;  
  29.             //JS版的定时器，每隔100毫秒执行一次，时间到，定时器停止，类似循环  
  30.                 var t = window.setInterval(function(){  
  31.                     i++;  
  32.                     //停止JS版的定时器，参数一：定时器的引用t  
  33.                     if(i<=100){  
  34.                         $("#pp").progressbar("setValue",i);  
  35.                     }else{  
  36.                             window.clearInterval(t);  
  37.                             alert("下载完毕！");  
  38.                     }  
  39.                 }, 100);  
  40.         });  
  41.     </script>  
  42.   
  43.   </body>  
  44. </html>  

Tooltip提示框的控件：

 

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>04_Tooltip.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.     <!-- 引入EasyUI的CSS文件 -->  
  9.     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">     
  10.     <link rel="stylesheet" type="text/css" href="../themes/icon.css">   
  11.     <!-- 引入EasyUI的JS文件 -->      
  12.     <script type="text/javascript" src="../js/jquery.min.js"></script>     
  13.     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>    
  14.     <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>    
  15.   </head>  
  16.     
  17.   <body>  
  18.       
  19.     <a id="tt" href="javascript:void(0)" style="font-size:55px;text-decoration:none;">小巷子约定你</a>      
  20.       
  21.     <script type="text/javascript">  
  22.         $(function(){  
  23.           
  24.             //动态设置Tooltip控件  
  25.             $("#tt").tooltip({  
  26.                 position:'right',  
  27.                 content:"有机会的话一起去小巷子",  
  28.                 deltaX:50,  
  29.                 showDelay:200  
  30.             });  
  31.               
  32.             //为Tooltip控件设置事件监听器  
  33.             $("#tt").tooltip({  
  34.                 //当Tooltip控件隐藏时触发  
  35.                 onHide:function(){  
  36.                     //只执行一次  
  37.                     window.setTimeout(function(){  
  38.                         //休息3秒，再将其显示  
  39.                         $("#tt").tooltip("show");  
  40.                     },3000);  
  41.                 }  
  42.             });  
  43.               
  44.         });  
  45.     </script>  
  46.       
  47.   </body>  
  48. </html>  

Panel面板的控件：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>05_Panel.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.     <!-- 引入EasyUI的CSS文件 -->  
  9.     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">     
  10.     <link rel="stylesheet" type="text/css" href="../themes/icon.css">   
  11.     <!-- 引入EasyUI的JS文件 -->      
  12.     <script type="text/javascript" src="../js/jquery.min.js"></script>     
  13.     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>    
  14.     <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>    
  15.   </head>  
  16.     
  17.   <body>  
  18.       
  19.     <!-- fit表示填满整个父窗体 -->  
  20.     <!-- href表示加载远程文件，将其结果包含进来  
  21.          如：  
  22.          href:'../index.jsp'  
  23.          href:'/UserServlet',PrintWriter.write("大家好");  
  24.          href:'/UserAction.action'  
  25.          href:'/UserAction.springmvc'  
  26.      -->  
  27.       
  28.     <div  
  29.         id="pp"  
  30.         class="easyui-panel"  
  31.         title="我的面板"  
  32.         style="width:540px;height:300px;padding:10px;background:#fafafa;"  
  33.         data-options="iconCls:'icon-tip',top:500,left:500,fit:false,content:'你好',collapsible:true,closable:true,href:'../base.html'"  
  34.     >  
  35.             <p>内容1</p>  
  36.             <p>内容2</p>  
  37.     </div>  
  38.       
  39.   </body>  
  40. </html>  

Tabs选项卡的控件：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>06A_Tabs.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.     <!-- 引入EasyUI的CSS文件 -->  
  9.     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">     
  10.     <link rel="stylesheet" type="text/css" href="../themes/icon.css">   
  11.     <!-- 引入EasyUI的JS文件 -->      
  12.     <script type="text/javascript" src="../js/jquery.min.js"></script>     
  13.     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>    
  14.     <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>    
  15.   </head>  
  16.     
  17.   <body>  
  18.       
  19.     <!-- 选项卡容器 -->   
  20.     <div id="tt"   style="width:500px;height:250px;">     
  21.           
  22.         <!-- 选项卡一 -->  
  23.         <div title="标题一" style="padding:20px;">     
  24.                        内容一     
  25.         </div>     
  26.           
  27.         <div title="标题二" style="overflow:auto;padding:20px;">     
  28.                        内容二     
  29.         </div>     
  30.           
  31.         <div title="标题三" style="padding:20px;">     
  32.                       内容三     
  33.         </div>   
  34.             
  35.     </div>    
  36.       
  37.     <script type="text/javascript">  
  38.         $(function(){  
  39.         $("#tt").tabs({  
  40.             plain:false,  
  41.             fit:false,  
  42.             border:true,  
  43.             toolPosition:"left",  
  44.             tabPosition:"top",  
  45.             headerWidth:100,  
  46.             selected:-1  
  47.         });  
  48.             //添加选项卡  
  49.             //参数一：  方法名  
  50.             //参数二：JSON对象，即{}              
  51.             /* $("#tt").tabs("add",{  
  52.                 title:"标题四",  
  53.                 content:"内容四",  
  54.                 selected:false,  
  55.                 closable:true,  
  56.                 href:'../base.html'  
  57.             }); */  
  58.         });  
  59.     </script>  
  60.       
  61.   </body>  
  62. </html>  

Accordion分类的控件：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>07_Accordion.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.     <!-- 引入EasyUI的CSS文件 -->  
  9.     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">     
  10.     <link rel="stylesheet" type="text/css" href="../themes/icon.css">   
  11.     <!-- 引入EasyUI的JS文件 -->      
  12.     <script type="text/javascript" src="../js/jquery.min.js"></script>     
  13.     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>    
  14.     <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>    
  15.   </head>  
  16.     
  17.   <body>  
  18.      
  19.     <!-- 容器 -->  
  20.     <div id="aa" class="easyui-accordion" style="width:300px;height:400px;"  
  21.          data-options="border:true,animate:true,selected:-1">     
  22.           
  23.         <!-- 面板 -->  
  24.         <div title="标题1" data-options="iconCls:'icon-save',collapsible:true" style="overflow:auto;padding:10px;">     
  25.                 内容1   
  26.         </div>     
  27.   
  28.         <div title="标题2" data-options="iconCls:'icon-reload'" style="padding:10px;">     
  29.                 内容2    
  30.         </div>     
  31.   
  32.         <div title="标题3" data-options="iconCls:'icon-help'">     
  33.                 内容3   
  34.         </div>     
  35.     </div>    
  36.       
  37.     <script type="text/javascript">  
  38.         //对于网站的路径，有二类：  
  39.         //一类：相对于本文件的路径，一切以本文出发，相对路径../base.html  
  40.         //二类HTML：相对于webapps目录的路径，一切以tomcat/webapps出发，绝对路径/工程名/images/girl_1.jpg  
  41.         //二类JSP：相对于webapps目录的路径，一切以tomcat/webapps出发，绝对路径${pageContext.request.contextPath}/images/girl_1.jpg  
  42.         $(function(){  
  43.               
  44.             //动态添加标题4  
  45.             $("#aa").accordion("add",{  
  46.                 title:"标题4",  
  47.                 selected:false,  
  48.                 iconCls:'icon-edit',  
  49.             });  
  50.               
  51.             //为Accordion添加事件  
  52.             $("#aa").accordion({  
  53.                 onSelect:function(title){  
  54.                     //个人建议：只要是字符串，做一个trim操作  
  55.                     var title = $.trim(title);  
  56.                     if(title=="标题4"){  
  57.                         //用户选中的面板  
  58.                         var four = $("#aa").accordion("getSelected");  
  59.                         //面板4动态添加内容  
  60.                         four.panel("refresh","/mjf.haihan.easyui01/photo.html");  
  61.                     }else if(title=="标题3"){  
  62.                         var three = $("#aa").accordion("getSelected");  
  63.                         three.panel("refresh","/mjf.haihan.easyui01/base.html");  
  64.                     }  
  65.                 }  
  66.             });  
  67.               
  68.         });  
  69.     </script>  
  70.      
  71.   </body>  
  72. </html>  

Layout布局的控件：

 

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>08C_Layout.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.     <!-- 引入EasyUI的CSS文件 -->  
  9.     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">     
  10.     <link rel="stylesheet" type="text/css" href="../themes/icon.css">   
  11.     <!-- 引入EasyUI的JS文件 -->      
  12.     <script type="text/javascript" src="../js/jquery.min.js"></script>     
  13.     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>    
  14.     <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>    
  15.   </head>  
  16.     
  17.   <body>  
  18.   
  19.     <!-- 容器 -->     
  20.     <div id="ll" class="easyui-layout" data-options="fit:true">  
  21.       
  22.         <!-- 北 -->  
  23.         <div data-options="region:'north',title:'海涵标志',collapsible:false" style="height: 150px"></div>  
  24.       
  25.         <!-- 中 -->  
  26.         <div data-options="region:'center',border:false">  
  27.           
  28.             <!-- 拆分 -->  
  29.             <div class="easyui-layout" data-options="fit:true">  
  30.           
  31.                 <!-- 西 -->  
  32.                 <div data-options="region:'west',title:'系统菜单',collapsible:false" style="width:200px">  
  33.                       
  34.                     <!-- 嵌入Accordion-->  
  35.                     <div id="aa" data-options="fit:true" class="easyui-accordion" style="width:300px;height:200px;">     
  36.                         <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">     
  37.                             content2      
  38.                         </div>     
  39.                         <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">     
  40.                             content2      
  41.                         </div>     
  42.                         <div title="Title3">     
  43.                             content3      
  44.                         </div>     
  45.                     </div>    
  46.                   
  47.                 </div>  
  48.               
  49.                 <!-- 中 -->  
  50.                 <div data-options="region:'center',href:'../base.html',title:'系统内容',collapsible:false"></div>  
  51.           
  52.             </div>  
  53.               
  54.         </div>  
  55.           
  56.     </div>      
  57.      
  58.   </body>  
  59.   
  60. </html>  

还有的就是linkbutton按钮的控件：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>09_LinkButton.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.     <!-- 引入EasyUI的CSS文件 -->  
  9.     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">     
  10.     <link rel="stylesheet" type="text/css" href="../themes/icon.css">   
  11.     <!-- 引入EasyUI的JS文件 -->      
  12.     <script type="text/javascript" src="../js/jquery.min.js"></script>     
  13.     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>    
  14.     <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>    
  15.   </head>  
  16.     
  17.   <body>  
  18.   
  19.     <input type="button" value="传统按钮"/>  
  20.     <hr/>  
  21.   
  22.     <a id="addBtn" href="javascript:void(0)" class="easyui-linkbutton">增加用户</a><p>  
  23.     <a id="leteBtn" href="javascript:void(0)" class="easyui-linkbutton">删除用户</a><p>  
  24.     <a id="updateBtn" href="javascript:void(0)" class="easyui-linkbutton">修改用户</a><p>  
  25.     <a id="findBtn" href="javascript:void(0)" class="easyui-linkbutton">查询用户</a><p>  
  26.       
  27.     <hr/>  
  28.       
  29.     <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">     
  30.     </div>  
  31.       
  32.     <script type="text/javascript">  
  33.         //为上边四个a添加单击事件  
  34.         $("a").click(function(){  
  35.             //获取你点击按钮的内容  
  36.             var tip = $(this).text().trim();  
  37.             //判断  
  38.             if(tip=="增加用户"){  
  39.                 //判断指定的选项卡是否存在，true已存在，false不存在  
  40.                 var flag = $("#tt").tabs("exists",tip);  
  41.                 //如果不存在  
  42.                 if(!flag){  
  43.                     //动态创建一个tabs  
  44.                     $("#tt").tabs("add",{  
  45.                         title:tip,  
  46.                         closable:true,  
  47.                         href:'../base.html'  
  48.                     });  
  49.                 }  
  50.             }  
  51.         });   
  52.     </script>  
  53.       
  54.      
  55.   </body>  
  56.   
  57. </html>  
qq_35851939
关注
Java笔记：EasyUI综合练习实现思路
Java_gleaner的博客
07-21 228
使用EasyUI制作一个后台管理系统，未连接后台及数据库。 1.布局 <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:150px; background:url(img/timg.jpg);"> <div sty...
easyui+springMVC+hibernate练习
07-31
easyui+springMVC+hibernate练习，实现为课程表。
EasyUI 练习代码
03-22
EasyUI 练习代码 菜鸟专用
easyui的基本练习
css1223mjf的专栏
10-22 1508
下面是基础的练习： Base：基础的网页 我的第一个EasyUI应用 <div id="pp" class="easyui-panel" style="width:500px;height:150px;padding:10p
JqueryEasyui使用练习
02-09
此代码是练习jquery easyui前台框架是使用，目前完成部分功能，后续待完善哦。
easyui
weixin_30883271的博客
09-10 151
最近公司培训EasyUI，就做下总结吧，给有需要的人。 1、最常用的表格 1 2 3 <div class="easyui-panel" data-options="region:'center'" style="padding: 20px"> <table id="dg"></table> &l...
easyUI之练习
weixin_30521649的博客
12-04 137
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>练习</title> ...
jquery easyui表单练习
ruoranff的博客
01-20 491
type="text/javascript"> //页面打开时加载 &(function(){ $('#tabletool').datagrid({ title:"grid小工具"， url:'/tool/grantservice/export.do', fit:true, checkOnSelect:false, toolbar:'tb',-
easyUI的课程表练习
qq_35437583的博客
07-31 604
初入公司，经过简单培训，现要求我们自己动手实现课程表的查询，以easyUI+springMVC+hibernate，为框架基础。笔者数据库使用的是oracle。![实现结果如下](http://img.blog.youkuaiyun.com/20170731164840502?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU0Mzc1ODM=/font/5
JQuery EasyUi练习Demo(带源码)
weixin_30836759的博客
04-23 112
1.很久以前用JQueryEasyUi做的练习DEMO，今天整理文件的时候发现了，在这里分享给大家，给需要这方面的人一个参考，对于这方面有经验的人可以给点意见。 效果是一个登陆界面加一个主界面，见图： 详细见源码，框架是用简单的jquery + easyui + DataSet来实现的 源码点我 转载于:https://www.cnblogs.com/xqhppt/archive/201...
easyui的其他控件的练习
css1223mjf的专栏
10-22 1226
上次练习了一些基本的控件，现在来学习一下表单还有其他树等的控件： Form表单的控件： 16_Form.html 姓名: 邮箱:
easyui控件验证+datagrid相关操作web练习源码
12-14
easyui的输入框+验证+弹窗，datagrid的渲染+勾选/选择+双击+渲染行操作+查询框架。
学生信息管理系统(JSP+Servlet+EasyUI)--入门项目
07-13
学生信息管理系统(JSP+Servlet+EasyUI)--入门项目！！！
Easyui，Echart，Jsp+Servlet开发简单完整实例
07-29
jsp+servlet开发的完整过程，easyui，echart的基本使用。项目完整代码。
EasyUi 基本语法
weixin_43294560的博客
11-15 430
适用于后台 能复制文档就不手写 脚本功能语法 如果效果(组件)是abc，控制abc的语法 $(选择器获取到abc).abc({ 属性名:值; 事件:函数; }) 如果效果(组件)是abc，控制abc方法的语法 $("选择器获取到abc").abc("方法名"); $("选择器获取到abc").abc("方法名","参数") ...
Jquery -EasyUI
05-08 243
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 其实就跟EXTJS差不多 jQuery EasyUI为提供了大多数UI控件的使用，如：...
EasyUI环境搭建与入门基础语法
BADAO_LIUMANG_QIZHI的博客
06-03 607
场景 EasyUI中文网： http://www.jeasyui.net/ 下载： http://www.jeasyui.net/download/jquery.html 选择免费版下载，下载后解压： 实现 打开IDEA-new Project-Maven--勾选Create from archetype--选择webapp 设置自己的Maven仓库等。 建成之后...
EasyUi基础
学习笔记
11-21 1517
语法解析[Parser] 使用方法： $.parser.parse(); // 解析所有的页面$.parser.parse('#cc'); // 解析特定的代码 属性： 名称 类型 描述 默认值 $.parser.auto boolean（布尔型） 定义是否自动解析easyui组件。 true 事
easyUI 学习网站
weixin_30536513的博客
10-22 116
1、http://www.miniui.com/ 2、http://www.jeasyui.net/ 转载于:https://www.cnblogs.com/zhaizixi/p/7710611.html
轻松掌握EasyUI练习代码：菜鸟入门指南
描述中提到的“菜鸟专用”说明这套练习代码是针对新手设计的，目的是让初学者通过实践快速掌握EasyUI的基本使用方法和操作技巧。 #### 标签解释 标签“EasyUI, JS, 练习代码”表示该文件的内容涉及EasyUI框架、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值