jquery菜单插件,jquery下拉框插件

如何创建一个自定义jquery插件

jQuery 库是专为加快 JavaScript 开发速度而设计的。通过简化编写 JavaScript 的方式，减少代码量。使用

jQuery 库时，您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话，这可能就是您需要编写自定义 jQuery 插件的一个原因。

jQuery 插件允许您使用自定义代码扩展 jQuery 库；您可以对一些重复性函数使用插件。例如，很多插件可供幻灯片、下拉菜单和折叠菜单所用。如果您搜索 jQuery 插件，就会发现有大量可用于自己项目的示例（看看它们是如何构建的）。

准备工作

对JavaScript、jQuery 和CSS有一个基本了解。（用到的源代码及示例在本文最下方）

开始

jQuery 是一个可扩展 JavaScript 语言的库。当您创建一个 jQuery 插件时，本质上是在扩展这个 jQuery

库。要真正了解插件如何扩展 jQuery 库需要对 JavaScript prototype 属性有一个基本了解。尽管不直接使用，但是

JavaScript prototype 属性可通过 jQuery 属性 fn 在后台使用，这是原生 JavaScript prototype

属性的一个 jQuery 别名。

要使用 fn 属性创建一个新 jQuery 插件，只需要为 fn 属性分配一个插件名，并将其指向一个充当构造函数的新函数，类似于纯

JavaScript。Code 1显示了如何定义一个名为 accordion 的新 jQuery 插件，其方法是通过使用 jQuery 对象和

fn 属性，并将其分配给一个新的构造函数。

Code 1：定义一个名为 accordion 的新 jQuery 插件

jQuery.fn.accordion = function() {

// 在这里添加插件代码

};

Code 1 展示了创建 jQuery 插件的一种方法；该示例没有什么功能性错误。但是，创建一个 jQuery

插件所推荐的方法是，先创建一个允许使用美元符号 ($) 的包装器函数。在默认情况下，美元符号可能与其他 JavaScript

框架发生冲突，如果将插件包装在一个函数中，就不会出现冲突。Code 2 中的示例代码显示如何将一个包装器函数应用到一个 jQuery

插件定义中。

(function($) {

$.fn.accordion = function() {

// 在这里添加插件代码

};

})(jQuery);

在Code 2 中，jQuery 关键字被应用到包装器函数中，这允许您在插件中使用美元符号，就像使用 fn

属性时那样。包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替 jQuery

关键字，不会干扰其他第三方插件。该选项提供了一种方法使我们可以在开发整个插件中编写较少的代码，并且有助于您的插件代码保持整洁，易于维护。

维护链接性

jQuery 的一个优势是允许您使用任何类型的选择器。但是，必须记住，您的插件可以处理几种不同的元素类型。使用 this

关键字允许您的插件应用于相关函数，通过循环实现每个元素的访问，而不考虑元素类型。如果在 each 循环前使用 return

关键字，就可以使用您的插件维护链接性。清单 3 显示了分配给一个函数处理程序且与 return 关键字相结合的 each 循环。

code 3. 在 each 循环之前使用 return 关键字

(function($) {

$.fn.accordion = function() {

return this.each(function() {

// 使用 return

});

};

})(jQuery);

有了Code 3 的代码后，示例 accordion 插件可用在一个方法调用链中。有了链接性（另一个强大的 jQuery

特性），您的插件就可用在一个方法调用链中。例如，下面的代码显示了如何淡出 HTML 元素，并在单一的方法调用链中将其从文档对象模型 (DOM)

中删除。

$("#my-div").fadeOut().remove();

构造一个 accordion

一个典型的层叠设计包括标题栏和相关内容区域。定义列表是一个可供 accordions 使用的很好的 HTML 结构；dt 元素供标题所用，而dd 元素供内容区域所用。清单 4 中的 HTML 结构是一个定义列表，含有四个标题以及相应的内容区域。

Code 4. 单一方法调用链

dl class="accordion" id="my-accordion"

dt第1部分/dt

dd内容一/dd

dt第2部分/dt

dd内容二/dd

dt第3部分/dt

dd内容三/dd

dt第4部分/dt

dd内容四/dd

/dl

Code 4 中定义的列表也有一个分配给它的名为 accordion 的 CSS 类。没有应用任何 CSS，这个 accordion 结构看起来类似于图 1 中的基础设计

为了美观，我们再给Code 4中的Html美化一下，并命名为“jquery.accordion.css”

Code 5. CSS部分

