JQuery的45个经典插件应用

jQuery滑动门

1) Slider Gallery- 这是一个模仿Apple网站的jQuery滑动门产品展示. 这个‘产品展示滑动门’就是一个直线前进的画廊,在有限的空间里面显示产品图片,支持Tab标签的滑动和前进后退按钮的滑动.

  • Live Demo: Here

2) Accessible slider- Illustrations和代码显示如何最简单的制作一个滑动门UI控制条,而不需要任何Javascript或CSS知识.

  • Live Demo: Here

jQuery图像处理

3) crop, labelOver and pluck-这个jQuery脚本可以让你的访客控制图像,实现截剪图片等操作.

  • Live Demo Of Crop: Here
  • Live Demo of LabelOver: Here

4) Semitransparent rollovers -一个简单的脚本,让图像实现半透明效果

  • Live Demo Of Crop: Here

5) Creating A Sliding Image Puzzle Plug-In- 创建出一个基于总容器的拼图效果,非常的特别.

  • Live Demo: Here

jQuery 导航菜单

6) Digg Header- 这是一个仿Digg的导航菜单,宽度可变,下拉菜单,精美的搜索框,简单的颜色更改, 总之是有很多可取之处,很强大的一个导航菜单.

  • Live Demo: Here
  • Download Code: From Here

7) IconDock- a jQuery JavaScript library 这个插件允许你创建一个类似于Mac OS X 操作系统Dock菜单的特效菜单.

  • Live Demo: Here
  • Download Code: From Here

   类似的还有:CSS Dock Menu - 主页也很漂亮的说! 

CSS dock menu


jQuery 手风琴效果

8 ) Horizontal Accordion-这个插件提供一些简单的选项可以让你轻松控制手风琴的展示效果.


9) HoverAccordion- 这个jQuery插件产生一个漂亮的二级层联菜单


jQuery图像浏览

10) Step Carousel Viewer-一个滑动门应用,内容区域可以是一张图片或是HTML富文本内容.


11) Featured Content Glider-可以在有限空间内展示不同的网页内容,通过分页导航和前后按钮进行操作,支持手动模式和自动的幻灯片播放模式.


jQuery图表

12) jQuery + jFlot - 构图,绘画和图表


13) Accessible charts using canvas and jQuery - 用jQuery把HTML数据以可视化的概念展示出来,生成多种形式的图表,比如线性图,饼图,面积图等.

  • Live Demo: Here

jQuery编辑器

14) Small Rich Text Editor - 体积小巧,跨浏览器,Ajax图像上传,HTML代码清理,基于PHP后端的富文本编辑器,功能十分全面.

  • Live Demo: Here
  • Download Code: From Here

15)markItUp! Universal markup editor-这个插件可以让你把任何Textarea文本框转换成一个标识编辑器.目标编辑器包括Html, Textile, Wiki语法, Markdown, BBcode甚至是你自己的标识系统.

  • Live Demo: Here
  • Download Code: From Here

jQuery Flash插件

16) jQuery Flash Plugin-这个 jQuery插件可以让你嵌入Flash电影


17) jMP3- jMP3提供一种简单的方法,通过一个Flash MP3音乐播放器,让你可以播放网路上面大多数的MP3音乐文件.
using the sleek Flash Single MP3 Player & jQuery.


18) jQuery Media Plugin- 这个播放器插件几乎可以播放任何格式的多媒体文件,包括Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF以及更多.


jQuery Tab标签

19) jQuery Tabs-典型的Tabs标签切换插件,没有Javascript可用.

  • Live Demo: Here

jQuery LightBox灯箱效果

20) Fancy Box- 一个新鲜的Lightbotx灯箱效果的插件,主要特点包括自适应窗口图像,为全尺寸图像增加了一个很好,支持相关图像浏览.


21) Thickbox Plus- Lightbox灯箱效果,自适应图像大.

  • Live Demo: Here
  • Download Code: From Here

jQuery 网格数据插件

22) Flexi Grid-这是一个轻量级但丰富的数据网格插件,支持滚动数据,网格头操作,再加上一个能够连接到一个基于XML数据源使用ajax加载内容。一般网格数据插件所拥有的基本功能都有了,最大的特点就是它非常小巧.

  • Live Demo: Here
  • Download Code: From Here

23) Query Grid 3.1- 这个jQuery插件可以上用户自定义网格数据显示的分页数,并进行添加,删除等操作.

  • Live Demo: Here
  • Download Code: From Here

jQuery区域处理

24) FaceBook Like - jQuery and autosuggest Search Engine- 一个类似于Facebook的搜索引擎,主要的特点就是搜索时的自动提示
使用 jQuery 作为Ajax框架和 BSN Autosuggest 库.

  • Live Demo: Here

