JS与jQuery插件运用和EasyUI框架的学习干货（三）

最新推荐文章于 2022-04-12 11:49:50 发布
最新推荐文章于 2022-04-12 11:49:50 发布
阅读量448 收藏
点赞数
分类专栏： javascript JavaScript知识点

    下面介绍下jQuery的一些应用，在之前的上一篇中讲解了jQuery的知识点，可以进行阅读一下。而这里主要是说一下jQuery还运用到某些其他的方面的知识。

1：网页端本地存储的方式（三种）

（一）：cookie存储

[html]  view plain  copy
  1. // cookie的读和写需要在服务器环境下  
  2.         //写cookie  
  3.         $.cookie('mycookie','ok!',{expires:7,path:'/'});  
  4.         //读cookie  
  5.         var val = $.cookie('mycookie');  
  6.         alert(val);  
（二）：localStorage存储

[html]  view plain  copy
  1. <script type="text/javascript">  
  2.         //写入  
  3.         //localStorage.setItem('mystorage','ok!');  
  4.         //sessionStorage.setItem('pwd','123');  
  5.         // 读取  
  6.         alert(localStorage.mystorage);  
  7.     </script  

//获取：
localStorage.getItem("dat");
localStorage.dat

//删除
localStorage.removeItem("dat");

（三）： sessionStorage 

方法：sessionStorage。setItem（‘pad’，‘123’）；

总结：它们的区别：（1）：存储大小：cookie为4k，而后面两个为5M

（2）：传输携带：cookie会被在HTTP传输中被携带，loaclStrorage是保存在本地，session是在同源页面

  （3）：存在时间：cookie可以进行设置，loaclStorage一直会存在本地（不被用户主动删除的情况），而sessoin是在关闭页面后消失

注意一下：Iphone的无痕浏览只能支持cookie，其他两个都不支持

（四）具体实例（网页的消息推送）

[html]  view plain  copy
  1. DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <style type="text/css">  
  7.         body{  
  8.             margin:0;  
  9.         }  
  10.   
  11.         .pop{  
  12.             width:400px;  
  13.             height:300px;  
  14.             background-color:#fff;  
  15.             border:1px solid #ccc;  
  16.             position:fixed;  
  17.             left:50%;  
  18.             top:50%;  
  19.             margin-left:-200px;  
  20.             margin-top:-250px;  
  21.             z-index:9999;  
  22.             opacity:0;  
  23.             filter:alpha(opacity=0);  
  24.   
  25.         }  
  26.   
  27.         .pop span{  
  28.             float:right;  
  29.             font-size:30px;  
  30.             cursor:pointer;  
  31.         }  
  32.   
  33.         .mask{  
  34.             width:100%;  
  35.             height: 100%;  
  36.             background-color:#000;  
  37.             opacity:0.6;  
  38.             filter:alpha(opacity=60);  
  39.             position:fixed;  
  40.             z-index:9990;  
  41.             left:0;  
  42.             top:0     
  43.         }  
  44.         .pop_con{  
  45.             display:none;  
  46.         }  
  47.   
  48.         .hasknow{  
  49.             text-align:center;  
  50.             cursor:pointer;  
  51.             margin-top:100px;  
  52.         }  
  53.     </style>  
  54.   
  55.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>  
  56.     <script type="text/javascript" src="js/jquery.cookie.js"></script>  
  57.     <script type="text/javascript">  
  58.         $(function(){  
  59.   
  60.             var read = $.cookie('hasread');  
  61.   
  62.             //alert(read);  
  63.   
  64.             if(read==undefined)  
  65.             {  
  66.                 $('.pop_con').show();  
  67.                 $('.pop').animate({marginTop:-150,opacity:1});                
  68.             }  
  69.   
  70.             $('.hasknow').click(function() {  
  71.   
  72.                 $.cookie('hasread','ok',{expires:7,path:'/'});  
  73.                 $('.pop_con').hide();  
  74.   
  75.             });           
  76.         })  
  77.   
  78.     </script>  
  79. </head>  
  80. <body>  
  81.       
  82.     <div class="pop_con">  
  83.         <div class="pop">  
  84.             <span>×</span>  
  85.             <p>我们网站有优惠，赶紧行动吧！亲！</p>  
  86.             <p class="hasknow">我知道了</p>  
  87.         </div>  
  88.         <div class="mask"></div>  
  89.     </div>  
  90.   
  91.     <h1>网站首页</h1>  
  92. </body>  
  93. </html>  
2：jQueryUI插件的使用

（1）例子：实现拖拉功能

[html]  view plain  copy
  1. <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>  
  2.     <script type="text/javascript" src="js/jquery-ui.min.js"></script>  
  3.     <script type="text/javascript">  
  4.         $(function(){  
  5.             $('.box').draggable({  
  6.                 // 约束元素在父级内拖动  
  7.                 containment:'parent',  
  8.                 //限制在x轴向拖动  
  9.                 //axis:'x',  
  10.                 //拖动是透明度变为0.6  
  11.                 opacity:0.6,  
  12.                 drag:function(ev,ui){  
  13.                     console.log(ui.position.left);  
  14.                 }  
  15.             });  
  16.         })  
  17.     </script>  
  18.     <style type="text/css">  
  19.           
  20.         .con{  
  21.             width:300px;  
  22.             height:300px;  
  23.             border:1px solid #000;  
  24.             margin:50px auto 0;  
  25.         }  
  26.   
  27.         .box{  
  28.             width:40px;  
  29.             height:40px;  
  30.             background-color:gold;  
  31.             cursor:pointer;  
  32.         }  
  33.     </style>  
  34. </head>  
  35. <body>  
  36.     <div class="con">  
  37.         <div class="box"></div>  
  38.     </div>  
  39. </body>  
（2）例子：实现拖拉进度条功能

