1.表单验证插件——validate
该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({options})
其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。
$(function () { $("#frmV").validate( { /*自定义验证规则*/ rules: { email:{ required:true, email:true } }, /*错误提示位置*/ errorPlacement: function (error, element) { error.appendTo(".tip"); } } ); });
2.表单插件——form
通过表单form插件,调用ajaxForm()
方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:$(form). ajaxForm ({options})
其中form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数。
参数说明
target : String(可选参数)更新到服务器响应的元素标识符,这个值可以指定为一个JQUERY选择器字符串,一个JQUERY对象,或一个DOM元素。
url : String(可选参数)将要提交form数据URL,默认值:form动作属性。
type : String(可选参数)'get' 或 'post',override for form's 'method' attribute
clearForm : boolean(可选参数) true,提交成功后清除表单所有字段
<!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>
按钮type="submit",系统会默认把表单数据提交到后台,你如果改成type="button",点击提交按钮就不起作用了,因为系统没有默认button提交数据,这时就要给button绑定click事件了。
$("#btnSubmit").bind("click",function(){ $("form").ajaxForm({ url:"http://www.imooc.com/data/form_f.php"; target:".tip"; }); })
3.图片灯箱插件——lightBox
该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:$(linkimage).lightBox({options})
其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。
【图片灯箱插件】
<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>
【图片点击展示大图,背景变灰/暗】
$("参数为包含图片的<a>元素名称").lightBox({ overlayBgColor:"#666", //图片浏览时的背景色 overlayOpacity: 0.5, //背景色的透明度 containerResizeSpeed: 600 //图片切换时的速度 })
<!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为插件方法的配置对象。
zoomType有两种,默认为standard,还有一个就是这里用的reverse,standard就是,当鼠标移到图片上,小框的那部分变灰,其他部分不变,reverse两部分效果相反
<!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({ zoomWidth: 236, //小图片所选区域的宽 zoomHeight: 236, //小图片所选区域的高 zoomType: 'reverse' //设置放大镜的类型 }); }); </script> </body> </html>
jqzoom使用方法:
1.引入jQuery与jqzoom,jqzoom.css
2.准备一张一大一小相同的图片,小图放在<img>标签的"src"属性,给img标签加个<a>标签,<a>标签的"href"属性链向大图片。
参数说明:zoomWidth:小图片所选区域的宽度
zoomHeight:小图片所选区域的高度
zoomType:默认值为standard。如果设为reverse,在小图片中,移入鼠标时所选区域高亮,未选中区域浅灰色
xOffset:放大后的图片与小图片间的X(横坐标)距离
yOffset:放大后的图片与小图片间的Y(纵坐标)距离
position:放大后的图片相对原图片的位置,默认为"right",还可设置为"left","top","bottom"
lens:布尔值,表示是否显示小图片中的选中区域,默认值为"true",如果设为false,则放大后的图片上面不会出现主题字样。
imageOpacity:当zoomType的值为"reverse"时,用来设置未选中区域透明度的值。取值范围在(0.0-1.0)间。
preloadImages:布尔值,表示是否重新加载大图像。
preloadText:重新加载大图像时,小图像显示的文本说明。
title:大图像顶部是否显示<a>标签里的title
showEffect:大图像加载时的特效,可选值:"show"表示直接显示,"fadeIn"由透明度渐变载入效果
hideEffect:大图像隐藏特效,可选值:"hide"表示直接隐藏,"fadeout"透明度渐变隐藏。
fadeInSpeed:当大图像的载入特效设为"fadeIn"时,此属性可设置为特效的时间,可选值为fast、slow、number
fadeoutSpeed:当大图像的隐藏特效设为fadeout时,此属性可设置特效加载时间,
5.cookie插件——cookie
使用cookie插件后,可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为:保存:$.cookie(key,value)
;读取:$.cookie(key)
,删除:$.cookie(key,null)
其中参数key为保存cookie对象的名称,value为名称对应的cookie值。
Cookie是网站设计者放置在客户端的小文本文件。Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻。 在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息
Cookie下载地址: http://plugins.jquery.com/project/cookie
使用方法:
1.引入jquery.cookie.js
参数设置:
expires: (Number | Date) 有效期,可以设置一个整数作为有效期(单位:天),也可以设置一个日期对象作为Cookie的过期日期。如果指定日期为负数,那么此cookie将被删除;如果不设置或者设置为null,那么此cookie将被当作Session Cookie处理,并且在浏览器关闭后删除
path: (String) Cookie的路径属性,默认是创建该cookie的页面路径
domain: (String) Cookie的域名属性,默认是创建该cookie的页面域名
secure: (Boolean) 如果设为true,那么此cookie的传输会要求一个安全协议,例如HTTPS
id 可以当作标签的唯一标识,一个HTML页面上面,一个标签对应一个id,已知一个标签的id便可找到这个标签,id名称不能重复;name就不同,name类似于一类标签的名称,name名称可以重复,在JS里能通过 getElementsByName("myName")选择到name为myName的所有标签,并返回一个对象数组
一般,id能作用于CSS、JS;name一般定义在表单标签<form>里面、用于传参的<input>标签。
服务器端脚本能通过GET或POST方法来获取带name属性input标签的值
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>
minChars (Number)
在触发autoComplete前用户至少需要输入的字符数,Default:1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表
formatItem (Function)
为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,例子中的返回值将用i元素包含显示在下拉列表中
formatMatch (Function)
对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数.Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值
formatResult (Function)
和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.
result (handler) Returns:jQuery
此事件会在用户选中某一项后触发,参数为:
event: 事件对象. event.type为result.
data: 选中的数据行.
formatted:formatResult函数返回的值
formatItem作用在于可以格式化列表中的条目,比如我们加了“I”,让列表里的字显示出了斜体。
formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,
formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。
7.右键菜单插件——contextmenu
右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:$(selector).contextMenu(menuId,{options});
Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。
8.自定义对象级插件——lifocuscolor插件
自定义的lifocuscolor插件可以在<ul>元素中,鼠标在表项<li>元素移动时,自定义其获取焦点时的背景色,即定义<li>元素选中时的背景色,调用格式为:$(Id).focusColor(color)
其中,参数Id表示<ul>元素的Id号,color表示<li>元素选中时的背景色。
9.自定义类级别插件—— twoaddresult
通过调用自定义插件twoaddresult中的不同方法,可以实现对两个数值进行相加和相减的运算,导入插件后,调用格式分别为:$.addNum(p1,p2)
和 $.subNum(p1,p2)
上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。
10.拖曳插件——draggable
拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()
方法,实现各种拖曳元素的效果,调用格式如下:$(selector). draggable({options})
options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。
11.放置插件——droppable
droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:$(selector).droppable({options})
selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
12.拖曳排序插件——sortable
拖曳排序插件的功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:$(selector).sortable({options});
selector参数为进行拖曳排序的元素,options为调用方法时的配置对象,
例:
$("ul").sortable({ delay:2, 为放置点击事件的冲突延时两秒 opacity:0.35}) 以透明度0.35随意拖动
13.面板折叠插件——accordion
面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下:$(selector).accordion({options});
其中,参数selector为整个面板元素,options参数为方法对应的配置对象。
折叠的参数配置属性:
1.1 active
1.2 animated
1.3 autoHeight
1.4 clearStyle
1.5 collapsible
1.6 event 默认是'click' .
1.7 fillSpace
14.选项卡插件——tabs
使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下:$(selector).tabs({options});
selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()
方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。
$(function () { $("#tabs").tabs ({ //设置各选项卡在切换时的动画效果 fx: { opacity: "toggle", height: "toggle" }, event: "mousemove" //通过移动鼠标事件切换选项卡 }) });
15.对话框插件——dialog
对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()
和confirm()
函数的功能,它的调用格式为:$(selector).dialog({options});
selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
$(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>"); } }); }
1、modal:是否为模态窗口,设置为 true 时,页面上其它元素将被覆盖且无法响应用户操作。
2、hide:显示对话框时使用的特效。
3、draggable:是否可以拖动
16.菜单工具插件——menu
菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下:$(selector).menu({options});
selector参数为菜单列表中最外层<ul>元素,options为menu()
方法的配置对象。
17.微调按钮插件——spinner
微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:$(selector).spinner({options});
selector参数为文本输入框元素,可选项options参数为spinner()
方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。
18.工具提示插件——tooltip
工具提示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下:$(selector).tooltip({options});
其中selector为需要显示提示信息的元素,可选项参数options为tooltip()
方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。