25) Masked Input Plugin- 可以在Input输入框里面生成一些数据格式,以方便提醒用户,比如日期格式,电话格式等等.


非常酷的动画效果的jQuery插件

26) jQuery Enchant- 该插件致力于创造出各种丰富的特效。使用它,可以创建出各种一流的动画和高度可配置的特效。


27) EasyDrag jQuery Plugin-一处简单的拖拽插件,可以让任何DOM元素实现拖拽效果,没有其它的功能,相对操作起来也就比较简单.


28) Simple Effects Plugins- 一个新鲜的jQuery特效插件,可以实现闭合,隐藏,显示,褪色和滑动效果等.


29) Slide out and drawer effect- 这是一个手风琴特效示例, 当鼠标悬浮在标题上面时,内容块就会展示. 这个插件最酷的地方在于其内容块保持了固定的高度.

  • Live Demo: Here

值得一试的jQuery插件

30) crop, labelOver and pluck- 让每一段文本都实现首字下沉的效果


31) Style Author Comments Differently with jQuery-为作者留言实现高度效果


32) Creating a fading header-这是一个简单的示例,使用jQuery 和 CSS 来创建出头部淡入淡出的效果.

  • Live Demo: Here

33) Coda Bubble- 一个弹出泡沫效果的示例,看上去非常的个性.

  • Live Demo: Here

34) Another In-Place Editor- 这个插件可以让你只需要一行代码就实现Ajax的内容实时编辑效果.

  • Live Demo: Here

35) jQuery Taconite

  • Live Demo: Here

jQuery Web应用程序

36) GenFavicon- 一个利用jQuery创建而成的在线favicons图标生成工具,可以实时浏览Favicons在浏览器工具栏中的效果.


37) WriteMaps- WriteMaps提供一个简单的界面让你可以创建,编辑和分享你的网站地图.


Transition Effects - 过渡特效

38) InnerFade - 可以让网页中的任何元素产生淡化效果

39) Easing Plugin-另外一个简单的过渡效果插件

40) Highlight Fade

41) jQuery Cycle Plugin- 拥有多种过渡效果的一个Gallery插件。


LightBox -灯箱效果

42) jQuery ThickBox - is a webpage user interface dialog widget written in JavaScript.

Demo :


43) SimpleModal Demos - its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.

Demo :


44) jQuery lightBox Plugin - simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery′s selector.

Demo :


45) JQuery iFrame Plugin


Tables Plugins -表格插件

46) Zebra Tables Demo -使用jQuery来创建出斑马线风格的数据表格,鼠标悬浮时能改变背景色。

Demo :


47) Table Sorter Plugin - 把一个标准的HTML表格分解成Thead和Tbody标签构成的分类表格,不需要刷新。它能够成功地解析和整理多种类型的数据,包括联系资料。


48) AutoScroll for jQuery -可以生成网页表格的热点自动滚动效果


49) Scrollable HTML table plugin- 用来转换表格为普通的滚动HTML。不需要额外的编码。

Demo :


Draggable Droppables And Selectables 拖拽

50) Sortables - 一个简单强大的拖拽插件。


51) Draggables and droppables- 这是一个很好的演示。用来实现拖拽树形菜单项目的操作



Style Switcher - 切换风络

52) Switch stylesheets with jQuery允许访客选择他们喜欢的网站样式,使用了Cookie记录,也就是同一个用户下次再访问时,除非他不切换,否则会保留他选择的样式。

Demo演示.


Rounded Corners 圆角效果

53) jQuery Corner Demo


54) JQuery Curvy Corners- 这个插件可以让你生成光滑、无锯齿的圆角效果。



Must See jQuery Examples 应该了解的一些jQuery应用实例

55) jQuery Air - 一个非常非常特别的客户管理界面应用插件,太特别了,太太太特别了。

Demo :


图象幻灯片展示和画廊插件

1) Galleria -这是一个用jQuery编写的javascript图像画廊插件。之前帕兰已经做过介绍。


2) jQuery Multimedia Portfolio -支持多种多媒体格式,包括:图片,视频 (flv), 音频 (mp3), 并且自动侦测每个文件的扩展名再分别调用合适的播放器。


3) wSlide -通过列表名单切换动画盒式的内容区域。


标签云

4) Hover Sub Tags- 使用jQuery来缩小标签云所占成的页面,比如你有一个”Ajax”的标签, 你可以在这个标签里面再放入二级标签 jquery, mootools, 等…当鼠标悬浮在一级标签上时,就出现一个动态提示效果的二级标签云。


