JS与jQuery插件运用和EasyUI框架的学习干货（三）
来源：互联网 发布：数据库sql语句大全 编辑：程序博客网 时间：2024/06/07 03:52
下面介绍下jQuery的一些应用，在之前的上一篇中讲解了jQuery的知识点，可以进行阅读一下。而这里主要是说一下jQuery还运用到某些其他的方面的知识。
1：网页端本地存储的方式（三种）
（一）：cookie存储
// cookie的读和写需要在服务器环境下//写cookie$.cookie('mycookie','ok!',{expires:7,path:'/'});//读cookievar val = $.cookie('mycookie');alert(val);（二）：localStorage存储<script type="text/javascript">//写入//localStorage.setItem('mystorage','ok!');//sessionStorage.setItem('pwd','123');// 读取alert(localStorage.mystorage);</script//获取：localStorage.getItem("dat");localStorage.dat//删除localStorage.removeItem("dat");方法：sessionStorage。setItem（‘pad’，‘123’）；
总结：它们的区别：（1）：存储大小：cookie为4k，而后面两个为5M
（2）：传输携带：cookie会被在HTTP传输中被携带，loaclStrorage是保存在本地，session是在同源页面
（3）：存在时间：cookie可以进行设置，loaclStorage一直会存在本地（不被用户主动删除的情况），而sessoin是在关闭页面后消失
注意一下：Iphone的无痕浏览只能支持cookie，其他两个都不支持
（四）具体实例（网页的消息推送）
DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body{margin:0;}.pop{width:400px;height:300px;background-color:#fff;border:1px solid #ccc;position:fixed;left:50%;top:50%;margin-left:-200px;margin-top:-250px;z-index:9999;opacity:0;filter:alpha(opacity=0);}.pop span{float:right;font-size:30px;cursor:pointer;}.mask{width:100%;height: 100%;background-color:#000;opacity:0.6;filter:alpha(opacity=60);position:fixed;z-index:9990;left:0;top:0}.pop_con{display:none;}.hasknow{text-align:center;cursor:pointer;margin-top:100px;}</style><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/jquery.cookie.js"></script><script type="text/javascript">$(function(){var read = $.cookie('hasread');//alert(read);if(read==undefined){$('.pop_con').show();$('.pop').animate({marginTop:-150,opacity:1});}$('.hasknow').click(function() {$.cookie('hasread','ok',{expires:7,path:'/'});$('.pop_con').hide();});})</script></head><body><div class="pop_con"><div class="pop"><span>×</span><p>我们网站有优惠，赶紧行动吧！亲！</p><p class="hasknow">我知道了</p></div><div class="mask"></div></div><h1>网站首页</h1></body></html>2：jQueryUI插件的使用（1）例子：实现拖拉功能
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript">$(function(){$('.box').draggable({// 约束元素在父级内拖动containment:'parent',//限制在x轴向拖动//axis:'x',//拖动是透明度变为0.6opacity:0.6,drag:function(ev,ui){console.log(ui.position.left);}});})</script><style type="text/css">.con{width:300px;height:300px;border:1px solid #000;margin:50px auto 0;}.box{width:40px;height:40px;background-color:gold;cursor:pointer;}</style></head><body><div class="con"><div class="box"></div></div></body>（2）例子：实现拖拉进度条功能<script type="text/javascript">$(function(){$('.dragbar').draggable({axis:'x',containment:'parent',//containment:[0,0,600,0]opacity:0.6,drag:function(ev,ui){//console.log(ui.position.left);var nowleft = ui.position.left;$('.progress').css({width:nowleft});$('.slide_count').val(parseInt(nowleft*100/570));}});})</script><style type="text/css">.slidebar_con{width:650px;height:32px;margin:50px auto 0;}.slidebar{width:600px;height:30px;border:1px solid #ccc;float:left;position:relative;}.slidebar .dragbar{width:30px;height:30px;background-color:gold;cursor:pointer;position:absolute;left:0;top:0;}.slidebar .progress{width:0px;height:30px;background-color:#f0f0f0;position:absolute;left:0;top:0;}.slide_count{padding:0;float:right;width:40px;height:30px;border:1px solid #ccc;text-align:center;font-size:16px;}</style></head><body><div class="slidebar_con"><div class="slidebar"><div class="progress"></div><div class="dragbar"></div></div><input type="text" name="" value="0" class="slide_count"></div></body>（3）例子：实现自定义滚动条<script type="text/javascript">$(function(){var h = $('.paragraph').outerHeight();var hide = h-500;$('.scroll_bar').draggable({axis:'y',containment:'parent',opacity:0.6,drag:function(ev,ui){var nowtop = ui.position.top;var nowscroll = parseInt(nowtop/290*hide);$('.paragraph').css({top:-nowscroll});}});})</script><style type="text/css">.scroll_con{width:400px;height:500px;border:1px solid #ccc;margin:50px auto 0;position:relative;overflow:hidden;}.paragraph{width:360px;position:absolute;left:0;top:0;padding:10px 20px;font-size:14px;font-family:'Microsoft Yahei';line-height:32px;text-indent:2em;}.scroll_bar_con{width:10px;height:490px;position:absolute;right:5px;top:5px;}.scroll_bar{width:10px;height:200px;background-color:#ccc;position:absolute;left:0;top:0;cursor:pointer;border-radius:5px;}</style></head><body><div class="scroll_con"><div class="paragraph">2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。</div><div class="scroll_bar_con"><div class="scroll_bar"></div></div> </div>3：Zepto插件的使用（用于移动端开发插件，比如手指左右滑动，点击等）
（1）基本事件（测试的时候，要将网页转为移动端面板才会有效果）
<script type="text/javascript" src="js/zepto.min.js"></script><style type="text/css">.box{width:300px;height:300px;background-color: gold;}</style><script type="text/javascript">$(function(){$('.box').tap(function(){alert('tap');});$('.box').click(function(){alert('click');});$('.box').longTap(function(){alert('long tap');});$('.box').swipe(function(){alert('swipe');})$('.box').swipeLeft(function(){alert('swipe left');})$('.box').swipeRight(function(){alert('swipe right');})$('.box').swipeUp(function(){alert('swipe up');})$('.box').swipeDown(function(){alert('swipe down');})});</script></head><body><div class="box"></div></body></html>（2）滑动删除的效果（同样，将网页切换成移动端页面）<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><script type="text/javascript" src="js/zepto.min.js"></script><title>zepto touch</title><style type="text/css">body,ul{margin:0;padding:0}.list{list-style:none;margin:20px auto 0;width:90%;}.list li{height:40px;line-height:40px;border-bottom:1px solid #ddd;position:relative;overflow:hidden;}.list li a{text-decoration:none;color:#333;position:absolute;left:0}.list li span{position:absolute;right:-60px;background-color:red;padding:0 10px;color:#fff;}</style><script type="text/javascript">$(function(){$('.list li').swipeLeft(function(){$(this).children('a').animate({left:-60});$(this).children('span').animate({right:0});});$('.list li').swipeRight(function(){$(this).children('a').animate({left:0});$(this).children('span').animate({right:-60});})$('.list span').click(function(){$(this).parent().animate({height:0},function(){$(this).remove();})});})</script></head><body><ul class="list"><li><a href="#">新闻标题111111</a><span>删除</span></li><li><a href="#">新闻标题222222</a><span>删除</span></li><li><a href="#">新闻标题333333</a><span>删除</span></li><li><a href="#">新闻标题444444</a><span>删除</span></li><li><a href="#">新闻标题555555</a><span>删除</span></li></ul></body></html>4：插件Swiper的使用（这个也是一种移动端的插件，主要可以用来制作幻灯片和屏幕滑动的效果）（1）例子：幻灯片（关键代码，可以直接用的，使用在对应的位置），这个可以去这个插件的官网看看，还有很多类似的效果
<script type="text/javascript">$(function(){var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',initialSlide :1,paginationClickable: true,loop: true,autoplay:3000,autoplayDisableOnInteraction:false});})</script><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div> <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div> <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div> </div> <div class="swiper-pagination"></div></div>（2）例子：整屏滑动
<script type="text/javascript">$(function(){setTimeout(function(){ $('.p1').addClass('moving');},0);var myswiper = new Swiper('.swiper-container',{direction: 'vertical', pagination: '.swiper-pagination', onSlideChangeEnd:function(swiper){ console.log(swiper); var index = swiper.activeIndex; $('.swiper-slide').removeClass('moving').eq(index).addClass('moving'); } })});</script><body><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide p1"> <h1>页面标题一</h1> <p>页面内容</p> </div> <div class="swiper-slide p2"> <h1>页面标题二</h1> <p>页面内容</p> </div> <div class="swiper-slide p3"> <h1>页面标题三</h1> <p>页面内容</p> </div> <div class="swiper-slide p4"> <h1>页面标题四</h1> <p>页面内容</p> </div> </div> <div class="swiper-pagination"></div></div><div class="up_icon"></div></body>3.
简单的介绍一下关于EasyUI这个前端框架的基本内容（前端框架还要熟悉Bootstrap这个）。
1：EasyUI引用的知识点
<!-- 引入css文件，不限顺序 --> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <!-- 引入js文件，有顺序限制 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
对于这个引用的，顺便就再提一下，如何引用Bootstrap前端框架的资源文件
（1）详细版的介绍（适合初学者熟悉具体的内容）
<head><meta charset="utf-8"><!--声明文档兼容模式，表示使用IE浏览器的最新模式--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>--><!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示--><!--width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"(表示采用设备的宽度)initial-scale 设置页面的初始缩放值，为一个数字，可以带小数minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap完整模板</title><!-- 引入Bootstrap核心样式文件 --><link href="../../css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果，必须放置到web服务器中，暂时不必掌握 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--></head>（2）简单版（开发中用就可以了）
<head><meta charset="utf-8"><!--声明文档兼容模式，表示使用IE浏览器的最新模式--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>商城首页</title><!-- 引入Bootstrap核心样式文件 --><link href="../css/bootstrap.css" rel="stylesheet"><!-- 引入jQuery核心js文件 --><script src="../js/jquery-1.11.3.min.js"></script><!-- 引入BootStrap核心js文件 --><script src="../js/bootstrap.min.js"></script></head>解析：记住为了适配的话，一定要引用meta标签的这几个内容，还要就是先引用CSS再引用JS文件，并且需要先引用jQuery的文件，再引用Bootstrap的文件，然后再引用自己需要添加的额外的js外部文件。
2：划分页面区域（五个区域的构造和混合构造）
<!-- 正规布局 --><div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true"><!-- 区域面板--北边 --><div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div> <!-- 区域面板--南边 --><div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <!-- 区域面板--东边 --><div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> <!-- 区域面板--西边 --><div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <!-- 区域面板--中间 --><div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div> </div>(混合构造，可根据需要进行自由的组合)
<div id="layoutID" class="easyui-layout" data-options="fit:true"><!-- 北 --><div data-options="region:'north'" style="height:100px"></div> <!-- 中 --> <div data-options="region:'center'"><div class="easyui-layout" data-options="fit:true"><!-- 西 --> <div data-options="region:'west'" style="width:200px"></div><!-- 中 --><div data-options="region:'center'"><div class="easyui-layout" data-options="fit:true"><!-- 北 --><div data-options="region:'north'" style="height:100px"></div><!-- 中 --><div data-options="region:'center'"></div></div></div></div></div></div>
3：以下说几个用在form表单中的一些标签元素
（1）form表单中的验证功能（例子包含了，如何进行自定义验证的方法）
姓名：<input id="nameID"/><p/><script type="text/javascript">$("#nameID").validatebox({required : true, validType : ['length[1,6]','zhongwen'] //当需要多个验证条件的时候，就用这样的数组方式，否则可以用key，value的映射方式});</script><script type="text/javascript"> //自定义验证格式//自定义规则:zhongwen$.extend($.fn.validatebox.defaults.rules, { //zhongwen规则名 zhongwen: { //validator验证体 //value表示用户在文本框中输入的内容 validator: function(value){ //如果符合中文规则 if(/^[\u3220-\uFA29]*$/.test(value)){ return true; } }, //如果不符合中文规则，以下就是提示信息 message: '姓名必须为中文' } }); </script>邮箱：<input id="emailID"/><p/><script type="text/javascript">$("#emailID").validatebox({required : true,validType : ['length[1,30]','email']});</script>密码：<input id="passwordID"/><p/><script type="text/javascript">$("#passwordID").validatebox({required : true,validType : ['length[6,6]','english']});</script><script type="text/javascript"> //自定义验证格式$.extend($.fn.validatebox.defaults.rules, { english: { validator: function(value){ if(/^[a-zA-Z]*$/.test(value)){ //英文的正则匹配 return true; } }, message: '密码必须为英文' } }); </script>（2）:下拉列表的使用(这里面的内容，是用json格式的数据来进行测试的，当然这个url还可以是你的servlert等等)城市：<input id="cityID" name="city"/> <script type="text/javascript">//url表示请求的路径//valueField表示传到服务器的值，看不见的//textField表示页面中显示的值，看得见$("#cityID").combobox({url : "../json/city.json",valueField :"id", textField : "name" });</script><script type="text/javascript">$(function(){//为下拉组合框设置值$("#cityID").combobox("setValue","长沙");});</script>（3）:datebox日期输入框入职时间：<input id="dd" type="text"/><script type="text/javascript">$("#dd").datebox({required : true});</script><script type="text/javascript">$("#dd").datebox({onSelect : function(mydate){var year = mydate.getFullYear(); var month = mydate.getMonth() + 1;var date = mydate.getDate();alert(year+ "年" + month + "月" + date + "日");}});</script>（4）：数字微调器numberspinner商品数量:<input id="ss" style="width:80px;"> <script type="text/javascript">$("#ss").numberspinner({min : 1, //设置最小值max : 100, //设置最大值value : 1 //设置默认值});</script><p/>你一共购买了<span id="num">1</span>个商品//上下调的监听<script type="text/javascript">$("#ss").numberspinner({onSpinUp : function(){ //上调的监听//获取数字微调的当前值var value = $("#ss").numberspinner("getValue");//将当前值设置到span标签中$("#num").text(value).css("color","red");},onSpinDown : function(){ //下调的监听//获取数字微调的当前值var value = $("#ss").numberspinner("getValue");//将当前值设置到span标签中$("#num").text(value).css("color","red");}});</script>//funciton：当在输入框中输入数字后，回车，将内容显示到span中，同步<script type="text/javascript">$("#ss").keyup(function(xxx){//将浏览器产生的事件对象设置到myevent变量中var myevent = xxx;//获取按键的unicode编码var code = myevent.keyCode;//如果按钮是回车if(code == 13){//获取数字微调的当前值，因为$(this)此时表示的是文本框，直接获取value属性值即可var value = $(this).val();//将当前值设置到span标签中$("#num").text(value).css("color","red");}});</script>（5）：slide滑块条<div style="margin:100px">身高：<span id="tip"></span><p/><div id="ss" style="height:400px;width:600px"></div> </div><script type="text/javascript">$("#ss").slider({mode : "v",min : 150,max : 190,rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],showTip : true,value : 150});</script>//当滑动条的数值改变后，进行对数值的一个判定的小例子<script type="text/javascript">$("#ss").slider({onChange : function(newValue){if(newValue == 160){$("#tip").text("合格").css("color","blue");}else if(newValue == 170){$("#tip").text("良好").css("color","green");}else if(newValue == 180){$("#tip").text("优秀").css("color","pink");}else if(newValue == 190){$("#tip").text("卓越").css("color","red");}}});</script>4：progressBar进度条<div id="p" style="width:400px;"></div> <script type="text/javascript"> //用动态的方法来绑定，这其实都可以直接在初始化的时候，直接进行写，注意一下就好了，上面的例子都可以$("#p").progressbar({ width : 1300,height : 100,value : 0});</script><input id="startID" type="button" value="动起来" style="width:111px;height:111px;font-size:33px"/><script type="text/javascript">//获取1到9之间的随机数，包含1和9function getNum(){return Math.floor(Math.random()*9)+1;}</script><script type="text/javascript">var timeID = null;//函数function update(){//获取随机值,例如：3var num = getNum();//获取进度条当前值，例如：99var value = $("#p").progressbar("getValue");//判断if(value + num > 100){//强行设置进度条的当前值为100$("#p").progressbar("setValue",100);//停止定时器window.clearInterval(timeID);//按钮正效$("#startID").removeAttr("disabled");}else{//设置进度条的当前值为num+value的和$("#p").progressbar("setValue",(value+num));}}//定拉按钮，同时提供单击事件$("#startID").click(function(){//每隔300毫秒执行update方法timeID = window.setInterval("update()",300);//按钮失效$(this).attr("disabled","disabled");});</script>5：window<input type="button" value="打开窗口1" id="open1"/><input type="button" value="关闭窗口1" id="close1"/><div style="margin:600px"></div><div id="window1"></div><script type="text/javascript">//定位打开窗口1按钮，同时添加单击事件$("#open1").click(function(){//打开窗口1$("#window1").window({title : "窗口1",width : 840,height : 150,left : 200,top : 100,minimizable : false,maximizable : false,collapsible : false,closable : false,draggable : false,resizable : true,href : "/js-day06/empList.jsp"});});</script><script type="text/javascript">//定位关闭窗口1按钮，同时添加单击事件$("#close1").click(function(){//关闭窗口1$("#window1").window("close");});</script>6：dialog对话框
<input type="button" value="打开对话框" id="open"/><div style="margin:600px"></div><div id="dd"></div><script type="text/javascript">$("#open").click(function(){$("#dd").dialog({title : "对话框",width : 300,height : 400,left : 200,top : 100,minimizable : false,maximizable : false,collapsible : false,closable : false,draggable : false,resizable : true,toolbar : [{text:'编辑',iconCls:'icon-edit',handler:function(){alert('edit')}},{text:'帮助',iconCls:'icon-help',handler:function(){alert('help')}}],buttons : [{text:'提交',handler:function(){alert("提交");}},{text:'关闭',handler:function(){//关闭对话框$("#dd").dialog("close");}}],href : "/js-day06/easyui/10_form.html"});});</script>其中的href是另外一个页面（这个相当于内嵌一样的作用）
<form><table border="2" align="center"><tr><th>姓名：</th><td><input id="nameID" type="text"/></td></tr><tr><th>入职时间：</th><td><input id="dateID" type="text"/></td></tr></table></form><script type="text/javascript">$("#nameID").validatebox({required : true,validType : ['length[1,6]','zhongwen']});</script><script type="text/javascript">$.extend($.fn.validatebox.defaults.rules, { zhongwen: { validator: function(value){ if(/^[\u3220-\uFA29]*$/.test(value)){ return true; } }, message: '姓名必须为中文' } }); </script><script type="text/javascript">$("#dateID").datebox({required : true});</script>注意一点：大家在运行的时候，记得修改好对应的路径，否则是加载不出来的！！！！7：message信息框
<input type="button" value="警告框"/><br/><input type="button" value="确认框"/><br/><input type="button" value="输入框"/><br/><input type="button" value="显示框"/><br/><div style="margin:100px"></div><script type="text/javascript">//定位所有的button按钮，同时提供单击事件$(":button").click(function(){//获取value属性值var tip = $(this).val();//去空格tip = $.trim(tip);//如果警告框的话if("警告框" == tip){$.messager.alert("警告框","继续努力","warning",function(){alert("关闭");});}else if("确认框" == tip){$.messager.confirm("确认框","你确认要关闭该确认框吗?",function(value){alert(value);});}else if("输入框" == tip){$.messager.prompt("输入框","你期希的月薪是多少?",function(sal){if(sal == undefined){alert("请输入月薪");}else{if(sal<6000){alert("你的谦虚了");}else if(sal < 7000){alert("你加点油了");}else{alert("你很不错了");}}});}else if("显示框" == tip){$.messager.show({showType : "slide",showSpeed : 500,width : 300,height : 300,title : "显示框",msg : "这是内容",timeout : 5000});}});8：tree树（1）静态生成一个tree树的内容
<ul id="treeID" class="easyui-tree"> <li><span>第一章</span><ul><li><span>第一节</span><ul><li><span>第一条</span></li><li><span>第二条</span></li></ul></li><li><span>第二节</span></li></ul> </li> <li> <span>第二章</span> </li></ul> <script type="text/javascript">$(function(){//收起所有的选项$("#treeID").tree("collapseAll");});</script>（2）动态生成tree树
<ul id="treeID"></ul><script type="text/javascript">$("#treeID").tree({url : "/js-day06/json/pro.json"});</script>注意一点：上面的tree树的内容是用json格式来存储的，这个在开发中就可以通过数据库中的内容来自动进行生成。下面就是例子中的json格式的数据[ { "id":1, "text":"广东", "state":"closed", "children":[{ "id":11, "text":"广州", "state":"closed", "children":[ { "id":111, "text":"天河" }, { "id":112, "text":"越秀" } ]},{ "id":12, "text":"深圳"} ] }, { "id":2, "text":"湖南" } ] 9：几款比较有趣的jQuery插件（1）列表下拉框的效果
<link href="css/webwidget_menu_dropdown.css" rel="stylesheet" type="text/css"></link><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="js/webwidget_menu_dropdown.js"></script><style type="text/css">h2 { color: red; }pre { padding: 4px; border: #F90 dotted 1px; }</style></head><body><script language="javascript" type="text/javascript"> $(function() { $("#webwidget_menu_dropdown").webwidget_menu_dropdown({ m_w: '100', //li的宽度 m_t_c: '#FFF', //li的字体颜色 m_c_c: '#8FC45A', //第一个li的颜色 m_bg_c: '#56A901',//除去第一个li的颜色 m_b_s: '2', //每个li的间隔 m_bg_h_c: '#8FC45A', //选中li时候的颜色 s_s: 'fast', //展开列表的速度，还可以是slow（缓慢）m_s: 'small' //li的高度 }); </script><h1>Multicolor animation drop down navigation menu with jQuery</h1><h2>Demo1</h2><div id="webwidget_menu_dropdown" class="webwidget_menu_dropdown"> <ul> <li class="current"><a href="link1">Menu1</a> <ul> <li><a href="link1">submenu1</a> </li> <li><a href="link2">submenu2</a></li> <li><a href="link3">牛niu图tu库ku</a></li> <li><a href="link4">submenu4</a></li> <li><a href="link5">submenu5</a></li> <li><a href="link6">submenu6</a></li> </ul> </li> <li><a href="link2">Menu2</a> <ul> <li><a href="link1">submenu1</a> </li> <li><a href="link2">submenu2</a></li> <li><a href="link3">submenu3</a></li> <li><a href="link4">submenu4</a></li> <li><a href="link5">submenu5</a></li> <li><a href="link6">submenu6</a></li> </ul> </li> <li><a href="link3">牛niu图tu库ku</a> <ul> <li><a href="link1">submenu1</a> </li> <li><a href="link2">submenu2</a></li> <li><a href="link3">submenu3</a></li> <li><a href="link4">submenu4</a></li> <li><a href="link5">submenu5</a></li> <li><a href="link6">submenu6</a></li> </ul> </li> <li><a href="link4">Menu4</a> <ul> <li><a href="link1">submenu1</a> </li> <li><a href="link2">submenu2</a></li> <li><a href="link3">submenu3</a></li> <li><a href="link4">submenu4</a></li> <li><a href="link5">submenu5</a></li> <li><a href="link6">submenu6</a></li> </ul> </li> <li><a href="link5">Menu5</a> <ul> <li><a href="link1">submenu1</a> </li> <li><a href="link2">submenu2</a></li> <li><a href="link3">submenu3</a></li> <li><a href="link4">submenu4</a></li> <li><a href="link5">submenu5</a></li> <li><a href="link6">submenu6</a></li> </ul> </li> <li><a href="link6">Menu6</a> <ul> <li><a href="link1">submenu1</a> </li> <li><a href="link2">submenu2</a></li> <li><a href="link3">submenu3</a></li> <li><a href="link4">submenu4</a></li> <li><a href="link5">submenu5</a></li> <li><a href="link6">submenu6</a></li> </ul> </li> </ul> <div style="clear: both"></div></div>记得导入上面提到的CSS和JS两个库，否则没有效果（2）图片的轮播效果
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script></head><body style="text-align:center;"><link href="css/webwidget_slideshow_dot.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="js/webwidget_slideshow_dot.js"></script><script language="javascript" type="text/javascript"> $(function() { $("#demo1").webwidget_slideshow_dot({ slideshow_time_interval: '5000', slideshow_window_width: '200', slideshow_window_height: '200', slideshow_title_color: '#17CCCC', soldeshow_foreColor: '#000', directory: 'images/' }); }); </script><div id="demo1" class="webwidget_slideshow_dot"> <ul> <li><a href="link1" title="Sky"><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></a></li> <li><a href="link2" title="Sea"><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></a></li> <li><a href="link3" title="Flower"><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></a></li> <li><a href="link4" title="Treelink4"><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></a></li> </ul> <div style="clear: both"></div></div>记得导入例子中引用的资源文件，这个百度下载都有（3）如果想看到更多的插件的效果，下面粘贴一个网站，里面有很多大神写的东西，简单和便捷
http://www.ijquery.cn/?cat=2
内容还没完，我会不断进行更新的哦。。。感谢大家的浏览，欢迎共同学习交流！！！！
阅读全文
1 0
- JS与jQuery插件运用和EasyUI框架的学习干货（三）
- jquery.pagination.js分页插件的运用
- jquery.pagination.js分页插件的运用
- 关于JQuery插件easyUI的学习
- JQuery EasyUI框架学习
- jQuery 版本viewer.js插件的结构分析与学习
- jQuery EasyUI 插件-macmenu源码js
- jquery的fullCalender插件运用
- js与jquery 学习随笔（三） 打印页面
- easyui的日历与jQuery的calender.js
- JS控制EasyUI插件的隐藏和显示
- 推荐一个和easyui相似的框架jQuery ligerUI
- 一个EasyUI前端框架的实际案例（干货，可下载源码哦）
- jQuery Ajax学习与运用
- 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
- js框架和插件
- JS和JQuery在运用时的基础区别
- 轻松学习jQuery插件EasyUI EasyUI创建树形菜单
- hhhhhhhhhhh
- C. Subset Sums----分桶法
- web推送--websocket协议
- 【模板】网络最大流
- VirtualBox 虚拟机复制
- JS与jQuery插件运用和EasyUI框架的学习干货（三）
- 设计模式-19-状态模式
- MySQL调用存储过程
- 【poj3264】Balanced Lineup 【USACO 2007 January Silver】
- spring 源码解读笔记
- sqlite3数据库的心得
- 【Java】垃圾回收机制 GC
- Redis的安装（基于centos7）
- mongoose-schema数据表字段含义