[html]  view plain  copy
  1. <script type="text/javascript">  
  2.         $(function(){  
  3.             $('.dragbar').draggable({  
  4.                 axis:'x',  
  5.   
  6.                 containment:'parent',  
  7.                 //containment:[0,0,600,0]  
  8.                 opacity:0.6,  
  9.   
  10.                 drag:function(ev,ui){  
  11.                     //console.log(ui.position.left);                      
  12.                     var nowleft = ui.position.left;  
  13.                     $('.progress').css({width:nowleft});  
  14.                     $('.slide_count').val(parseInt(nowleft*100/570));  
  15.                 }  
  16.   
  17.             });  
  18.         })  
  19.     </script>  
  20.     <style type="text/css">  
  21.         .slidebar_con{  
  22.             width:650px;  
  23.             height:32px;  
  24.             margin:50px auto 0;  
  25.         }  
  26.   
  27.         .slidebar{  
  28.             width:600px;  
  29.             height:30px;  
  30.             border:1px solid #ccc;            
  31.             float:left;  
  32.             position:relative;  
  33.         }  
  34.   
  35.         .slidebar .dragbar{  
  36.             width:30px;  
  37.             height:30px;  
  38.             background-color:gold;  
  39.             cursor:pointer;  
  40.             position:absolute;  
  41.             left:0;  
  42.             top:0;  
  43.         }  
  44.   
  45.         .slidebar .progress{  
  46.             width:0px;  
  47.             height:30px;  
  48.             background-color:#f0f0f0;  
  49.             position:absolute;  
  50.             left:0;  
  51.             top:0;  
  52.         }  
  53.   
  54.         .slide_count{  
  55.             padding:0;  
  56.             float:right;  
  57.             width:40px;  
  58.             height:30px;  
  59.             border:1px solid #ccc;  
  60.             text-align:center;  
  61.             font-size:16px;  
  62.         }  
  63.   
  64.     </style>  
  65. </head>  
  66. <body>  
  67.     <div class="slidebar_con">  
  68.         <div class="slidebar">  
  69.             <div class="progress"></div>  
  70.             <div class="dragbar"></div>  
  71.         </div>  
  72.         <input type="text" name="" value="0" class="slide_count">  
  73.     </div>  
  74. </body>  
（3）例子：实现自定义滚动条

[html]  view plain  copy
  1. <script type="text/javascript">  
  2.         $(function(){  
  3.   
  4.             var h = $('.paragraph').outerHeight();  
  5.             var hide = h-500;  
  6.   
  7.             $('.scroll_bar').draggable({  
  8.                 axis:'y',  
  9.                 containment:'parent',  
  10.                 opacity:0.6,  
  11.                 drag:function(ev,ui){  
  12.                     var nowtop = ui.position.top;  
  13.                     var nowscroll = parseInt(nowtop/290*hide);  
  14.                     $('.paragraph').css({top:-nowscroll});  
  15.                 }  
  16.   
  17.             });  
  18.   
  19.         })  
  20.   
  21.     </script>  
  22.     <style type="text/css">  
  23.         .scroll_con{  
  24.             width:400px;  
  25.             height:500px;  
  26.             border:1px solid #ccc;  
  27.             margin:50px auto 0;  
  28.             position:relative;  
  29.             overflow:hidden;  
  30.         }  
  31.   
  32.         .paragraph{  
  33.             width:360px;  
  34.             position:absolute;  
  35.             left:0;  
  36.             top:0;  
  37.             padding:10px 20px;  
  38.             font-size:14px;  
  39.             font-family:'Microsoft Yahei';  
  40.             line-height:32px;  
  41.             text-indent:2em;  
  42.         }  
  43.   
  44.         .scroll_bar_con{  
  45.             width:10px;  
  46.             height:490px;  
  47.             position:absolute;  
  48.             right:5px;  
  49.             top:5px;  
  50.         }  
  51.   
  52.         .scroll_bar{  
  53.             width:10px;  
  54.             height:200px;  
  55.             background-color:#ccc;  
  56.             position:absolute;  
  57.             left:0;  
  58.             top:0;  
  59.             cursor:pointer;  
  60.             border-radius:5px;  
  61.   
  62.         }  
  63.       
  64.     </style>  
  65. </head>  
  66. <body>  
  67.     <div class="scroll_con">  
  68.         <div class="paragraph">  
  69.             2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。  
  70.             掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。  
  71. 学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。  
  72. 学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。  
  73. 了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。  
  74. 了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。  
  75.         </div>  
  76.         <div class="scroll_bar_con">  
  77.             <div class="scroll_bar">  
  78.         </div>          
  79.     </div>      
  80.    </div>  

3：Zepto插件的使用（用于移动端开发插件，比如手指左右滑动，点击等）

（1）基本事件（测试的时候，要将网页转为移动端面板才会有效果）

[html]  view plain  copy
  1. <script type="text/javascript" src="js/zepto.min.js"></script>  
  2.     <style type="text/css">  
  3.         .box{  
  4.             width:300px;  
  5.             height:300px;  
  6.             background-color: gold;  
  7.         }  
  8.     </style>  
  9.     <script type="text/javascript">  
  10.         $(function(){  
  11.   
  12.             $('.box').tap(function(){  
  13.   
  14.                 alert('tap');  
  15.             });  
  16.   
  17.             $('.box').click(function(){  
  18.                 alert('click');  
  19.             });  
  20.   
  21.             $('.box').longTap(function(){  
  22.   
  23.                 alert('long tap');  
  24.             });  
  25.   
  26.             $('.box').swipe(function(){  
  27.   
  28.                 alert('swipe');  
  29.             })  
  30.   
  31.             $('.box').swipeLeft(function(){  
  32.   
  33.                 alert('swipe left');  
  34.             })  
  35.   
  36.             $('.box').swipeRight(function(){  
  37.   
  38.                 alert('swipe right');  
  39.             })  
  40.   
  41.             $('.box').swipeUp(function(){  
  42.   
  43.                 alert('swipe up');  
  44.             })  
  45.   
  46.             $('.box').swipeDown(function(){  
  47.   
  48.                 alert('swipe down');  
  49.             })  
  50.   
  51.   
  52.   
  53.         });  
  54.   
  55.   
  56.     </script>  
  57. </head>  
  58. <body>  
  59.     <div class="box"></div>  
  60. </body>  
  61. </html>  
（2）滑动删除的效果（同样，将网页切换成移动端页面）