分页系统

5) Pagination-创建一个分页导航,当你的网页内容比如多的时候,比较适合使用这种分页导航系统,同时也有利于SEO。这个利用jQuery编写的分页导航的特点是,你可以把它与搜索相结合,控制搜索结果的显示文章数。


导航系统

6) Accordion Menu -这是一个手风琴效果的演示, 标题使用 H3 标签, 子菜单使用UL标签来实现伸缩。


7) jQuery Treeview Plugin 


8 ) Coda-Slider- 一个强大的jQuery滑动门技术,效果平滑,很酷。支持上下页的控制。 


9) Simple Horizontal Accordion 


表格和网格

10) TableRowCheckboxToggle - 它笼统地加入了切换功能,以任何表行您所指定的基础上的CSS类的名字。它将默认切换任何复选框内的表行。


11) TableEditor - Tableeditor提供了灵活的实时编辑的HTML表格。 


12) Ingrid - Ingrid是一个个性的jquery插件,可以为你的图表添加很多网格数据行为,包括大小,分页,整理,排柱造型以及更多。 


表单

13) jQuery Nice Form -创建自定义风格的表单事件。


14) Easy Multi Select Transfer 选项菜单选中后到达另一个选项栏的效果。 


15) jQuery Form Plugin- 让你轻松自然地升级HTML表单使用Ajax表单和提交的方法,以方便从从表单元素中搜集资料,并决定如何管理提交进程,让你对数据如何提交能有充分的控制权。


滚动和滑动技术

16) jQuery.SerialScroll -此插件可以让你很容易实现任何动画的一系列要素依次滚动。你可以用它作为一节滑块,滚轮文本,幻灯片,新闻股票等。


17) liScroll - LiScroll是一个 jQuery 插件,可以让你转换任何无序列表为一个滚动内容展示。


18) Spinner -可以让你在一个固定区域里无限量的增加内容进行滚动样式的展示。 


表单事件

19) jWYSIWYG 一个可以内嵌网页的所见即所得的HTML文本编辑插件。


20) Simple chained combobox -很简单的一个jquery选项插件,通过JSON的加工和返回特点,提供连锁反应式的多重选择。 


21) jQuery checkbox 


22) jGrow 


Toggling

23) jTruncate in Action -jtruncate可以自定义截断你网页中的文本实体。


24) toggleElements - toggleElementS是一个展开/隐藏效果的jqurey插件。 


渐变和阴影

25) Drop Shadows -这个插件可以为你的文本生成一个非常有趣的阴影效果。


26) Gradient jQuery plugin - 实现渐变效果,你可以设定渐变的方向和透明度值。 


27) Gradient -让你拥有一个动态渐变效果的背景,不需要使用任何图片。 


Lightbox灯箱效果

28) Facebox 基于jQuery, Facebook风格的lightbox灯箱插件,可以显示图片、DIV层和文章页面等。


29) jQuery Lightbox Plugin- (balupton edition)


拾色器

30) jQueryColorPicker -一个简单的jquery拾色器插件,可以让用户选择色盘中的颜色来实现背景颜色的切换。


值得试用的一些jQuery插件

31) Animated InnerFade- 完全符合w3c标准的动画幻灯片插件。


32) Easy POP Show 1.0 Release -全屏幕显示的画廊插件。 


33) jqChart- Ajax的图表插件


34) UI Datepicker -一个简单的jQuery UI日期拾取器. 


35) JSmile -一个完全自定义的添加特定表情图标的插件。 


36) ImgAreaSelect - imgAreaSelect是一个 jQuery插件,可以让你在一张图片中选择一个矩形,并且可以列出坐标值。 


37) jPrintArea-jPrintArea是一个简单的,用来打印指定的文本内容。查看DEMO演示


38) jTabber- 一个Tab选项卡切换技术,不需要重新载入页面


39) jQuery Calculation Plug-in - 一个计算类插件。可以让你计算一些简单或是复杂的数学公式。 


40) jquery.biggerlink - 这个jQuery插件可以让你为指定的链接添加成在线代理后的链接地址。 


41) Humanized Messages- 在你的网页上显示一个半透明的内容信息,但是当用户有任何操作时,它就会慢慢消失。


42) Ajax Manager 帮助你管理AJAX请求和回应,(比如,放弃请求,锁定请求,排序请求等). 


43) Background-Position Animation 


44) Lazyload-Delays loading of images in (long) web pages. Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed.Check out their demo page


45) jQuery Tag Suggestion- The same tag suggesting as-you-type support that del.icio.us is uses.Check out their demo page

你可能感兴趣的:(脚本)