jquery插件官网【jquery插件库】 收藏 0

jQuery 插件开发指南

jQuery凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。

jQuery插件

那么首先我们来简单的看一下正统的 jQuery 插件定义方式：

(function ($) {

$.fn.插件名 = function (settings) {

//默认参数

var defaultSettings = {

} /* 合并默认参数和用户自定义参数 */

settings = $.extend(defaultSettings, settings);

return this.each(function () { //代码 }); //插件在元素内多次出现

} })(jQuery);

先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看，不然第一行就完全无意义了)：

(function ($) {

})(jQuery);

这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解，将会对这种代码非常疑惑，那么强烈建议您阅读【详谈JavaScript 匿名函数及闭包】这篇文章。

jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用，就是用于合并参数。

$.fn.tip = function (settings) {

var defaultSettings = {

//颜色

color: \’yellow\’,

//延迟

timeout: 200 }

/* 合并默认参数和用户自定义参数 */

settings = $.extend(defaultSettings, settings);

alert(settings.input);

}

jQuery 插件定义第二种方式：

(function ($) {

//插件定义–更换名字

$.fn.tabpanel = function (method) {

var methods = $.fn.tabpanel.methods;

if (methods[method]) {

return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

} else if (typeof method === \’object\’ || !method) {

return methods.init.apply(this, arguments);

} else {

}

}

//支持的方法

$.fn.tabpanel.methods =

{

//初始化

init: function (p_options) {

tabpanelBind(p_options, this);

},

add: function (p_options) {

addTab(p_options, this);

tabpanelBind(p_options, this);

// debugger

} }

function add(p_options) {

var _defaults = {

id: \”\”

}

//内部实现略………

return _index;

}

})(jQuery);

调用 $(\”#team\”).tabpanel(\’add\’,\”\”);

25款开源免费的jQuery工具提示插件

Sweet Tooltip：基于 CSS3 的工具提示插件，提供多种提示风格

qTip：强大且精致的jQuery提示信息插件

Hint.CSS：采用SASS构建的纯CSS工具提示库，无需 JavaScript 代码

grumble.js：可创建球形气泡的工具提示

TIPSY：类似于Facebook的工具提示插件

响应式且移动友好性非常强的CSS jQuery工具提示插件

Opentip：开源免费的JavaScript工具提示框架

qTip2：第二代qTip

Tooltipster：jQuery HTML5工具提示插件，允许你轻松创建语义和流行的工具提示

Ajax Tooltip：Ajax工具提示脚本

gdakram：一个简单的动画悬停工具提示的jQuery插件

Hovercard：免费且轻量级的jQuery插件，可以轻松的在弹出层中显示文本、链接或者其他任何 HTML 元素的相关信息

clueTip：方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时，它的内容将变成clueTip的标题

simpletip：一个简单的 jQuery 的工具提示(tooltip)插件，至此静态、动态以及Ajax加载的工具提示内容

Pines Notify：JavaScript通知插件，用于Bootstrap或jQuery UI

JTip：jQuery & AJAX 工具提示解决方案

(mb)Tooltip：为你的使用jQuery的页面提供的一个美丽的tooltip

Prototip2：基于Prototype框架的信息提示(tooltip)插件，提供了多样的界面效果，并且具有很高的可定制性

UniTip：一个易于实现和定制,支持多浏览的tooltip脚本

Annotator：开源jQuery文本注解插件，包含注释、标签、用户

气泡式工具提示

一个优秀的超链接鼠标悬停提示

GIPS：清洁，简单的jQuery插件，支持CSS主题

地图标签&工具提示

Profile Tooltip：一款显示个人资料的工具提示插件

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com