[html]  view plain  copy
  1. <head>  
  2.     <meta charset="UTF-8">  
  3.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
  4.     <script type="text/javascript" src="js/zepto.min.js"></script>  
  5.     <title>zepto touch</title>  
  6.     <style type="text/css">  
  7.         body,ul{margin:0;padding:0}  
  8.         .list{  
  9.             list-style:none;  
  10.             margin:20px auto 0;  
  11.             width:90%;  
  12.         }  
  13.   
  14.         .list li{  
  15.             height:40px;  
  16.             line-height:40px;  
  17.             border-bottom:1px solid #ddd;  
  18.             position:relative;  
  19.             overflow:hidden;  
  20.         }  
  21.   
  22.         .list li a{  
  23.             text-decoration:none;  
  24.             color:#333;  
  25.             position:absolute;  
  26.             left:0  
  27.         }  
  28.   
  29.         .list li span{  
  30.             position:absolute;  
  31.             right:-60px;  
  32.             background-color:red;  
  33.             padding:0 10px;  
  34.             color:#fff;  
  35.         }  
  36.     </style>  
  37.     <script type="text/javascript">  
  38.         $(function(){  
  39.   
  40.             $('.list li').swipeLeft(function(){  
  41.                 $(this).children('a').animate({left:-60});  
  42.                 $(this).children('span').animate({right:0});  
  43.   
  44.             });  
  45.   
  46.             $('.list li').swipeRight(function(){  
  47.                 $(this).children('a').animate({left:0});  
  48.                 $(this).children('span').animate({right:-60});  
  49.             })  
  50.   
  51.             $('.list span').click(function(){  
  52.                 $(this).parent().animate({height:0},function(){  
  53.                     $(this).remove();  
  54.                 })  
  55.             });  
  56.               
  57.   
  58.   
  59.         })  
  60.   
  61.     </script>  
  62. </head>  
  63. <body>  
  64.     <ul class="list">  
  65.         <li><a href="#">新闻标题111111</a><span>删除</span></li>  
  66.         <li><a href="#">新闻标题222222</a><span>删除</span></li>  
  67.         <li><a href="#">新闻标题333333</a><span>删除</span></li>  
  68.         <li><a href="#">新闻标题444444</a><span>删除</span></li>  
  69.         <li><a href="#">新闻标题555555</a><span>删除</span></li>  
  70.     </ul>  
  71. </body>  
  72. </html>  
4：插件Swiper的使用（这个也是一种移动端的插件，主要可以用来制作幻灯片和屏幕滑动的效果）

（1）例子：幻灯片（关键代码，可以直接用的，使用在对应的位置），这个可以去这个插件的官网看看，还有很多类似的效果

[html]  view plain  copy
  1. <script type="text/javascript">  
  2.         $(function(){  
  3.             var swiper = new Swiper('.swiper-container', {  
  4.                 pagination: '.swiper-pagination',             
  5.                 initialSlide :1,  
  6.                 paginationClickable: true,  
  7.                 loop: true,  
  8.                 autoplay:3000,  
  9.                 autoplayDisableOnInteraction:false  
  10.             });  
  11.   
  12.         })  
  13.     </script>  

[html]  view plain  copy
  1. <div class="swiper-container">  
  2.                   <div class="swiper-wrapper">  
  3.                     <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>  
  4.                     <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>  
  5.                     <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>  
  6.                   </div>  
  7.                     <div class="swiper-pagination"></div>  
  8.                 </div>  
（2）例子：整屏滑动

[html]  view plain  copy
  1. <script type="text/javascript">  
  2.   
  3.       
  4.     $(function(){  
  5.   
  6.         setTimeout(function(){        
  7.   
  8.             $('.p1').addClass('moving');  
  9.   
  10.         },0);  
  11.   
  12.   
  13.         var myswiper = new Swiper('.swiper-container',{  
  14.         direction: 'vertical',     
  15.         pagination: '.swiper-pagination',  
  16.         onSlideChangeEnd:function(swiper){  
  17.             console.log(swiper);  
  18.             var index = swiper.activeIndex;  
  19.             $('.swiper-slide').removeClass('moving').eq(index).addClass('moving');  
  20.         }  
  21.     
  22.         })  
  23.     });  
  24.   
  25.   
  26. </script>  

[html]  view plain  copy
  1. <body>  
  2.   
  3. <div class="swiper-container">  
  4.     <div class="swiper-wrapper">  
  5.   
  6.         <div class="swiper-slide p1">  
  7.             <h1>页面标题一</h1>  
  8.             <p>页面内容</p>  
  9.         </div>  
  10.   
  11.         <div class="swiper-slide p2">  
  12.             <h1>页面标题二</h1>  
  13.             <p>页面内容</p>  
  14.         </div>  
  15.   
  16.   
  17.         <div class="swiper-slide p3">  
  18.             <h1>页面标题三</h1>  
  19.             <p>页面内容</p>  
  20.         </div>  
  21.   
  22.   
  23.         <div class="swiper-slide p4">  
  24.             <h1>页面标题四</h1>  
  25.             <p>页面内容</p>  
  26.         </div>  
  27.   
  28.   
  29.   
  30.     </div>      
  31.     <div class="swiper-pagination"></div>  
  32. </div>  
  33.   
  34. <div class="up_icon"></div>  
  35.   
  36.   
  37.       
  38. </body>  
3.

 简单的介绍一下关于EasyUI这个前端框架的基本内容（前端框架还要熟悉Bootstrap这个）。

1：EasyUI引用的知识点

[html]  view plain  copy
  1. <!-- 引入css文件，不限顺序 -->  
  2.     <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>  
  3.     <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>  
  4.     
  5.     <!-- 引入js文件，有顺序限制 -->  
  6.     <script type="text/javascript" src="../js/jquery.min.js"></script>  
  7.     <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>  

对于这个引用的，顺便就再提一下，如何引用Bootstrap前端框架的资源文件

（1）详细版的介绍（适合初学者熟悉具体的内容）

[html]  view plain  copy
  1. <head>  
  2.         <meta charset="utf-8">  
  3.         <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->  
  4.         <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  5.         <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->  
  6.         <!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示-->   
  7.         <!--width    设置layout viewport  的宽度，为一个正整数，或字符串"width-device"(表示采用设备的宽度)  
  8.             initial-scale   设置页面的初始缩放值，为一个数字，可以带小数  
  9.             minimum-scale   允许用户的最小缩放值，为一个数字，可以带小数  
  10.             maximum-scale   允许用户的最大缩放值，为一个数字，可以带小数  
  11.             height  设置layout viewport  的高度，这个属性对我们并不重要，很少使用  
  12.             user-scalable   是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许  
  13.             如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效  
  14.         -->  
  15.         <meta name="viewport" content="width=device-width, initial-scale=1">  
  16.         <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->  
  17.         <title>Bootstrap完整模板</title>  
  18.   
  19.         <!-- 引入Bootstrap核心样式文件 -->  
  20.         <link href="../../css/bootstrap.min.css" rel="stylesheet">  
  21.   
  22.         <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->  
  23.         <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果，必须放置到web服务器中，暂时不必掌握 -->  
  24.       <!--[if lt IE 9]>  
  25.          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>  
  26.          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>  
  27.       <![endif]-->  
  28.     </head>  
