Jquery 插件学习笔记
Posted 盛唐之路
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery 插件学习笔记相关的知识,希望对你有一定的参考价值。
Jquery 插件1表单验证插件——validate
该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:
$(form).validate({options})
其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证插件</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script> <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script> </head> <body> <form id="frmV" method="get" action="#"> <div id="divtest"> <div class="title"> <span class="fl">表单验证插件</span> <span class="fr"> <input id="btnSubmit" type="submit" value="提交" /> </span> </div> <div class="content"> <span class="fl">邮箱:</span><br /> <input id="email" name="email" type="text" /><br /> <span class="tip"></span> </div> </div> </form> <script type="text/javascript"> $(function () { $("#frmV").validate( { /*自定义验证规则*/ rules: { email:{ required:true, email:true } }, /*错误提示位置*/ errorPlacement: function (error, element) { error.appendTo(".tip"); } } ); }); </script> </body> </html>
2表单插件——form
通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:
$(form). ajaxForm ({options})
其中form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单插件</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script> </head> <body> <form id="frmV" method="post" action="#"> <div id="divtest"> <div class="title"> <span class="fl">个人信息页</span> <span class="fr"> <input id="btnSubmit" type="submit" value="提交" /> </span> </div> <div class="content"> <span class="fl">用户名:</span><br /> <input id="user" name="user" type="text" /><br /> <span class="fl">昵称:</span><br /> <input id="nick" name="nick" type="text" /> <div class="tip"></div> </div> </div> </form> <script type="text/javascript"> $(function () { var options = { url: "http://www.imooc.com/data/form_f.php", target: ".tip" } $("#frmV").ajaxForm(options); }); </script> </body> </html>
3 图片灯箱插件——lightBox
该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:
$(linkimage).lightBox({options})
其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>图片灯箱插件</title> <link rel="stylesheet" type="text/css" href="http://www.imooc.com/data/jquery.notesforlightbox.css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">我的相册</span> </div> <div class="content"> <div class="divPics"> <ul> <li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片"> <img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" /> </a></li> <li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片"> <img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" /> </a></li> <li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片"> <img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" /> </a></li> </ul> </div> </div> </div> <script type="text/javascript"> $(function () { $(".divPics a").lightBox({ overlayBgColor: "#666", //图片浏览时的背景色 overlayOpacity: 0.5, //背景色的透明度 containerResizeSpeed: 600 //图片切换时的速度 }) }); </script> </body> </html>
4图片放大镜插件——jqzoom
在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,
在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,
显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:
$(linkimage).jqzoom({options})
其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>图片放大镜插件</title> <link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">图片放大镜</span> </div> <div class="content"> <a href="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖"> <img src="http://img.mukewang.com/52e4aee700012df702130212.jpg" alt=""/> </a> </div> </div> <script type="text/javascript"> $(function () { $("#jqzoom").jqzoom({//绑定图片放大插件jqzoom zoomWidth: 123, //小图片所选区域的宽 zoomHeight: 123, //小图片所选区域的高 zoomType: 'reverse' //设置放大镜的类型 }); }); </script> </body> </html>
5cookie插件——cookie
使用cookie插件后,可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为:
保存:$.cookie(key,value);读取:$.cookie(key),删除:$.cookie(key,null)
其中参数key为保存cookie对象的名称,value为名称对应的cookie值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>cookie插件</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script src="http://www.imooc.com/data/jquery.cookie.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">cookie插件</span> <span class="fr"> <input id="btnSet" type="button" value="设置" /> </span> </div> <div class="content"> <span class="fl">邮箱:</span><br /> <input id="email" name="email" type="text" /><br /> <input id="chksave" type="checkbox" />是否保存邮箱 </div> </div> <script type="text/javascript"> $(function () { if ($.cookie("email")) { $("#email").val(?); } $("#btnSet").bind("click", function () { if ($("#chksave").is(":checked")) { $.cookie("email",$("#email"),val(), { path: "/", expires: 7 }) } else { $.cookie("email",null, { path: "/" }) } }); }); </script> </body> </html>
6 搜索插件——autocomplete(输入部分字符,显示匹配的字符串)
搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,
当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下:
$(textbox).autocomplete(urlData,[options]);
其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>搜索插件</title> <link href="http://www.imooc.com/data/jquery.autocomplete.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script src="http://www.imooc.com/data/jquery.autocomplete.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">搜索插件</span> </div> <div class="content"> <span class="fl">用户名</span><br /> <input id="txtSearch" name="txtSearch" type="text" /> <div class="tip"> </div> </div> </div> <script type="text/javascript"> $(function () { var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"]; $("#txtSearch").autocomplete(arrUserName,{ minChars: 0, //双击空白文本框时显示全部提示数据 formatItem: function (data, i, total) { return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式 }, formatMatch: function (data, i, total) { return data[0]; }, formatResult: function (data) { return data[0]; } }).result(SearchCallback); function SearchCallback(event, data, formatted) { $(".tip").show().html("您的选择是:" + (!data ? "空" : formatted)); } }); </script> </body> </html>
7右键菜单插件——contextmenu
右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,
便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:
$(selector).contextMenu(menuId,{options});
Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>右键菜单插件</title> <link href="http://www.imooc.com/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script src="http://www.imooc.com/data/jquery.contextmenu.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="title"><span class="fl">点击右键</span></div> <div class="content"> <input id="btnSubmit" type="button" value="提交" /> <div class="tip"></div> </div> <div class="contextMenu" id="sysMenu"> <ul> <li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li> <li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li> </ul> </div> </div> <script type="text/javascript"> $(function () { $(".fl").contextMenu('sysMenu', { bindings: { 'Li3': function (Item) { $(".tip").show().html("您点击了“保存”项"); }, 'Li4': function (Item) { $(".tip").show().html("您点击了“退出”项"); } } }); }); </script> </body> </html>
8自定义对象级插件——lifocuscolor插件
自定义的lifocuscolor插件可以在<ul>元素中,鼠标在表项<li>元素移动时,自定义其获取焦点时的背景色,即定义<li>元素选中时的背景色,调用格式为:
$(Id).focusColor(color)
其中,参数Id表示<ul>元素的Id号,color表示<li>元素选中时的背景色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>自定义对象级别插件</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script src="http://www.imooc.com/data/jquery.lifocuscolor.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">对象级别的插件</span> </div> <div class="content"> <ul id="u1"> <li><span>橘子</span><span>水果</span></li> <li><span>芹菜</span><span>蔬菜</span></li> <li><span>香蕉</span><span>水果</span></li> </ul> </div> </div> <script type="text/javascript"> $(function () { $("ul").focusColor("red") //调用自定义的插件 }) </script> </body> </html>
9 自定义类级别插件—— twoaddresult
通过调用自定义插件twoaddresult中的不同方法,可以实现对两个数值进行相加和相减的运算,导入插件后,调用格式分别为:
$.addNum(p1,p2) 和 $.subNum(p1,p2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>自定义类级别插件</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> <script src="http://www.imooc.com/data/jquery.twoaddresult.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">自定义类级别插件</span> <span class="fr"> <input id="btnCount" type="button" value="计算" /> </span> </div> <div class="content"> 两数相减: <input id="Text1" type="text" class="txt" /> - <input id="Text2" type="text" class="txt" /> = <input id="Text3" type="text" class="txt" /> </div> </div> <script type="text/javascript"> $(function () { $("#btnCount").bind("click", function () { $("#Text3").val( $.subNum($("#Text1").val(), $("#Text2").val()) ); }); }); </script> </body> </html>
10拖曳插件——draggable
拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,
可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下:
$(selector). draggable({options})
options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,
如“containment”属性指定拖曳区域
,“axis”属性设置拖曳时的坐标方向。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>拖曳插件</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div id="x" class="drag">沿x轴拖拽</div> <div id="y" class="drag">沿y轴拖拽</div> </div> <script type="text/javascript"> $(function () { $("#x").draggable({ axis:"x" }); $("#y").draggable({ axis:"y" }); }); </script> </body> </html>
11放置插件——droppable
除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:
$(selector).droppable({options})
selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>放置插件</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="box"> <div class="title">产品区</div> <div class="drag"><div>苹果</div></div> </div> <div class="box"> <div class="title">回收站(<span>0</span>)</div> <div class="cart"><div id="tip">还没有产品</div></div> </div> </div> <script type="text/javascript"> var intSum=0; $(function () { $(".drag").draggable(); $(".cart").droppable({ drop: function () { intSum++; $(this) .addClass(".focus") .find("#tip").html(""); $(".title span").html(intSum); } }) }); </script> </body> </html>
12拖曳排序插件——sortable
拖曳排序插件的功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:
$(selector).sortable({options});
selector参数为进行拖曳排序的元素,options为调用方法时的配置对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>拖曳排序插件</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">我最喜欢的运动</span> </div> <div class="content"> <ul> <li>1)足球</li> <li>2)散步</li> <li>3)篮球</li> <li>4)乒乓球</li> <li>5)骑自行车</li> </ul> </div> </div> <script type="text/javascript"> $(function () { $("ul").sortable({ delay:2,//为防止与点击事件冲突,延迟2S opacity:0.35//以透明度0.35随意拖动 }) }); </script> </body> </html>
13面板折叠插件——accordion
面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下:
$(selector).accordion({options});
其中,参数selector为整个面板元素,options参数为方法对应的配置对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>面板折叠插件</title> <link href="Css/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div id="accordion"> <h3> <a href="#">白富美</a></h3> <p>咱们结婚吧!</p> <h3> <a href="#">土豪族</a></h3> <p>咱们交个朋友吧!</p> </div> </div> <script type="text/javascript"> $(function () { $("#accordion").accordion(); }); </script> </body> </html>
14选项卡插件——tabs
使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下:
$(selector).tabs({options});
selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>选项卡插件</title> <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div id="tabs"> <ul> <li><a href="#tabs-1">最爱吃的水果</a></li> <li><a href="#tabs-2">最喜欢的运动</a></li> </ul> <div id="tabs-1"> <p>橘子</p> <p>香蕉</p> <p>葡萄</p> <p>苹果</p> <p>西瓜</p> </div> <div id="tabs-2"> <p>足球</p> <p>散步</p> <p>篮球</p> <p>乒乓球</p> <p>骑自行车</p> </div> </div> </div> <script type="text/javascript"> $(function () { $("#tabs").tabs({ //设置各选项卡在切换时的动画效果 fx: { opacity: "toggle", height: "toggle" }, event: "mousemove" //通过移动鼠标事件切换选项卡 }) }); </script> </body> </html>
15对话框插件——dialog
对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()和confirm()函数的功能,它的调用格式为:
$(selector).dialog({options});
selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>对话框插件</title> <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="content"> <span id="spnName" class="fl">张三</span> <input id="btnDelete" type="button" value="删除" class="fr"/> </div> <div id='dialog-modal'></div> </div> <script type="text/javascript"> $(function () { $("#btnDelete").bind("click", function () { //询问按钮事件 if ($("#spnName").html() != null) { //如果对象不为空 sys_Confirm("您真的要删除该条记录吗?"); return false; } }); }); function sys_Confirm(content) { //弹出询问信息窗口 $("#dialog-modal").dialog({ height: 140, modal: true, title: '系统提示', hide: 'slide', buttons: { '确定': function () { $("#spnName").remove(); $(this).dialog("close"); }, '取消': function () { $(this).dialog("close"); } }, open: function (event, ui) { $(this).html(""); $(this).append("<p>" + content + "</p>"); } }); } </script> </body> </html>
16菜单工具插件——menu
菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下:
$(selector).menu({options});
selector参数为菜单列表中最外层<ul>元素,options为menu()方法的配置对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>菜单工具插件</title> <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> </head> <body> <ul id="menu"> <li><a href="#">小明一中</a> <ul> <li><a href="#">高中部</a> <ul> <li><a href="#">高一(1)班</a></li> <li><a href="#">高一(2)班</a></li> <li><a href="#">高一(3)班</a> <ul> <li><a href="#">小胡</a></li> <li><a href="#">小李</a></li> <li><a href="#">小陈</a></li> </ul> </li> </ul> </li> <li><a href="#">初中部</a> <ul> <li><a href="#">初一(1)班</a></li> <li><a href="#">初一(2)班</a></li> <li><a href="#">初一(3)班</a></li> </ul> </li> <li><a href="#">教研部</a></li> </ul> </li> <li class="ui-state-disabled"><a href="#">大明二中</a></li> </ul> <script type="text/javascript"> $(function () { $("#menu").menu(); }); </script> </body> </html>
17 微调按钮插件——spinner
微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:
$(selector).spinner({options});
selector参数为文本输入框元素,可选项options参数为spinner()方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>微调按钮插件</title> <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="title"> 选择颜色值</div> <div class="content"> <span id="spnColor" class="input fl"> <input /> </span> <span id="spnPrev" class="prev fr"></span> </div> </div> <script type="text/javascript"> $(function () { //定义变量 var intR = 0, intG = 0, intB = 0, strColor; $("input").spinner({ //初始化插件 max: 10, min: 0, //设置微调按钮递增/递减事件 spin: function (event, ui) { if (ui.value == 8) spnPrev.style.backgroundColor = "red"; else spnPrev.style.backgroundColor = "green"; }, //设置微调按钮值改变事件 change: function (event, ui) { var intTmp = $(this).spinner("value"); if (intTmp < 0) $(this).spinner("value", 0); if (intTmp > 10) $(this).spinner("value", 10); if (intTmp == 8) spnPrev.style.backgroundColor = "red"; else spnPrev.style.backgroundColor = "green"; } }); }); </script> </body> </html>
以上是关于Jquery 插件学习笔记的主要内容,如果未能解决你的问题,请参考以下文章