.accordion {

width: 500px;

border: 1px solid #ccc;

border-bottom: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

.accordion dt,

.accordion dd {

border-bottom: 1px solid #ccc;

margin: 0px;

}

.accordion dt {

background: #eaeaea;

cursor: pointer;

padding: 8px 4px;

font-size: 13px;

font-weight: bold;

}

.accordion dd {

padding: 12px 8px;

}

效果如下图：

自定义插件

要制作一个功能性 accordion，必须将自定义代码应用到您上一小节创建 jQuery 插件的函数。accordion

插件从遍历所有已定义的 accordion 开始。要定义一个 accordion，在 HTML 文档或外部嵌入式 JavaScript

文件中使用下列 jQuery。

$('dl#my-accordion').accordion();

对于每个 Accordion，您可以使用 jQuery 的 children 方法访问相关定义的标题，返回一个数组或 dt 元素。应用一个

click 事件到 dt 元素，然后一个名为 reset 方法应用到每个 dt。accordion 首次加载时，该 reset 方法会折叠所有

dd 元素。单击 dt 元素或者标题栏时，click 事件会触发一个名为 onClick 的自定义方法。自定义 onClick 方法用于查找

accordion 中的所有 dt 元素。它调用一个自定义 hide 方法，该方法通过使用 next 方法找到紧挨着 dt 元素的 dd

元素，隐藏每个相关的 dd 元素，通过使用 next 方法找到紧挨着 dt 元素的 dd 元素，然后向上滑动激活它。

所有 dd 元素被隐藏后，使用 slideDown 方法，就可以看见与单击过的 dt 元素相关的 dd 元素，并创建一个放大和收缩动画，如清单 8

所示。onClick 方法的最后一行代码是 return false，确保任何被点击的主题栏没有显现出其一般行为。例如，如果您使用一个

anchor 元素作为标题栏，您可能想要执行 return false，这样就不会将用户定向到另一个页面或现有页面的一部分。

Code 6. 自定义用于创建一个 jQuery 插件的 accordion 函数

(function($) {

$.fn.accordion = function(options) {

return this.each(function() {

var dts = $(this).children('dt');

dts.click(onClick);

dts.each(reset);

});

function onClick() {

$(this).siblings('dt').each(hide);

$(this).next().slideDown('fast');

return false;

}

function hide() {

$(this).next().slideUp('fast');

}

function reset() {

$(this).next().hide();

}

}

})(jQuery);

如果该 accordion 插件与一个 HTML 定义列表结构相关联时，比如您之前创建的那个 accordion 函数将被应用。有了

accordion 函数，单击一个标题栏或 dt 元素时，会打开其内容区域，而其他内容区域则关闭。换句话说，一次只能打开一个内容区域。

设定插件的默认值（Defaults）和设置项（options）

jQuery 插件可以包括 defaults 和 options。Options 本质上就是传递给插件的参数。可以使用 options

发送一个参数作为 object literal，这是一个标准 jQuery 实践，而不需要传递多个参数。如果您的插件支持 options，使用

defaults 对象设置默认的 options 将是一个最佳方式。和 options 一样，defaults 是一个 object

literal，应该包括您想要传递到插件中的属性。

例如，如果您支持一个可用于在首次加载时打开 accordion 第一个内容区域的属性，那么在您的插件中应该包括一个 open

属性的默认值。在您的插件中使用 defaults 确定默认函数，使用 options 覆盖默认值。如果插件接收 options，可以使用

$.extend 方法执行覆盖。jQuery 的 $.extend 方法合并两个或多个对象。Code 7 中的示例显示在一个自定义 jQuery

插件中使用 $.extend 方法合并用户定义选项和默认选项的一般实现。

Code 7. 向一个自定义的 accordion jQuery 插件添加 options 和 defaults

(function($) {

$.fn.accordion = function(options) {

var settings = $.extend({}, {open: false}, options);

return this.each(function() {

var dts = $(this).children('dt');

dts.click(onClick);

dts.each(reset);

if(settings.open) $(this).children('dt:first-child').next().show();

});

function onClick() {

$(this).siblings('dt').each(hide);

$(this).next().slideDown('fast');

return false;

}

function hide() {

$(this).next().slideUp('fast');

}

function reset() {

$(this).next().hide();

}

}

})(jQuery);

$.extend 方法参数是一个目标对象和 2 个或多个合并对象。在本示例中，目标对象是一个空 object

literal，充当合并对象容器。目标将成为一个包含合并对象值的单一对象（在该案例中是 settings 变量）。第 2

个参数是一个包含默认插件属性的 object literal。第 3 个参数是用户定义的 options 参数。要在一个 HTML 元素上使用

accordion 插件传递 options，需要知道除了之前您作为 object literal 传递的属性外还有哪些属性，如下所示。

$('dl#my-accordion').accordion({open:true});

在Code 7 示例中，传递到插件的 options 通过 $.extend 方法覆盖 defaults。如果没有传递 options，则使用默认值。对于示例插件，可使用 open 属性确定加载时是否打开第一个内容区域。

可重用性

您可以在任何 HTML 文档中重用示例 accordion 插件，可以在单个 HTML 文档中多次使用。您也可以包括多个

accordion 结构，就像已创建的那个 accordion，使用刚创建的新 accordion 插件通过 jQuery 将每个单独定义为

accordion。要向一个 HTML 文档添加多个 accordion，只需要添加尽可能多的 accordion 结构。Code 8

中的代码包括两个 accordion 结构，由一个段落隔开。

Code 8. 在同一个 HTML 文档中使用多个 accordion

dl class="accordion" id="my-accordion"

dt第1部分/dt

dd内容一/dd

dt第2部分/dt

dd内容二/dd

dt第3部分/dt

dd内容三/dd

dt第4部分/dt

dd内容四/dd

/dl

dl class="accordion" id="my-accordion"

dt第5部分/dt

dd内容五d

dt第6部分/dt

dd内容六dd

dt第7部分/dt

dd内容七/dd

/dl

Code 8 中的两个 accordion 结构几乎一样，除了内容不一样外，更重要的是 ID 值也不一样。第一个结构包含一个

my-accordion ID 值。第 2 个结构包含一个 my-accordion2 ID 值。现在可以单独定向这些结构。例如，下列

jQuery 脚本使用已创建的新插件将每个 accordion 结构定义为一个 accordion。

$('dl#my-accordion').accordion({open:true});

$('dl#my-accordion2').accordion({open:true});

两个 accordion 结构定义完成后，第一个面板默认设置为打开下图 显示一个用在同一个 HTML 文档的多个 accordion 插件的示例。

相关问答

Q1: jquery插件怎样使用和修改?

jQuery插件 要使用它的话 通常插件中都有demo或者api可以查阅\x0d\x0a通常jQuery插件为了减小体积 会发布两个版本 XXX.js和XXX.min.js\x0d\x0a\x0d\x0a如果你要修改插件需要使用XXX.js文件\x0d\x0a\x0d\x0a首先 你要知道它怎么用,先有一个可用的demo(没有demo就自己写一个),然后用webkit内核或firefox进行断点查看,这主要是为了找插件入口点,当然 你也可以直接查看js代码 这需要一定的底子\x0d\x0a最后 就是慢慢查看他的代码的实现功能了,先得看懂他是怎么实现的,然后你才会知道怎么改.\x0d\x0a\x0d\x0ajQuery插件我也写的不少 像 模拟alert/confirm/prompt 错误信息提示框 模拟弹出窗体 无缝marquee滚动 分页控件 拖拽控件等等\x0d\x0a\x0d\x0ajQuery插件的框架写法通常是\x0d\x0a\x0d\x0a(function($){\x0d\x0a $.fn.extend({\x0d\x0a fnKey:function(){}\x0d\x0a })\x0d\x0a //或者\x0d\x0a $.fn.fnKey=function(){}\x0d\x0a})(jQuery)\x0d\x0a\x0d\x0a上面的两种写法的调用 方式 是\x0d\x0a\x0d\x0a$("XXX").fnKey()进行调用的\x0d\x0a\x0d\x0a还有一种写法:\x0d\x0avar fnClass = function(){\x0d\x0a this.fnKey=function(){\x0d\x0a }\x0d\x0a this.props="";\x0d\x0a}\x0d\x0a\x0d\x0a这种写法是的调用 方式是\x0d\x0afnClass obj = new fnClass();\x0d\x0aobj.fnKey();\x0d\x0a\x0d\x0a第二种写法是js的面向对象编程 得自己慢慢的理解哈

Q2: jquery有哪些插件？

//200多个插件如下 实际开发中 请选择合适的使用

1：文件上传类jQuery插件

Ajax File Upload.

jQUploader.

Multiple File Upload plugin.

jQuery File Style.

Styling an input type file.

Progress Bar Plugin.

2：表单验证类jQuery插件

jQuery Validation.

Auto Help.

Simple jQuery form validation.

jQuery XAV – form validations.

jQuery AlphaNumeric.

Masked Input.

TypeWatch Plugin.

Text limiter for form fields.

Ajax Username Check with jQuery.

3:表单选择框类jQuery插件

jQuery Combobox.

jQuery controlled dependent (or Cascadign) Select List.

Multiple Selects.

Select box manipulation.

Select Combo Plugin.

jQuery – LinkedSelect

Auto-populate multiple select boxes.

Choose Plugin (Select Replacement).

4:表单基本、输入框、选择框等jQuery插件

jQuery Form Plugin.

jQuery-Form.

jLook Nice Forms.

jNice.

Ping Plugin.

Toggle Form Text.

ToggleVal.

jQuery Field Plugin.

jQuery Form’n Field plugin.

jQuery Checkbox manipulation.

jTagging.

jQuery labelcheck.

Overlabel.

3 state radio buttons.

ShiftCheckbox jQuery Plugin.

Watermark Input.

jQuery Checkbox (checkboxes with imags).

jQuery SpinButton Control.

jQuery Ajax Form Builder.

jQuery Focus Fields.

jQuery Time Entry.

5:时间、日期和颜色选取类jQuery插件

jQuery UI Datepicker.

jQuery date picker plugin.

jQuery Time Picker.

Time Picker.

ClickPick.

TimePicker.

Farbtastic jQuery Color Picker Plugin.

Color Picker by intelliance.fr.

6:投票类jQuery插件

jQuery Star Rating Plugin.

jQuery Star Rater.

Content rater with asp.net, ajax and jQuery.

Half-Star Rating Plugin.

7:搜索类jQuery插件

jQuery Suggest.

jQuery Autocomplete.

jQuery Autocomplete Mod.

jQuery Autocomplete by AjaxDaddy.

jQuery Autocomplete Plugin with HTML formatting.

jQuery Autocompleter.

AutoCompleter (Tutorial with PHPMySQL).

quick Search jQuery Plugin.

8:jQuery编辑器插件

jTagEditor.

WYMeditor.

jQuery jFrame.

Jeditable – edit in place plugin for jQuery.

jQuery editable.

jQuery Disable Text Select Plugin.

Edit in Place with Ajax using jQuery.

jQuery Plugin – Another In-Place Editor.

TableEditor.

tEditable – in place table editing for jQuery.

9:多媒体、视频、Flash等类jQuery插件

jMedia – accessible multi-media embedding.

JBEdit – Ajax online Video Editor.

jQuery MP3 Plugin.

jQuery Media Plugin.

jQuery Flash Plugin.

Embed QuickTime.

SVG Integration.

图片类jQuery插件

ThickBox.

jQuery lightBox plugin.

jQuery Image Strip.

jQuery slideViewer.

jQuery jqGalScroll 2.0.

jQuery – jqGalViewII.

jQuery – jqGalViewIII.

jQuery Photo Slider.

jQuery Thumbs – easily create thumbnails.

jQuery jQIR Image Replacement.

jCarousel Lite.

jQPanView.

jCarousel.

Interface Imagebox.

Image Gallery using jQuery, Interface  Reflactions.

simple jQuery Gallery.

jQuery Gallery Module.

EO Gallery.

jQuery ScrollShow.

jQuery Cycle Plugin.

jQuery Flickr.

jQuery Lazy Load Images Plugin.

Zoomi – Zoomable Thumbnails.

jQuery Crop – crop any image on the fly.

Image Reflection.

10:Google地图类jQuery插件应用

jQuery Plugin googlemaps.

jMaps jQuery Maps Framework.

jQmaps.

jQuery  Google Maps.

jQuery Maps Interface forr Google and Yahoo maps.

jQuery J Maps – by Tane Piper.

11:游戏类jQuery插件

Tetris with jQuery.

jQuery Chess.

Mad Libs Word Game.

jQuery Puzzle.

jQuery Solar System (not a game but awesome jQuery Stuff).

12:表格,网格类jQuery插件

UI/Tablesorter.

jQuery ingrid.

jQuery Grid Plugin.

Table Filter – awesome!.

TableEditor.

jQuery Tree Tables.

Expandable “Detail” Table Rows.

Sortable Table ColdFusion Costum Tag with jQuery UI.

jQuery Bubble.

TableSorter.

Scrollable HTML Table.

jQuery column Manager Plugin.

jQuery tableHover Plugin.

jQuery columnHover Plugin.

jQuery Grid.

TableSorter plugin for jQuery.

tEditable – in place table editing for jQuery.

jQuery charToTable Plugin.

jQuery Grid Column Sizing.

jQuery Grid Row Sizing.

13:统计类jQuery插件

jQuery Wizard Plugin .

jQuery Chart Plugin.

Bar Chart.

14:边框、圆角、背景类jQuery插件

jQuery Corner.

jQuery Curvy Corner.

Nifty jQuery Corner.

Transparent Corners.

jQuery Corner Gallery.

Gradient Plugin.

14:文字和超链接类jQuery插件

jQuery Spoiler plugin.

Text Highlighting.

Disable Text Select Plugin.

jQuery Newsticker.

Auto line-height Plugin.

Textgrad – a text gradient plugin.

LinkLook – a link thumbnail preview.

pager jQuery Plugin.

shortKeys jQuery Plugin.

jQuery Biggerlink.

jQuery Ajax Link Checker.

15:文本提示类jQuery插件

jQuery Plugin – Tooltip.

jTip – The jQuery Tool Tip.

clueTip.

BetterTip.

Flash Tooltips using jQuery.

ToolTip.

16:菜单和导航类jQuery插件

jQuery Tabs Plugin – awesome! . [demo nested tabs.]

another jQuery nested Tab Set example (based on jQuery Tabs Plugin).

jQuery idTabs.

jdMenu – Hierarchical Menu Plugin for jQuery.

jQuery SuckerFish Style.

jQuery Plugin Treeview.

treeView Basic.

FastFind Menu.

Sliding Menu.

Lava Lamp jQuery Menu.

jQuery iconDock.

jVariations Control Panel.

ContextMenu plugin.

clickMenu.

CSS Dock Menu.

jQuery Pop-up Menu Tutorial.

Sliding Menu.

17:幻灯片、手风琴特效类jQuery插件

jQuery Plugin Accordion.

jQuery Accordion Plugin Horizontal Way.

haccordion – a simple horizontal accordion plugin for jQuery.

Horizontal Accordion by portalzine.de.

HoverAccordion.

Accordion Example from fmarcia.info.

jQuery Accordion Example.

jQuery Demo – Expandable Sidebar Menu.

Sliding Panels for jQuery.

jQuery ToggleElements.

Coda Slider.

jCarousel.

Accesible News Slider Plugin.

Showing and Hiding code Examples.

jQuery Easing Plugin.

jQuery Portlets.

AutoScroll.

Innerfade.

18:拖放类jQuery插件

UI/Draggables.

EasyDrag jQuery Plugin.

jQuery Portlets.

jqDnR – drag, drop resize.

Drag Demos.

19:XML XSL JSON Feeds相关jQuery插件

XSLT Plugin.

jQuery Ajax call and result XML parsing.

xmlObjectifier – Converts XML DOM to JSON.

jQuery XSL Transform.

jQuery Taconite – multiple Dom updates.

RSS/ATOM Feed Parser Plugin.

jQuery Google Feed Plugin.

20:浏览器

Wresize – IE Resize event Fix Plugin.

jQuery ifixpng.

jQuery pngFix.

Link Scrubber – removes the dotted line onfocus from links.

jQuery Perciformes – the entire suckerfish familly under one roof.

Background Iframe.

QinIE – for proper display of Q tags in IE.

jQuery Accessibility Plugin.

jQuery MouseWheel Plugin.

21:警告, 提示, 确认等对话框

jQuery Impromptu.

jQuery Confirm Plugin.

jqModal.

SimpleModal.

CSS

jQuery Style Switcher.

JSS – Javascript StyleSheets.

jQuery Rule – creation/manipulation of CSS Rules.

jPrintArea.

22:DOM、AJAX和其它JQuery插件

FlyDOM.

jQuery Dimenion Plugin.

jQuery Loggin.

Metadata – extract metadata from classes, attributes, elements.

Super-tiny Client-Side Include Javascript jQuery Plugin.

Undo Made Easy with Ajax.

JHeartbeat – periodically poll the server.

Lazy Load Plugin.

Live Query.

jQuery Timers.

jQuery Share it – display social bookmarking icons.

jQuery serverCookieJar.

jQuery autoSave.

jQuery Puffer.

jQuery iFrame Plugin.

Cookie Plugin for jQuery.

jQuery Spy – awesome plugin.

Effect Delay Trick.

jQuick – a quick tag creator for jQuery..