（2）简单版（开发中用就可以了）

[html]  view plain  copy
  1. <head>  
  2.         <meta charset="utf-8">  
  3.         <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->  
  4.         <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  5.         <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->  
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.         <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->  
  8.         <title>商城首页</title>  
  9.   
  10.         <!-- 引入Bootstrap核心样式文件 -->  
  11.         <link href="../css/bootstrap.css" rel="stylesheet">  
  12.   
  13.         <!-- 引入jQuery核心js文件 -->  
  14.         <script src="../js/jquery-1.11.3.min.js"></script>  
  15.         <!-- 引入BootStrap核心js文件 -->  
  16.         <script src="../js/bootstrap.min.js"></script>  
  17.     </head>  
解析：记住为了适配的话，一定要引用meta标签的这几个内容，还要就是先引用CSS再引用JS文件，并且需要先引用jQuery的文件，再引用Bootstrap的文件，然后再引用自己需要添加的额外的js外部文件。
2：划分页面区域（五个区域的构造和混合构造）

[html]  view plain  copy
  1. <!-- 正规布局 -->  
  2.         <div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">              
  3.             <!-- 区域面板--北边 -->  
  4.             <div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>              
  5.             <!-- 区域面板--南边 -->  
  6.             <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>                
  7.             <!-- 区域面板--东边 -->  
  8.             <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>               
  9.             <!-- 区域面板--西边 -->  
  10.             <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>     
  11.             <!-- 区域面板--中间 -->  
  12.             <div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>                
  13.         </div>  
(混合构造，可根据需要进行自由的组合)
[html]  view plain  copy
  1. <div id="layoutID" class="easyui-layout" data-options="fit:true">   
  2.         <!-- 北 -->  
  3.         <div data-options="region:'north'" style="height:100px"></div>         
  4.         <!-- 中 -->   
  5.         <div data-options="region:'center'">        
  6.             <div class="easyui-layout" data-options="fit:true">             
  7.                 <!-- 西 -->      
  8.                 <div data-options="region:'west'" style="width:200px"></div>              
  9.                 <!-- 中 -->  
  10.                 <div data-options="region:'center'">                
  11.                     <div class="easyui-layout" data-options="fit:true">                 
  12.                         <!-- 北 -->  
  13.                         <div data-options="region:'north'" style="height:100px"></div>                        
  14.                         <!-- 中 -->  
  15.                         <div data-options="region:'center'"></div>                
  16.                     </div>                  
  17.                 </div>              
  18.             </div>  
  19.         </div>      
  20.     </div>          

3：以下说几个用在form表单中的一些标签元素

（1）form表单中的验证功能（例子包含了，如何进行自定义验证的方法）

[html]  view plain  copy
  1. 姓名：<input id="nameID"/><p/>  
  2.       
  3.     <script type="text/javascript">  
  4.         $("#nameID").validatebox({  
  5.             required : true,        
  6.             validType : ['length[1,6]','zhongwen']   //当需要多个验证条件的时候，就用这样的数组方式，否则可以用key，value的映射方式  
  7.         });  
  8.     </script>  
  9.     <script type="text/javascript">    //自定义验证格式  
  10.         //自定义规则:zhongwen  
  11.         $.extend($.fn.validatebox.defaults.rules, {      
  12.             //zhongwen规则名  
  13.             zhongwen: {    
  14.                 //validator验证体    
  15.                 //value表示用户在文本框中输入的内容  
  16.                 validator: function(value){     
  17.                     //如果符合中文规则   
  18.                     if(/^[\u3220-\uFA29]*$/.test(value)){   
  19.                         return true;      
  20.                     }  
  21.                 },   
  22.                 //如果不符合中文规则，以下就是提示信息     
  23.                 message: '姓名必须为中文'     
  24.             }      
  25.         });    
  26.     </script>  
  27.       
  28.     邮箱：<input id="emailID"/><p/>  
  29.   
  30.     <script type="text/javascript">  
  31.         $("#emailID").validatebox({  
  32.             required : true,  
  33.             validType : ['length[1,30]','email']  
  34.         });  
  35.     </script>  
  36.   
  37.     密码：<input id="passwordID"/><p/>  
  38.   
  39.     <script type="text/javascript">  
  40.         $("#passwordID").validatebox({  
  41.             required : true,  
  42.             validType : ['length[6,6]','english']  
  43.         });  
  44.     </script>  
  45.     <script type="text/javascript">       //自定义验证格式  
  46.         $.extend($.fn.validatebox.defaults.rules, {      
  47.             english: {    
  48.                 validator: function(value){     
  49.                     if(/^[a-zA-Z]*$/.test(value)){     //英文的正则匹配  
  50.                         return true;      
  51.                     }  
  52.                 },   
  53.                 message: '密码必须为英文'     
  54.             }      
  55.         });    
  56.     </script>  
（2）:下拉列表的使用(这里面的内容，是用json格式的数据来进行测试的，当然这个url还可以是你的servlert等等)
[html]  view plain  copy
  1. 城市：  
  2.     <input id="cityID" name="city"/>    
  3.       
  4.     <script type="text/javascript">  
  5.         //url表示请求的路径  
  6.         //valueField表示传到服务器的值，看不见的  
  7.         //textField表示页面中显示的值，看得见  
  8.         $("#cityID").combobox({  
  9.             url : "../json/city.json",  
  10.             valueField :"id",      
  11.             textField : "name"     
  12.         });  
  13.     </script>  
  14.     <script type="text/javascript">  
  15.         $(function(){  
  16.             //为下拉组合框设置值  
  17.             $("#cityID").combobox("setValue","长沙");  
  18.         });  
  19.     </script>  
（3）:datebox日期输入框
[html]  view plain  copy
  1. 入职时间：  
  2.     <input id="dd" type="text"/>  
  3.     <script type="text/javascript">  
  4.         $("#dd").datebox({  
  5.             required : true  
  6.         });  
  7.     </script>  
  8.     <script type="text/javascript">  
  9.         $("#dd").datebox({  
  10.             onSelect : function(mydate){  
  11.                 var year = mydate.getFullYear();   
  12.                 var month = mydate.getMonth() + 1;  
  13.                 var date = mydate.getDate();  
  14.                 alert(year+ "年" + month + "月" + date + "日");  
  15.             }  
  16.         });  
  17.     </script>  
