手把手教你怎么写jQuery插件 - 李木木88 - 博客园
这次随笔，向大家介绍如何编写jQuery插件。啰嗦一下，很希望各位IT界的&攻城狮&们能和大家一起分享，一起成长。点击左边我头像下边的&加入qq群&，一起分享，一起交流，当然，可以一起吹水。哈，不废话，进入正题。
　　jQuey是一个非常好用的javascript类库，提供了非常多的接口给程序员使用。但在某些具体方面，并没有完全提供解决方法，这就要求我们自己实现。jQuery官方也提供jQuery拓展的标准。编写jQuery插件时，应该注意一下几点原则：
　　1. 避免全局依赖。　　2. 避免第三方破坏。　　3. 兼容jQuery操作符&$&和&jQuery&
这三个原则非常重要，否则，这个插件将会失去插件的意义。
　　jquery插件命名，一般在前面加上jquery，这样别人就知道这是jQuery插件。如：jquery.modelselect.min.js
& & &加了min表示压缩版，压缩版一般处理方式是去掉空格换行，也有些公司为了保护代码，直接重构变量和私有函数名，不过这样做在一般程序员是有效的，但在高手面前，并没什么卵用，有人一样能把它还原。
　　OK, jQuery插件的标准代码格式如下，（需要使用闭包，对于javascript闭包，本博客已博文专门介绍）：
1 (function ($) {
//插件内部代码
3 })(jQuery);
以上代码的第三行，可以是window.jQuery或者$,按照官方的解释，这三者是等价的。
在这写一个小demo, 就是插入一个个人信息。
(function ($) {
$.fn.userInfo = function (options) { //定义插件方法名
var dft = {
//定义一个对象，设置默认值
name: 'Steven Zhu', //名
email: '', //链接
size: '14px', //文字大小
align: 'center '//文字位置，left || center || right
var opt = $.extend(dft, options);//这个很关键，待会跟你说。
var style = 'style="font-size:' + opt.size + ';text-align:' + opt.align + ';"'; //调用默认的样式
var name = '&p' + ' ' + style + '&name:&a target="_blank" &' + opt.name + '&/a&&/p&';
var email = '&p' + ' ' + style + '&name:&a target="_blank"&' + opt.email + '&/a&&/p&';
$(this).append(name);
$(this).append(name);
})(window.jQuery);
好了，说说$.extend(), 这个方法，他的作用就是扩展，以上这段代码就是将options拓展到dft,最后赋给opt.这样写为了可读性。
所以这段代码还可以这样。
options = $.extend({//here is default values},options);
这样，看起来就精简多了。
　　很感谢一楼的评论，提醒我考虑的性能和链式操作。我们再写插件时，把当前对象return回去，这样返回的又是jQuery对象，这样可以链式操作。结合上面一段，代码修改如下：
1 (function ($) {
$.fn.userInfo = function (options) { //定义插件方法名
options = $.extend({
//定义一个对象，设置默认值
name: 'Steven Zhu', //名
email: '', //链接
size: '14px', //文字大小
align: 'center '//文字位置，left || center || right
},options);
var style = 'style="font-size:' + opt.size + ';text-align:' + opt.align + ';"'; //调用默认的样式
var name = '&p' + ' ' + style + '&name:&a target="_blank" &' + opt.name + '&/a&&/p&';
var email = '&p' + ' ' + style + '&name:&a target="_blank"&' + opt.email + '&/a&&/p&';
this.append(name);
this.append(name);
})(window.jQuery);
　　在引入插件之后，直接调用就行。
1 &script&
$("#user-info").userInfo();
3 &script"&
这样会在dom的id="user-info"里输出插件的默认值，即显示结果是：Steven Zhu &
要改变里面的值，只需要加入你想要的参数就行。如下：
$('#user-info').userInfo({
name: 'Sun Zhu',
email: '',
size: '16px',
align: 'right'
这样就改变默认值了。输出结果就是：Sun Zhu ，文字右对齐。
原创作品，转载请注明出处：
阅读(...) 评论() &jQuery插件的写法-jQuery学习
当前位置： &
& jQuery插件的写法
jQuery插件的写法
这几天在学习jQuery插件的写法，搜索了一些资料，包括jQuery官方的示例，但发现描述的并不是很清晰。最后，终于搜索到一篇讲解比较清晰的文章，这里自己总结了一下，并以一个具体的示例来说明jQuery插件的写法。
先看看html代码
&ul id=&catagory&&
&li&&a href=&#&&jQuery&/a&&/li&
&li&&a href=&#&&Asp.net&/a&&/li&
&li&&a href=&#&&Sql Server&/a&&/li&
&li&&a href=&#&&CSS&/a&&/li&
比如我们要实现当光标移动到a标签上时，a标签向右移动一段距离，离开时a位置恢复。实现方法如下：
$(document).ready(function() {
$(&#catagory a&).hover(function() {
$(this).animate({ paddingLeft: &20px& }, { queue: false, duration: 500 });
}, function() {
$(this).animate({ paddingLeft: &0& }, { queue: true, duration: 500 });
现在我们将这个方法进行扩展，写成jQuery插件的形式，以后也能在别的项目中使用，并且可以方便的更改一些属性值，现在我们来看看jQuery插件的写法。
2、jQuery插件的结构
下边这个结构应该是编写jQuery插件的一个比较好的结构，我将原作者的一些注释进行了相应的翻译。
//为避免冲突，将我们的方法用一个匿名方法包裹起来
(function($) {
//扩展这个方法到jquery
$.fn.extend({
//插件名字
pluginname: function() {
//遍历匹配元素的集合
return this.each(function() {
//在这里编写相应代码进行处理
//传递jQuery到方法中，这样我们可以使用任何javascript中的变量来代替&$&
})(jQuery);
接下来，我们给插件中加入一些可以改变的属性，这样用户可以根据自己的需要来做一些更改。同时，我们应提供相应的默认值。
(function($){
$.fn.extend({
//将可选择的变量传递给方法
pluginname: function(options) {
//设置默认值并用逗号隔开
var defaults = {
padding: 20,
mouseOverColor : '#;,
mouseOutColor : '#ffffff'
var options =
$.extend(defaults, options);
return this.each(function() {
//这里编写相应代码
//可以像下边这样获取变量值
alert(o.padding);
})(jQuery);
3、实现jQuery插件
(function ($) {
$.fn.extend({
//插件名称 - paddingList
paddingList: function (options) {
//参数和默认值
var defaults = {
animatePadding: 10,
hoverColor: &Black&
var options = $.extend(defaults, options);
return this.each(function () {
//将元素集合赋给变量 本例中是 ul对象
var obj = $(this);
//得到ul中的a对象
var items = $(&li a&, obj);
//添加hover()事件到a
items.hover(function () {
$(this).css(&color&, o.hoverColor);
//queue false表示不添加到动画队列中
$(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
}, function () {
$(this).css(&color&, &&);
$(this).animate({ paddingLeft: &0& }, { queue: true, duration: 300 });
})(jQuery);
最后，使用插件的方法如下：
//使用插件
$(document).ready(function() {
$(&#catagory&).paddingList({ animatePadding: 30, hoverColor: &Red& });
作者：jQuery学习
除非注明，文章均为原创，转载时必须以链接形式标明本文地址。
本文地址：
本月最热文章JQuery 编写插件教程 小弟不才抽时间写了2个插件_老骆吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：32贴子：
JQuery 编写插件教程 小弟不才抽时间写了2个插件收藏
插件编写的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护。 JQuery除了提供一个简单、有效的方式进行管理元素以及脚本，它还还提供了例外一种机制：即给核心模块增加自己的方法和额外的功能。通过这种机制，Jquery允许我们自己创建属于我们自己的插件，提高我们在开发过程中的效率。 1.1JQuery的插件分为3中类型： （1）封装对象方法的插件（也就是对象级别的开发） 这种类型的插件是我们今天需要讲的插件。 （2）封装全局函数的插件（类级别开发） 指可以把独立的函数添加到JQuery命名空间之下。 添加一个全局函数，我们只需如下定义： jQuery.foo = function() { alert('This is a test. This is only a test.'); }; 当然 你也可以添加多个全局函数：
. 代码如下:
jQuery.foo = function() { alert('This is a test. This is only a test.'); }; jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".'); }; 调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar'); （3）选择器插件 1.2编写JQuery插件需要注意的地方： （1）插件的推荐命名方法为：jquery.[插件名].js （2）所有的对象方法都应当附加到JQuery.fn对象上面，而所有的全局函数都应当附加到JQuery对象本身上。 （3）在插件内部，this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样，内部的this指向的是DOM元素。 （4）可以通过this.each 来遍历所有的元素 （5）所有方法或函数插件，都应当以分号结尾，否则压缩的时候可能会出现问题。为了更加保险写，可以在插件头部添加一个分号（；），以免他们的不规范代码给插件带来 影响。 （6）插件应该返回一个JQuery对象，以便保证插件的可链式操作。 （7）避免在插件内部使用$作为JQuery对象的别名，而应当使用完整的JQuery来表示。这样可以避免冲突。 1.3JQuery插件的机制 JQuery提供了2个用于扩展JQuery功能的方法。即： ①jQuery.fn.extend() ②jQuery.extend() 第一个就是我们前面说插件类型的第一个中情况，第二个就是指后面的2种情况。 jQuery.extend()在插件中友一个很重要的功能是扩展已经有的object的对象。 比如： var newSrc=$.extend(dest,src1,src2,src3...) 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并。 示例： var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 得到的结果是： result={name:"Jerry",age:21,sex:"Boy"} 详细的 可以查看：jQuery.extend 函数详解 里面对这个方法有很好的讲解。官网：JQuery.extend()与JQuery.fn.extend()使用命名空间 虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
. 代码如下:
jQuery.myPlugin = { foo:function() { alert('This is a test. This is only a test.'); }, bar:function(param) { alert('This function takes a parameter, which is "' + param + '".'); } }; 采用命名空间的函数仍然是全局函数，调用时采用的方法：
. 代码如下:
$.myPlugin.foo(); $.myPlugin.bar('baz'); 二.第一个Jquery插件 如果需要写一个JQuery插件，你需要在$.fn对象后面增加一个属性名，这个属性名 其实 就是你的插件名。它的一般框架如下：
快充神器魅蓝 5s 火热预约中！魅族吧狂送30万周边礼品，点击即有份！
. 代码如下:
(function( $ ) { $.fn.myPlugin = function() { // 这里开始写功能需求 }; })( jQuery ); 现在我们需要写的插件的功能很简单，就是把一个对象给慢慢的隐藏起来。就是使用fadeOut()这个方法。 OK，我们打开 VS 2012.新建一个jscript文件，并且命名为：MyPlugin.js，并在里面添加如下代码：
. 代码如下:
(function ($) { $.fn.myPlugin = function () { this.fadeOut('normal'); }; })(jQuery); 怎么用呢？很简单。 新建一个html页面，把jquery文件以及刚刚我们MyPlugin.js文件导入到本次页面中。如下：
. 代码如下:
&script src="Scripts/jquery-1.4.1.js" type="text/javascript"&&/script& &script src="MyPlugin.js" type="text/javascript"&&/script& js代码： &script type="text/javascript"& $(document).ready(function () { $("#btn1").click(function () { $("#div1").myPlugin(); }); }); &/script& HTML代码：
. 代码如下:
&div id="div1" style="width: 400 height: 30 background-color: G"& My God&/div& &input id="btn1" type="button" value="button" onclick="MyClick()" /& 好的，你现在点击网页上面的按钮的时候，div就会缓缓的隐藏。。。因为我们设定的是normal嘛，里面也可以设定一些值之类的。 很兴奋的是，既然这个有智能提示，如下图：
吧！ 三.插件运用在多个元素控件中。 3.1 运用在多个元素控件中 在上面编写JQuery插件需要注意的地方的第四点，写道 如果要遍历 则可以用this.each方法。$("ID").each 可以遍历jquery对象、数组以及**。 OK。知道了这样子，那么我们的新的代码如下：
. 代码如下:
(function ($) { $.fn.hoverElement = function () { this.each(function () { $(this).hover( function () { $(this).addClass("Add"); }, function () { $(this).removeClass("Remove"); } ); }) } })(jQuery); 上面主要用到.each()方法进行遍历。代码很简单，就是把当前的对象的背景色css样式在“Add”和“Remove”直接切换。 HTML的代码是：
. 代码如下:
&div class="hoverText"& First Button.. &/div& &div class="hoverText"& Second Button.. &/div& &div class="hoverText"& Third Button.. &/div& JS 代码：
. 代码如下:
&script type="text/javascript"& $(document).ready(function () { $(".hoverText").hoverElement(); }); &/script& 很简单，不解释。 3.2 链式操作 链式操作？都听过吧。。。比如下面这一句话： $("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000); 就是能在当前的元素后面通过“.” 来实施更多的操作。这个动作特别的潇洒。 那我们要怎么才能实现这种效果呢？很简单，我能只需要把对象回去就可以了。请注意上面的第六点：插件应该返回一个JQuery对象，以便保证插件的可链式操作。 我们依旧看刚刚的例子：
. 代码如下:
(function ($) { $.fn.hoverElement = function () { return this.each(function () { $(this).hover( function () { $(this).addClass("Add"); }, function () { $(this).removeClass("Remove"); } ); }) } })(jQuery); 代码都一样，唯一区别的是：this.each(function () { 这个前面加了一个 return。这样就实现了我们的链式操作。 然后 你这样：
. 代码如下:
$(document).ready(function () { $(".hoverText").hoverElement().css("color","yellow"); }); 能看到 文字已经变成了yellow色的了。
草度娘的， 删什么删
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或2013年12月 Web 开发大版内专家分月排行榜第三
2012年12月 C/C++大版内专家分月排行榜第三2012年11月 C/C++大版内专家分月排行榜第三2012年11月 扩充话题大版内专家分月排行榜第三2012年10月 C/C++大版内专家分月排行榜第三
2013年10月 总版技术专家分月排行榜第三
2014年3月 Java大版内专家分月排行榜第一2014年1月 Java大版内专家分月排行榜第一2013年12月 Java大版内专家分月排行榜第一2013年11月 Java大版内专家分月排行榜第一2013年10月 Java大版内专家分月排行榜第一
2013年5月 总版技术专家分月排行榜第一
2016年7月 总版技术专家分月排行榜第二2016年3月 总版技术专家分月排行榜第二2015年12月 总版技术专家分月排行榜第二2014年8月 总版技术专家分月排行榜第二2014年7月 总版技术专家分月排行榜第二2013年6月 总版技术专家分月排行榜第二
2013年10月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。1. jQuery 常用插件(1). 表单验证插件——validate&该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：$(form).validate({options});其中form参数表示表单名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。Jquery Validate 验证规则(1)required:true 必输字段(2)remote:”check.php” 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：， 只验证格式，不验证有效性(7)number:true 必须输入合法的数字(负数，小数)(8)digits:true 必须输入整数(9)creditcard: 必须输入合法的号(10)equalTo:”#field” 输入值必须和#field相同(11)accept: 输入拥有合法后缀名的（上传文件的后缀）(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)(15)range:[5,10] 输入值必须介于 5 和 10 之间(16)max:5 输入值不能大于5(17)min:10 输入值不能小于10例子：&script type=&text/script&&& & & & & & $(function () {& & & & & & & & $(&#frmV&).validate(& & & & & & & & & {& & & & & & & & & & & /*自定义验证规则*/& & & & & & & & & & & rules: {& & & & & & & & & & & & & & email:{& & & & & & & & & & & & & & &required:true, //是否允许为空& & & & & & & & & & & & & & &email:true &//正确的电子邮箱格式& & & & & & & & & & & & & & //digits:true &//整数& & & & & & & & & & & & & & }& & & & & & & & & & & },& & & & & & & & & & & /*错误提示位置*/& & & & & & & & & & & errorPlacement: function (error, element) {& & & & & & & & & & & & &error.appendTo(element.parent());& & & & & & & & & & & & &// error.appendTo(&.tip&);& & & & & & & & & & & }& & & & & & & & & }& & & & & & & & );& & & & & & });& & & & &/script&详细：http://blog.csdn.net/u/article/details/(2). 表单插件——form&--通过表单form插件，调用ajaxForm()方法，实现ajax方式向提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：$(form). ajaxForm ({options})；其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。例子：&script type=&text/&&& &$(function () {var options = {& &url: &http://blog.csdn.net/u&,&& &target: &.tip&}$(&#frmV&).ajaxForm(options);& &});&/script&详细网站：http://blog.csdn.net/zzq/article/details/7718956&/linzheng/archive//1880288.html(3). 灯箱插件——lightBox&--该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：$(linkimage).lightBox({options});其中linkimage参数为包含图片的&a&元素名称，options为插件方法的配置对象。例子：&script type=&text/javascript&&& & & & & & $(function () {& & & & & & & & $(&.divPics a&).lightBox({& & & & & & & & & & overlayBgColor: &#666&, //图片浏览时的背景色& & & & & & & & & & overlayOpacity: 0.5, //背景色的& & & & & & & & & & containerResizeSpeed: 600 //图片切换时的速度& & & & & & & & })& & & & & & });& & & & &/script&详细网站：/lhb25/archive//2005330.html/(4). 图片放大镜插件——jqzoom &--在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：$(linkimage).jqzoom({options});其中linkimage参数为包含图片的&a&元素名称，options为插件方法的配置对象。例子：&script type=&text/javascript&&& &$(function () {$(&.content a&).jqzoom({ //绑定图片放大插件jqzoom& &zoomWidth: 123, //小图片所选区域的宽& &zoomHeight: 123, //小图片所选区域的高& &zoomType: 'reverse' //设置放大镜的类型});& &});&/script&详细网站：/kissdodog/archive//2819887.htmlhttp://www.oschina.net/p/jqzoom/(5). 插件——cookie&--使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null);其中参数key为保存cookie对象的名称，value为名称对应的cookie值。例子：&script type=&text/javascript&&& &$(function () {if ($.cookie(&email&)) {& &$(&#email&).val($.cookie(&email&));}$(&#btnSet&).bind(&click&, function () {& &if ($(&#chksave&).is(&:checked&)) {$.cookie(&email&,$(&#email&).val, {& &path: &/&, expires: 7})& &}& &else {$.cookie(&email&,null, {& &path: &/&})& &}});& &});&/script&详细网站：/kissdodog/archive//2818827.htmlhttp://blog.csdn.net/zzq/article/details/7722106(6). 搜索插件——autocomplete&--搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：$(textbox).autocomplete(urlData,[options]);其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象。 (当文本框与搜索插件相绑定后，输入任意字符时，都将返回与之相匹配的字符串，提示用户选择，文本框在空白双击时，显示全部提示信息。)例子：&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&详细网站：/hyl8218/archive//1688828.htmlhttp://blog.csdn.net/daicj88/article/details/6822410 --参数解释(7). 右键菜单插件——contextmenu&--右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下：$(selector).contextMenu(menuId,{options});Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。例子：&script type=&text/javascript&&& &$(function () {$(&#btnSubmit&).contextMenu(&sysMenu&,&{ bindings:& & {'Li3': function (Item) {& & $(&.tip&).show().html(&您点击了“保存”项&);},'Li4': function (Item) {& & $(&.tip&).show().html(&您点击了“退出”项&);}& & }&});& &});& & &&/script&详细网站：http://www.blogjava.net/supercrsky/articles/250091.html/blog/939938http://www./ajax/ajax58.htm(8).自定义对象级插件——lifocuscolor插件&--自定义的lifocuscolor插件可以在&ul&元素中，鼠标在表项&li&元素移动时，自定义其获取焦点时的背景色，即定义&li&元素选中时的背景色，调用格式为：$(Id).focusColor(color) ;其中，参数Id表示&ul&元素的Id号，color表示&li&元素选中时的背景色。例子：&script type=&text/javascript&&& &$(function () {$(&ul&).focusColor(&red&)//调用自定义的插件& &})&/script&详细网站：/code/428(9). 自定义类级别插件—— twoaddresult&--通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为：$.addNum(p1,p2) 和 $.subNum(p1,p2);上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值。详细网站：/code/4299.jQuery UI型插件(1). 拖曳插件——draggable拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：$(selector). draggable({options});options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。详细网站：/luluping/archive//1555329.html/ganqiyin/archive//3471622.htmlhttp://www.jb51.net/article/21786.htm(2). 放置插件——droppable除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：$(selector).droppable({options})selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。例子：& &&script type=&text/javascript&&& &var intsum=0;& & & & & & $(function () {& & & & & & & & $(&.drag&).draggable();& & & & & & & & $(&.cart&).droppable({& & & & & & & & & & drop: function () {& & & & & & & & & & & & & &intsum++;& & & & & & & & & & & & & &alert(intsum);& & & & & & & & & & & & & & $(this).addClass(&focus&).find(&#tip&).html(&&); & & & & & & & & &&& & & & & & & & & & & & & & $(&.title span&).html(intsum);& & & & & & & & & & } & & & & & & & & & & & && & & & & & & & })& & & & & & });& & & & &/script&详细网站：http://blog.csdn.net/fushou/article/details/8061521.cn/s/blog_6d0dc2a90100qaln.html(3). 拖曳排序插件——sortable拖曳排序插件的功能是将序列元素（例如&option&、&li&）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：$(selector).sortable({options});selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，例子：&script type=&text/javascript&&& & & & & & $(function () {& & & & & & & & $(&ul&).sortable({& & & & & & & & & & delay:2,//延时2秒，防止与点击事件冲突& & & & & & & & & & opacity:0.35//设置透明度& & & & & & & & })& & & & & & });& & & & &/script&详细网站：http://hb-/blog/1154618http://www.jb51.net/article/38761.htm(4). 面板折叠插件——accordion面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下：$(selector).accordion({options});其中，参数selector为整个面板元素，options参数为方法对应的配置对象。例子：&body&&div id=&divtest&&& &&div id=&accordion&&&h3&& &&a href=http://blog.csdn.net/u/article/details/"#">白富美&p&咱们结婚吧!&/p&&h3&& &&a href=http://blog.csdn.net/u/article/details/"#">土豪族&p&咱们交个吧!&/p&& &&/div&&/div&&script type=&text/javascript&&& &$(function () {$(&#accordion&).accordion();& &});&/script&&/body&详细网站：/sunfishlu/archive//1573678.htmlhttp://www.jeasyui.net/plugins/161.htmldemo：http://www./ajax/Accordion.htm(5). 选项卡插件——tabs使用选项卡插件可以将&ul&中的&li&选项定义为选项标题，在标题中，再使用&a&元素的“href”属性设置选项标题对应的内容，它的调用格式如下：$(selector).tabs({options});selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。例子：&&body&&div id=&divtest&&& &&div id=&tabs&&&ul&& &&li&&a href=http://blog.csdn.net/u/article/details/"#tabs-1">最爱吃的水果& &&li&&a href=http://blog.csdn.net/u/article/details/"#tabs-2">最喜欢的运动&/ul&&div id=&tabs-1&&& &&p&橘子&/p&& &&p&香蕉&/p&& &&p&葡萄&/p&&/div&&div id=&tabs-2&&& &&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&详细网站：/bestfc/archive//1498737.html/documentation/tabs.php(6). 插件——dialog对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：$(selector).dialog({options});selector参数为显示弹出对话框的元素，通常为&div&，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。例子：&body&& & & & &div id=&divtest&&& & & & & & &div class=&content&&& & & & & & & & &span id=&spnName& class=&fl&&张三&/span&& & & & & & & & &input id=&btnDelete& type=&button& value=http://blog.csdn.net/u/article/details/"删除"
class="fr"/>& & & & & & &/div&& & & & & & &div id='dialog-modal'&&/div&& & & & &/div&& & & &&& & & & &script type=&text/javascript&&& & & & & & $(function () {& & & & & & & & $(&#btnDelete&).bind(&click&, function () { //询问按钮事件& & & & & & & & & & if ($(&#spnName&).html() != null) { //如果对象不为空& & & & & & & & & & & & sys_Confirm(&您真的要删除该条记录吗？&);& & & & & & & & & & & && & & & & & & & & & }& & & & & & & & });& & & & & & });& & & & & & 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&& & 详细网站：/haogj/archive//1956523.html(7). 菜单工具插件——menu菜单工具插件可以通过&ul&创建多级内联或弹出式菜单，支持通过方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：$(selector).menu({options}); selector参数为菜单列表中最外层&ul&元素，options为menu()方法的配置对象。例子：&body&&ul id=&menu&&& &&li&&a href=http://blog.csdn.net/u/article/details/"#">小明一中&ul&& &&li&&a href=http://blog.csdn.net/u/article/details/"#">高中部&ul&& &&li&&a href=http://blog.csdn.net/u/article/details/"#">高一(1)班& &&li&&a href=http://blog.csdn.net/u/article/details/"#">高一(2)班& &&li&&a href=http://blog.csdn.net/u/article/details/"#">高一(3)班&ul&& &&li&&a href=http://blog.csdn.net/u/article/details/"#">小胡& &&li&&a href=http://blog.csdn.net/u/article/details/"#">小李& &&li&&a href=http://blog.csdn.net/u/article/details/"#">小陈&/ul&& &&/li&&/ul&& &&/li&& &&li&&a href=http://blog.csdn.net/u/article/details/"#">初中部&ul&& &&li&&a href=http://blog.csdn.net/u/article/details/"#">初一(1)班& &&li&&a href=http://blog.csdn.net/u/article/details/"#">初一(2)班& &&li&&a href=http://blog.csdn.net/u/article/details/"#">初一(3)班&/ul&& &&/li&& &&li&&a href=http://blog.csdn.net/u/article/details/"#">教研部&/ul&& &&/li&& &&li class=&ui-state-disabled&&&a href=http://blog.csdn.net/u/article/details/"#">大明二中& &&!--将&li&元素的class属性值设为“ui-state-disabled”，可将菜单选项置为不可用状态--&&/ul&& & & &&& & & & &script type=&text/javascript&&& & & & & & $(function () {& & & & & & & & $(&#menu&).menu();& & & & & & });& & & & &/script&& & &/body&& & 详细网站： Demo: /xiaoyao2011/archive//jqueryMenu.html/jiaoben/caidanhaohang.html/jquery/menu/smartMenu右键自定义上下文： /wordpress/?p=1667jQuery-menu-aim: /naonaoye/archive//2949504.html/js/dh/56.htmljQuery 导航菜单: /wordpress-menubar-6/(8). 微调按钮插件——spinner微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：$(selector).spinner({options});selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。例子：&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, strC$(&input&).spinner({& &//初始化插件& &max: 10,& &min: 0,& &//设置微调按钮递增/递减事件& &spin: function (event, ui) {if (ui.value =http://blog.csdn.net/u/article/details/= 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&来源网站： /jquery-ui-api/spinner//Philoo/archive//jeasyui_api_spinner.html(9). 工具提示插件——tooltip工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下：$(selector).tooltip({options});其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。例子：&body&&div id=&divtest&&& &&div class=&title&&工具提示插件&/div&& &&div class=&content&&&div&& &&label for=&name&&姓名&/label&& &&input id=&name& name=&name& title=&我是土豪，欢迎与我做朋友& /&&/div&& &&/div&&/div&&script type=&text/javascript&&& &$(function () {$(&input&).tooltip({& &show: {effect: &slideDown&,delay: 350& &},& &hide: {effect: &explode&,delay: 350& &},& &position: {my: &left top&,at: &left bottom&& &}});& &});&/script&& &&/body&& &详细网站： http://www.jb51.net/article/19368.htm/QLeelulu/archive//1097368.html学习网站：/learn/11Jquery easyUI 中文网：http://www.jeasyui.net/
版权声明：本文为博主原创，未经博主允许不得转载。