（4）：数字微调器numberspinner
[html]  view plain  copy
  1. 商品数量:  
  2.     <input id="ss" style="width:80px;">   
  3.     <script type="text/javascript">  
  4.         $("#ss").numberspinner({  
  5.             min : 1,    //设置最小值  
  6.             max : 100,  //设置最大值  
  7.             value : 1   //设置默认值  
  8.         });  
  9.     </script>  
  10.     <p/>  
  11.     你一共购买了<span id="num">1</span>个商品  
  12.           
  13.         //上下调的监听  
  14.     <script type="text/javascript">  
  15.         $("#ss").numberspinner({  
  16.             onSpinUp : function(){     //上调的监听  
  17.                 //获取数字微调的当前值  
  18.                 var value = $("#ss").numberspinner("getValue");  
  19.                 //将当前值设置到span标签中  
  20.                 $("#num").text(value).css("color","red");  
  21.             },  
  22.             onSpinDown : function(){     //下调的监听  
  23.                 //获取数字微调的当前值  
  24.                 var value = $("#ss").numberspinner("getValue");  
  25.                 //将当前值设置到span标签中  
  26.                 $("#num").text(value).css("color","red");  
  27.             }  
  28.         });  
  29.     </script>  
  30.       
  31.     //funciton：当在输入框中输入数字后，回车，将内容显示到span中，同步  
  32.     <script type="text/javascript">  
  33.         $("#ss").keyup(function(xxx){  
  34.             //将浏览器产生的事件对象设置到myevent变量中  
  35.             var myevent = xxx;  
  36.             //获取按键的unicode编码  
  37.             var code = myevent.keyCode;  
  38.             //如果按钮是回车  
  39.             if(code == 13){  
  40.                 //获取数字微调的当前值，因为$(this)此时表示的是文本框，直接获取value属性值即可  
  41.                 var value = $(this).val();  
  42.                 //将当前值设置到span标签中  
  43.                 $("#num").text(value).css("color","red");     
  44.             }  
  45.         });  
  46.     </script>  
（5）：slide滑块条
[html]  view plain  copy
  1. <div style="margin:100px">  
  2.         身高：<span id="tip"></span>  
  3.         <p/>  
  4.         <div id="ss" style="height:400px;width:600px"></div>    
  5.     </div>  
  6.     <script type="text/javascript">  
  7.         $("#ss").slider({  
  8.             mode : "v",  
  9.             min : 150,  
  10.             max : 190,  
  11.             rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],  
  12.             showTip : true,  
  13.             value : 150  
  14.         });  
  15.     </script>  
  16.           
  17.     //当滑动条的数值改变后，进行对数值的一个判定的小例子  
  18.     <script type="text/javascript">  
  19.         $("#ss").slider({  
  20.             onChange : function(newValue){  
  21.                 if(newValue == 160){  
  22.                     $("#tip").text("合格").css("color","blue");  
  23.                 }else if(newValue == 170){  
  24.                     $("#tip").text("良好").css("color","green");  
  25.                 }else if(newValue == 180){  
  26.                     $("#tip").text("优秀").css("color","pink");  
  27.                 }else if(newValue == 190){  
  28.                     $("#tip").text("卓越").css("color","red");  
  29.                 }     
  30.             }  
  31.         });  
  32.     </script>  
4：progressBar进度条
[html]  view plain  copy
  1. <div id="p" style="width:400px;"></div>   
  2.     <script type="text/javascript">   //用动态的方法来绑定，这其实都可以直接在初始化的时候，直接进行写，注意一下就好了，上面的例子都可以  
  3.         $("#p").progressbar({   
  4.             width : 1300,  
  5.             height : 100,  
  6.             value : 0  
  7.         });  
  8.     </script>       
  9.     <input id="startID" type="button" value="动起来" style="width:111px;height:111px;font-size:33px"/>     
  10.     <script type="text/javascript">  
  11.         //获取1到9之间的随机数，包含1和9  
  12.         function getNum(){  
  13.             return Math.floor(Math.random()*9)+1;  
  14.         }  
  15.     </script>  
  16.     <script type="text/javascript">  
  17.         var timeID = null;  
  18.         //函数  
  19.         function update(){  
  20.             //获取随机值,例如：3  
  21.             var num = getNum();  
  22.             //获取进度条当前值，例如：99  
  23.             var value = $("#p").progressbar("getValue");  
  24.             //判断  
  25.             if(value + num > 100){  
  26.                 //强行设置进度条的当前值为100  
  27.                 $("#p").progressbar("setValue",100);  
  28.                 //停止定时器  
  29.                 window.clearInterval(timeID);  
  30.                 //按钮正效  
  31.                 $("#startID").removeAttr("disabled");  
  32.             }else{  
  33.                 //设置进度条的当前值为num+value的和  
  34.                 $("#p").progressbar("setValue",(value+num));  
  35.             }  
  36.         }  
  37.         //定拉按钮，同时提供单击事件  
  38.         $("#startID").click(function(){  
  39.             //每隔300毫秒执行update方法  
  40.             timeID = window.setInterval("update()",300);  
  41.             //按钮失效  
  42.             $(this).attr("disabled","disabled");  
  43.         });  
  44.     </script>  
5：window
[html]  view plain  copy
  1. <input type="button" value="打开窗口1" id="open1"/>  
  2.     <input type="button" value="关闭窗口1" id="close1"/>  
  3.       
  4.     <div style="margin:600px"></div>  
  5.           
  6.     <div id="window1"></div>  
  7.           
  8.     <script type="text/javascript">  
  9.         //定位打开窗口1按钮，同时添加单击事件  
  10.         $("#open1").click(function(){  
  11.             //打开窗口1  
  12.             $("#window1").window({  
  13.                 title : "窗口1",  
  14.                 width : 840,  
  15.                 height : 150,  
  16.                 left : 200,  
  17.                 top : 100,  
  18.                 minimizable : false,  
  19.                 maximizable : false,  
  20.                 collapsible : false,  
  21.                 closable : false,  
  22.                 draggable : false,  
  23.                 resizable : true,  
  24.                 href : "/js-day06/empList.jsp"  
  25.             });  
  26.         });  
  27.     </script>  
  28.       
  29.     <script type="text/javascript">  
  30.         //定位关闭窗口1按钮，同时添加单击事件  
  31.         $("#close1").click(function(){  
  32.             //关闭窗口1  
  33.             $("#window1").window("close");  
  34.         });  
  35.     </script>  

6：dialog对话框

[html]  view plain  copy
  1. <input type="button" value="打开对话框" id="open"/>  
  2.   
  3.     <div style="margin:600px"></div>  
  4.   
  5.     <div id="dd"></div>  
  6.     <script type="text/javascript">  
  7.         $("#open").click(function(){  
  8.             $("#dd").dialog({  
  9.                 title : "对话框",  
  10.                 width : 300,  
  11.                 height : 400,  
  12.                 left : 200,  
  13.                 top : 100,  
  14.                 minimizable : false,  
  15.                 maximizable : false,  
  16.                 collapsible : false,  
  17.                 closable : false,  
  18.                 draggable : false,  
  19.                 resizable : true,  
  20.                 toolbar : [  
  21.                     {  
  22.                         text:'编辑',  
  23.                         iconCls:'icon-edit',  
  24.                         handler:function(){alert('edit')}  
  25.                     },  
  26.                     {  
  27.                         text:'帮助',  
  28.                         iconCls:'icon-help',  
  29.                         handler:function(){alert('help')}  
  30.                     }  
  31.                 ],  
  32.                 buttons : [  
  33.                     {  
  34.                         text:'提交',  
  35.                         handler:function(){alert("提交");}  
  36.                     },  
  37.                     {  
  38.                         text:'关闭',  
  39.                         handler:function(){  
  40.                             //关闭对话框  
  41.                             $("#dd").dialog("close");     
  42.                         }  
  43.                     }  
  44.                 ],  
  45.                 href : "/js-day06/easyui/10_form.html"  
  46.             });  
  47.         });   
  48.     </script>   

其中的href是另外一个页面（这个相当于内嵌一样的作用）

[html]  view plain  copy
  1. <form>  
  2.         <table border="2" align="center">  
  3.             <tr>  
  4.                 <th>姓名：</th>  
  5.                 <td><input id="nameID" type="text"/></td>  
  6.             </tr>  
  7.             <tr>  
  8.                 <th>入职时间：</th>  
  9.                 <td><input id="dateID" type="text"/></td>  
  10.             </tr>  
  11.         </table>  
  12.     </form>  
  13.     <script type="text/javascript">  
  14.         $("#nameID").validatebox({  
  15.             required : true,  
  16.             validType : ['length[1,6]','zhongwen']  
  17.         });  
  18.     </script>  
  19.     <script type="text/javascript">  
  20.         $.extend($.fn.validatebox.defaults.rules, {      
  21.             zhongwen: {    
  22.                 validator: function(value){     
  23.                     if(/^[\u3220-\uFA29]*$/.test(value)){  
  24.                         return true;      
  25.                     }  
  26.                 },   
  27.                 message: '姓名必须为中文'     
  28.             }      
  29.         });    
  30.     </script>  
  31.     <script type="text/javascript">  
  32.         $("#dateID").datebox({  
  33.             required : true  
  34.         });  
  35.     </script>  
注意一点：大家在运行的时候，记得修改好对应的路径，否则是加载不出来的！！！！
7：message信息框

[html]  view plain  copy
  1. <input type="button" value="警告框"/><br/>  
  2.     <input type="button" value="确认框"/><br/>  
  3.     <input type="button" value="输入框"/><br/>  
  4.     <input type="button" value="显示框"/><br/>  
  5.       
  6.       
  7.     <div style="margin:100px"></div>  
  8.     <script type="text/javascript">  
  9.         //定位所有的button按钮，同时提供单击事件  
  10.         $(":button").click(function(){  
  11.             //获取value属性值  
  12.             var tip = $(this).val();  
  13.             //去空格  
  14.             tip = $.trim(tip);  
  15.             //如果警告框的话  
  16.             if("警告框" == tip){  
  17.                 $.messager.alert("警告框","继续努力","warning",function(){  
  18.                     alert("关闭");  
  19.                 });  
  20.             }else if("确认框" == tip){  
  21.                 $.messager.confirm("确认框","你确认要关闭该确认框吗?",function(value){  
  22.                     alert(value);  
  23.                 });   
  24.             }else if("输入框" == tip){  
  25.                 $.messager.prompt("输入框","你期希的月薪是多少?",function(sal){  
  26.                       
  27.                     if(sal == undefined){  
  28.                         alert("请输入月薪");  
  29.                     }else{  
  30.                         if(sal<6000){  
  31.                             alert("你的谦虚了");  
  32.                         }else if(sal < 7000){  
  33.                             alert("你加点油了");  
  34.                         }else{  
  35.                             alert("你很不错了");  
  36.                         }  
  37.                     }  
  38.                       
  39.                 });  
  40.             }else if("显示框" == tip){  
  41.                 $.messager.show({  
  42.                     showType : "slide",  
  43.                     showSpeed : 500,  
  44.                     width : 300,  
  45.                     height : 300,  
  46.                     title : "显示框",  
  47.                     msg : "这是内容",  
  48.                     timeout : 5000  
  49.                 });  
  50.             }  
  51.         });   
8：tree树

（1）静态生成一个tree树的内容

[html]  view plain  copy
  1. <ul id="treeID" class="easyui-tree">     
  2.        <li>  
  3.             <span>第一章</span>  
  4.             <ul>  
  5.                 <li>  
  6.                     <span>第一节</span>  
  7.                     <ul>  
  8.                         <li>  
  9.                             <span>第一条</span>  
  10.                         </li>  
  11.                         <li>  
  12.                             <span>第二条</span>  
  13.                         </li>  
  14.                     </ul>  
  15.                 </li>  
  16.                 <li>  
  17.                     <span>第二节</span>  
  18.                 </li>  
  19.             </ul>      
  20.        </li>  
  21.        <li>  
  22.             <span>第二章</span>  
  23.        </li>  
  24.     </ul>    
  25.       
  26.     <script type="text/javascript">  
  27.         $(function(){  
  28.             //收起所有的选项  
  29.             $("#treeID").tree("collapseAll");  
  30.         });  
  31.     </script>  

（2）动态生成tree树

[html]  view plain  copy
  1. <ul id="treeID"></ul>  
  2.     <script type="text/javascript">  
  3.         $("#treeID").tree({  
  4.             url : "/js-day06/json/pro.json"  
  5.         });  
  6.     </script>  
注意一点：上面的tree树的内容是用json格式来存储的，这个在开发中就可以通过数据库中的内容来自动进行生成。下面就是例子中的json格式的数据

[html]  view plain  copy
  1. [  
  2.   {      
  3.     "id":1,      
  4.     "text":"广东",  
  5.     "state":"closed",  
  6.     "children":[  
  7.     {  
  8.        "id":11,  
  9.        "text":"广州"  ,  
  10.            "state":"closed",  
  11.            "children":[  
  12.           {  
  13.          "id":111,      
  14.                  "text":"天河"  
  15.           },      
  16.           {  
  17.          "id":112,      
  18.                  "text":"越秀"  
  19.           }   
  20.        ]  
  21.     },  
  22.     {  
  23.        "id":12,  
  24.        "text":"深圳"        
  25.     }  
  26.     ]  
  27.   },      
  28.   {      
  29.     "id":2,      
  30.     "text":"湖南"  
  31.   }   
  32. ]   
9：几款比较有趣的jQuery插件

（1）列表下拉框的效果

[html]  view plain  copy
  1. <link href="css/webwidget_menu_dropdown.css" rel="stylesheet" type="text/css">  
  2. </link>  
  3. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  
  4. <script type="text/javascript" src="js/webwidget_menu_dropdown.js"></script>  
  5. <style type="text/css">  
  6. h2 { color: red; }  
  7. pre { padding: 4px; border: #F90 dotted 1px; }  
  8. </style>  
  9. </head>  
  10. <body>  
  11. <script language="javascript" type="text/javascript">  
  12.             $(function() {  
  13.                 $("#webwidget_menu_dropdown").webwidget_menu_dropdown({  
  14.                     m_w: '100',  //li的宽度  
  15.                     m_t_c: '#FFF',   //li的字体颜色  
  16.                     m_c_c: '#8FC45A', //第一个li的颜色  
  17.                     m_bg_c: '#56A901',//除去第一个li的颜色  
  18.                     m_b_s: '2',  //每个li的间隔  
  19.                     m_bg_h_c: '#8FC45A', //选中li时候的颜色  
  20.                     s_s: 'fast',  //展开列表的速度，还可以是slow（缓慢）  
  21.                     m_s: 'small' //li的高度  
  22.                 });  
  23.                               
  24.         </script>  
  25. <h1>Multicolor animation drop down navigation menu with jQuery</h1>  
  26. <h2>Demo1</h2>  
  27. <div id="webwidget_menu_dropdown" class="webwidget_menu_dropdown">  
  28.   <ul>  
  29.     <li class="current"><a href="link1">Menu1</a>  
  30.       <ul>  
  31.         <li><a href="link1">submenu1</a> </li>  
  32.         <li><a href="link2">submenu2</a></li>  
  33.         <li><a href="link3">牛niu图tu库ku</a></li>  
  34.         <li><a href="link4">submenu4</a></li>  
  35.         <li><a href="link5">submenu5</a></li>  
  36.         <li><a href="link6">submenu6</a></li>  
  37.       </ul>  
  38.     </li>  
  39.     <li><a href="link2">Menu2</a>  
  40.       <ul>  
  41.         <li><a href="link1">submenu1</a> </li>  
  42.         <li><a href="link2">submenu2</a></li>  
  43.         <li><a href="link3">submenu3</a></li>  
  44.         <li><a href="link4">submenu4</a></li>  
  45.         <li><a href="link5">submenu5</a></li>  
  46.         <li><a href="link6">submenu6</a></li>  
  47.       </ul>  
  48.     </li>  
  49.     <li><a href="link3">牛niu图tu库ku</a>  
  50.       <ul>  
  51.         <li><a href="link1">submenu1</a> </li>  
  52.         <li><a href="link2">submenu2</a></li>  
  53.         <li><a href="link3">submenu3</a></li>  
  54.         <li><a href="link4">submenu4</a></li>  
  55.         <li><a href="link5">submenu5</a></li>  
  56.         <li><a href="link6">submenu6</a></li>  
  57.       </ul>  
  58.     </li>  
  59.     <li><a href="link4">Menu4</a>  
  60.       <ul>  
  61.         <li><a href="link1">submenu1</a> </li>  
  62.         <li><a href="link2">submenu2</a></li>  
  63.         <li><a href="link3">submenu3</a></li>  
  64.         <li><a href="link4">submenu4</a></li>  
  65.         <li><a href="link5">submenu5</a></li>  
  66.         <li><a href="link6">submenu6</a></li>  
  67.       </ul>  
  68.     </li>  
  69.     <li><a href="link5">Menu5</a>  
  70.       <ul>  
  71.         <li><a href="link1">submenu1</a> </li>  
  72.         <li><a href="link2">submenu2</a></li>  
  73.         <li><a href="link3">submenu3</a></li>  
  74.         <li><a href="link4">submenu4</a></li>  
  75.         <li><a href="link5">submenu5</a></li>  
  76.         <li><a href="link6">submenu6</a></li>  
  77.       </ul>  
  78.     </li>  
  79.     <li><a href="link6">Menu6</a>  
  80.       <ul>  
  81.         <li><a href="link1">submenu1</a> </li>  
  82.         <li><a href="link2">submenu2</a></li>  
  83.         <li><a href="link3">submenu3</a></li>  
  84.         <li><a href="link4">submenu4</a></li>  
  85.         <li><a href="link5">submenu5</a></li>  
  86.         <li><a href="link6">submenu6</a></li>  
  87.       </ul>  
  88.     </li>  
  89.   </ul>  
  90.   <div style="clear: both"></div>  
  91. </div>  
记得导入上面提到的CSS和JS两个库，否则没有效果

（2）图片的轮播效果

[html]  view plain  copy
  1. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  
  2. </head>  
  3. <body style="text-align:center;">  
  4. <link href="css/webwidget_slideshow_dot.css" rel="stylesheet" type="text/css"/>  
  5. <script type="text/javascript" src="js/webwidget_slideshow_dot.js"></script>  
  6. <script language="javascript" type="text/javascript">  
  7.             $(function() {  
  8.                 $("#demo1").webwidget_slideshow_dot({  
  9.                     slideshow_time_interval: '5000',  
  10.                     slideshow_window_width: '200',  
  11.                     slideshow_window_height: '200',  
  12.                     slideshow_title_color: '#17CCCC',  
  13.                     soldeshow_foreColor: '#000',  
  14.                     directory: 'images/'  
  15.                 });  
  16.             });  
  17.         </script>  
  18. <div id="demo1" class="webwidget_slideshow_dot">  
  19.   <ul>  
  20.     <li><a href="link1" title="Sky"><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></a></li>  
  21.     <li><a href="link2" title="Sea"><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></a></li>  
  22.     <li><a href="link3" title="Flower"><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></a></li>  
  23.     <li><a href="link4" title="Treelink4"><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></a></li>  
  24.   </ul>  
  25.   <div style="clear: both"></div>  
  26. </div>  
记得导入例子中引用的资源文件，这个百度下载都有

（3）如果想看到更多的插件的效果，下面粘贴一个网站，里面有很多大神写的东西，简单和便捷

http://www.ijquery.cn/?cat=2

内容还没完，我会不断进行更新的哦。。。感谢大家的浏览，欢迎共同学习交流！！！！

Alvin_扣扣953821815
关注
专栏目录
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
12-28
一、EasyUI创建简单的菜单 菜单（Menu）定义在一些 DIV 标记中，如下所示： <div id=mm class=easyui-menu xss=removed> <div xss=removed>New <span>Open <div><b>Word</b></div> <div>Excel <div>...
JS动画效果(移动、透明度、缓冲、多物体)
Qimingweikun的博客
10-24 506
JavaScript中可以通过setInterval()函数来实现动态效果。 setInterval()函数设置一个定时器，可以按照指定周期调用函数或计算表达式。setInterval()可以不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
前端页面报错：TypeError: $.widget is not a function
qq_32031745的博客
11-07 5001
在Java项目中，正常启动无报错。但是打开对应页面，出现报错：TypeError: $.widget is not a function。 解决方式：下载jquery-ui.min.js文件，并添加到对应的jsp/html中。如下所示： &lt;script type="text/javascript" src="js路径/jquery-ui.min.js"&gt;&lt;/script&gt...
jquery.cookie.js的操作及cookie的使用方法
热门推荐
qq_45830276的博客
04-12 1万+
jquery.cookie.js的操作及cookie的使用方法：
jquery.cookie.js源码和使用方法
笨鸟快飞的专栏
09-23 2029
jQuery操作cookie的插件,大概的使用方法如下 $.cookie('the_cookie’); //读取Cookie值 $.cookie(’the_cookie’, ‘the_value’); //设置cookie的值 $.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’,
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
11-24
EasyUI是一个基于jQuery的轻量级框架，提供了一系列组件，如datagrid、dialog、form和messager，使得构建用户界面变得更加简单。 首先，我们来了解EasyUI创建CRUD应用的基本步骤： 1. **准备数据库**：在这个例子...
jquery-easyui.zip_easyui框架_html 框架_jquery-easyui
09-21
EasyUI 是一个基于 jQuery 的轻量级前端框架，它为开发者提供了一系列的组件和插件，使得构建交互式用户界面变得更加便捷。这个压缩包“jquery-easyui.zip”包含了使用 EasyUI 实现的一个HTML框架，它主要用于简化...
轻松学习jQuery插件EasyUI EasyUI表单验证
12-28
通过使用 easyui 表单（form）插件来改变表单（form）为 ajax 表单（form）。表单（form）提交所有字段到后台服务器，服务器处理和发送一些数据返回到前端页面。我们接收返回数据，并将它显示出来。 创建表单（Form...
easyui引入css和js顺序
newbie_jun的博客
06-15 3797
easyui-mini.js依赖于jQuery.js,要在jQuery.js引入之后引入;还有自己写的一些js要使用easyui组件的也要在easyui-mini.js引入之后再引入;刚才有在做一个easyui-tree;需要使用自定义的图标;之前有做过测试,再icon.css中添加.test{background:url("") no-repeat 0 0}之后,html中使用div.test ...
kgb:超轻量级 javascript 决策树构建器
06-30
名称 .js 概要 一个超轻量级的 javascript 工具，用于构建向导-y 'if that then this' 工作流和多步骤表单。 用法 kgb.js 消除了构建基于答案显示/隐藏步骤的多步骤表单的乏味。 它累积每一步的答案，并将这些答案提供给客户端代码以执行任意处理。 给定一个多步骤的形式，组织如下： < ! -- -- > < form data-kgb-key = 'question-1' > < input type = 'radio' name = 'question' value = 'a' > < input type = 'radio' name = 'question' value = 'b' > < br> < input type = 'submit' > < / form >
EasyUI API 中文 1.7版
01-30
根据http://www.jeasyui.net/plugins手工制作中文版API。当前最新版1.7.2
jquery.easyui.min.js
09-13
修改easui tree ,使得更合理，修改前：加载后默认展开，若设置“state”为closed 就一直显示展开符号。修改后：自动判断，更合理，设置好 option的 data属性后自动判断是否有下级，以决定是否展开。另外升级显示样式，截图所示
Jquery.easyUI js引用以及文档教程
12-15
这里面是 jQuery-easyUI的引用 以及引用的示例,里面有一份教程文档 可以参照着学习和借鉴
EasyUI和JS的API
02-02
前端各类API前端各类API前端各类API前端各类API前端各类API前端各类API前端各类API前端各类API前端各类API前端各类API前端各类API前端各类API前端各类API
easyUI小技巧-纯干货
大漠雁
08-25 2722
一、显示分页（pagination:true）情况下，隐藏每页显示的记录条数的那个select（即pageList），下图箭头 方法1： onBeforeLoad:function(param){     $('#'+$(this)[0].id).datagrid('getPager').pagination({         showPageList:false
Jquery EasyUI,一个很好用的web插件
09-22
easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强大的。
Js和EasyUi随笔小记
alex宋
06-03 330
1.JavaScript 中的shfit()方法用于将数组的第一个元素删除并且返回第一个元素的值，要删除数组中的最后一个元素用pop()方法。 2.easyui或者jquery设置日期控件默认选择日期： 3.日期格式精确到毫秒格式:yyyy-MM-dd HH:mm:ss SSS 4.3.Arrays类的asList() 将字符串数组转换成List集合 方法的使用     eg: Strin
宝具滑 / JS简单实现决策树(ID3算法)
瞎写瞎记录
01-09 1136
// 文章: https://www.jianshu.com/p/2b50a98cd75c function DecisionTree(config) { if (typeof config == "object" && !Array.isArray(config)) this.training(config); }; DecisionTree.protot
EasyUI框架详解与JavaScript jQuery基础
在学习EasyUI的过程中，JavaScript和jQuery的基本功至关重要，而通过官方实例和文档的学习，可以快速上手并熟练运用EasyUI进行项目开发。同时，了解和掌握其他类似框架，可以进一步提升开发者的技能多样性，适应不同...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值