50+ jquery 插件框架应用实例
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
[p]jquery是近段时间里比较流行的一个javascript框架,不断有使用者开发出新的 jquery插件。下面收集了50多个开发者最喜欢使用的jquery插件。[/p]
[p][b]sliding panels -滑动门控制[/b][/p] 1) sliding panels for jquery -元素可以展开或关闭,创建出手风琴的滑动效果。 [p]>[url=http://andreacfm.com/examples/jqpanels/][img]http://bbon.cn/wp-content/uploads/2009/02/143052vd3.gif[/img][/url][/p] (2) jquery collapse -这个jquery插件同样点击后滑动展开或关闭div层。[br][b]menu - 菜单[/b] [p]3) >[url=http://gmarwaha.com/blog/?cat=8]lavalamp[/url][/p] [p][img]http://bbon.cn/wp-content/uploads/2009/02/143053kr0.gif[/img][/p] (4) a navigation menu- 锚链接的无序列表嵌套, 可以添加2级菜单 [p][img]http://bbon.cn/wp-content/uploads/2009/02/1430544pg.gif[/img][/p] [p](5) >[url=http://be.twixt.us/jquery/****erfish.php]****erfish style[/url][/p] [p][img]http://bbon.cn/wp-content/uploads/2009/02/143054moq.gif[/img][/p] [p][b]tabs – 选项卡[/b][/p] 6) jquery ui tabs / tabs 3 – 基于 jquery 的一个tab选项卡导航 [p]>[url=http://stilbuero.de/jquery/tabs_3/][img]http://bbon.cn/wp-content/uploads/2009/02/143056je8.gif[/img][/url][/p] (7) tabcontainer theme – 当用户在选项卡之间进行切换时,产生jquery风格的淡出动效果。 [p]>[url=http://stilbuero.de/jquery/tabs_3/][img]http://bbon.cn/wp-content/uploads/2009/02/143057f7u.gif[/img][/url][br][b]accordion- 手风琴效果[/b][/p] 8 ) jquery accordion [p]>[url=http://jquery.bassistance.de/accordion/?p=1.1.1][/url][/p] [p][url=http://jquery.bassistance.de/accordion/?p=1.1.1][img]http://bbon.cn/wp-content/uploads/2009/02/143058bh1.gif[/img][/url][/p] [p](9) >[url=http://i-marco.nl/weblog/jquery-accordion-menu/]simple jquery accordion menu[/url][/p] [p]>[url=http://i-marco.nl/weblog/jquery-accordion-menu/][img]http://bbon.cn/wp-content/uploads/2009/02/143059dow.gif[/img][/url][br][b]slideshows - 幻灯片[/b][/p] 10) jqzoom-让你在你的网页上很简单的实现图片的缩放功能。 [p][img]http://bbon.cn/wp-content/themes/wpink//images/grey.gif[/img][/p] [p]效果预览 下载[/p] [p](11) >[url=http://benjaminsterling.com/jquery-jqgalview-photo-gallery/]image/photo gallery viewer[/url]- 一个图像/相片的画廊展示插件。可以让你对图片进行分组、并产生像flash一样的多种浏览特效。[/p] [p][img]http://bbon.cn/wp-content/themes/wpink//images/grey.gif[/img][br][b]transition effects – 过渡特效[/b][/p] [p]12) >[url=http://medienfreunde.com/lab/innerfade/]innerfade [/url]- 可以让网页中的任何元素产生淡化效果[/p] [p]>[url=http://medienfreunde.com/lab/innerfade/][img]http://bbon.cn/wp-content/uploads/2009/02/143102sqm.gif[/img][/url][/p] [p](13) >[url=http://gsgd.co.uk/sandbox/jquery/easing/]easing plugin[/url]-另外一个简单的过渡效果插件[/p] [p](14) >[url=http://jquery.offput.ca/highlightfade/old.php]highlight fade[/url][/p] [p](15) >[url=http://malsup.com/jquery/cycle/int2.html]jquery cycle plugin[/url]- 拥有多种过渡效果的一个gallery插件。[/p] [p]>[url=http://malsup.com/jquery/cycle/int2.html][img]http://bbon.cn/wp-content/uploads/2009/02/143103ysu.gif[/img][/url][/p] [p][b]奇幻的jquery[/b][/p] [p]16) >[url=http://sorgalla.com/jcarousel/]riding carousels with jquery[/url] – 这个jquery插件可以生成一个水平或垂直的列表,并且允许你控制div层的滑动显示。[/p] [p]>[url=http://sorgalla.com/jcarousel/][/url][/p] [p][url=http://sorgalla.com/jcarousel/][img]http://bbon.cn/wp-content/uploads/2009/02/1431050jp.gif[/img][/url][br][b]color picker -拾色器[/b][/p] 17) farbtastic -这个 jquery 插件可以让你通过javascript添加一个或多个拾色器widgets到一个页面中。 [p]>[url=http://acko.net/dev/farbtastic][/url][/p] [p][url=http://acko.net/dev/farbtastic][img]http://bbon.cn/wp-content/uploads/2009/02/1431068e9.gif[/img][/url][/p] [p](18) >[url=http://intelliance.fr/jquery/color_picker/]jquery color picker[/url][br][b]lightbox -灯箱效果[/b][/p] [p]19) >[url=http://jquery.com/demo/thickbox/]jquery thickbox[/url] – is a webpage user interface dialog widget written in javascript.[/p] [p][img]http://bbon.cn/wp-content/uploads/2009/02/143107leu.gif[/img][/p] [p](20) >[url=http://ericmmartin.com/simplemodal/]simplemodal demos[/url] – its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to simplemodal.[/p] [p][img]http://bbon.cn/wp-content/uploads/2009/02/143108jvh.gif[/img][/p] [p](21) >[url=http://leandrovieira.com/projects/jquery/lightbox/]jquery lightbox plugin[/url] – 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.[/p] [p][img]http://bbon.cn/wp-content/uploads/2009/02/143109j0y.gif[/img][br][b]iframe[/b][/p] 22) jquery iframe plugin [p]>[url=http://33rockers.com/jquery/iframe-demo/][img]http://bbon.cn/wp-content/uploads/2009/02/143111jkx.gif[/img][/url][br][b]form validation -表单验证器[/b][/p] 23) validation – 有一套完整相当的形式验证规则。该插件还动态地创建id和联系信息。 [p][img]http://bbon.cn/wp-content/uploads/2009/02/143112up1.gif[/img][/p] [p](24) >[url=http://jqueryfordesigners.com/demo/ajax-validation.php]ajax form validation[/url] – 在客户端使用jquery验证的一种形式,它可以验证用户名是否有效等。[/p] [p][img]http://bbon.cn/wp-content/uploads/2009/02/143112xtr.gif[/img][/p] [p](25) >[url=http://itgroup.com.ph/alphanumeric/]jquery alphanumeric[/url] -欢迎对对表单域中的某些字符进行限制[/p] [p]>[url=http://itgroup.com.ph/alphanumeric/][img]http://bbon.cn/wp-content/uploads/2009/02/143113j98.gif[/img][/url][br][b]form elements - 表单事件[/b][/p] [p][img]http://bbon.cn/wp-content/uploads/2009/02/143114o27.gif[/img][/p] [p](26) >[url=http://jquery.sanchezsalvador.com/page/jquerycombobox.aspx]jquery.combobox[/url] – 从现在的选择元素中创建一个个性的html组合[/p] [p](27) >[url=http://kawika.org/jquery/checkbox/]jquery checkbox[/url] -样式化选择框,从而提高交互能力。[/p] [p](28) >[url=http://appelsiini.net/projects/filestyle]file style plugin for jquery[/url] -file style插件让你可以使用图像做为文件浏览按钮,你还可以样式化文件名称区域。[/p] [p][b]star rating - 星形评级系统[/b][/p] [p][img]http://bbon.cn/wp-content/uploads/2009/02/143115mmh.gif[/img][/p] [p](29) >[url=http://php.scripts.psu.edu/rja171/widgets/rating.php]simple star rating system[/url][/p] [p]30)>[url=http://learningjquery.com/2007/05/half-star-rating-plugin]half-star rating plugin[/url][br][b]tooltips -提示工具[/b][/p] [p]31) >[url=http://plugins.jquery.com/project/tooltip]tooltip plugin examples[/url] – 一个花俏的提示应用。 可以对提示信息进行自定义位置, 设置阴影效果和添加更多内容等.你可以点击>[url=http://jquery.bassistance.de/tooltip/]demo 演示.[/url][/p] [p](32) >[url=http://codylindley.com/blogstuff/js/jtip/]the jquery tooltip [/url][/p] [p]>[url=http://codylindley.com/blogstuff/js/jtip/][img]http://bbon.cn/wp-content/uploads/2009/02/143116j30.gif[/img][/url][br][b]tables plugins -表格插件[/b][/p] [p]33) >[url=http://15daysofjquery.com/examples/zebra/]zebra tables demo [/url]-使用jquery来创建出斑马线风格的数据表格,鼠标悬浮时能改变背景色。[/p] [p]>[url=http://15daysofjquery.com/examples/zebra/code/demofinal.php][img]http://bbon.cn/wp-content/uploads/2009/02/143117wpk.gif[/img][/url][/p] [p](34) >[url=http://tablesorter.com/docs/#demo]table sorter plugin [/url]- 把一个标准的html表格分解成thead和tbody标签构成的分类表格,不需要刷新。它能够成功地解析和整理多种类型的数据,包括联系资料。[/p] [p]>[url=http://tablesorter.com/docs/#demo][img]http://bbon.cn/wp-content/uploads/2009/02/143118e7g.gif[/img][/url][/p] [p](35) >[url=http://jdsharp.us/jquery/plugins/autoscroll/demo.php]autoscroll for jquery[/url] -可以生成网页表格的热点自动滚动效果[/p] [p]>[url=http://jdsharp.us/jquery/plugins/autoscroll/demo.php][img]http://bbon.cn/wp-content/themes/wpink//images/grey.gif[/img][/url][/p] (36) scrollable html table plugin- 用来转换表格为普通的滚动html。不需要额外的编码。 [p]>[url=http://webtoolkit.info/demo/jquery/scrollable/demo.html][img]http://bbon.cn/wp-content/themes/wpink//images/grey.gif[/img][/url][br][b]draggable droppables and selectables 拖拽[/b][/p] [p]37) >[url=http://interface.eyecon.ro/demos/sort.html]sortables [/url]- 一个简单强大的拖拽插件。[/p] [p]>[url=http://interface.eyecon.ro/demos/sort.html][img]http://bbon.cn/wp-content/uploads/2009/02/143121g9g.gif[/img][/url][/p] [p](38) >[url=http://interface.eyecon.ro/demos/drag_drop_tree.html]draggables and droppables[/url]- 这是一个很好的演示。用来实现拖拽树形菜单项目的操作[/p] [p]>[url=http://interface.eyecon.ro/demos/drag_drop_tree.html][img]http://bbon.cn/wp-content/uploads/2009/02/143122c3m.gif[/img][/url][br][b]style switcher - 切换风络[/b][/p] 39) switch stylesheets with jquery允许访客选择他们喜欢的网站样式,使用了cookie记录,也就是同一个用户下次再访问时,除非他不切换,否则会保留他选择的样式。[br][b]rounded corners 圆角效果[/b] 40) jquery corner demo [p]>[url=http://methvin.com/jquery/jq-corner-demo.html][img]http://bbon.cn/wp-content/uploads/2009/02/143123rt7.gif[/img][/url][/p] [p](41) >[url=http://blue-anvil.com/jquerycurvycorners/test.html]jquery curvy corners[/url]- 这个插件可以让你生成光滑、无锯齿的圆角效果。[/p] [p]>[url=http://blue-anvil.com/jquerycurvycorners/test.html][img]http://bbon.cn/wp-content/uploads/2009/02/143124igf.gif[/img][/url][br][b]must see jquery examples 应该了解的一些jquery应用实例[/b][/p] 42) jquery air – 一个非常非常特别的客户管理界面应用插件,太特别了,太太太特别了。 [p]>[url=http://digital-web.com/extras/jquery_crash_course/][img]http://bbon.cn/wp-content/uploads/2009/02/143125kes.gif[/img][/url][/p] (43) heatcolor [p]>[url=http://jnathanson.com/blog/client/jquery/heatcolor/index.cfm][img]http://bbon.cn/wp-content/uploads/2009/02/143126ji4.gif[/img][/url][/p] [p](44) >[url=http://markc.renta.net/jquery/]simple jquery examples[/url][/p] [p](45) >[url=http://kelvinluck.com/assets/jquery/datepicker/v2/demo/]date picker[/url] -一个灵活个性的jquery日历组件。[/p] [p]>[url=http://kelvinluck.com/assets/jquery/datepicker/v2/demo/][img]http://bbon.cn/wp-content/uploads/2009/02/143127lxh.gif[/img][/url][/p] [p](46) >[url=http://freewebs.com/flesler/jquery.scrollto/]scrollto[/url] -这个jquery插件可以让你实现当点击链接时中滚动到页面中的某一对象[/p] [p](47) >[url=http://methvin.com/jquery/splitter/3csplitter.html]3-column splitter layout[/url] 一个3栏布局分配插件。[/p] [p]>[url=http://methvin.com/jquery/splitter/3csplitter.html][img]http://bbon.cn/wp-content/uploads/2009/02/143128z35.gif[/img][/url][/p] [p](48) >[url=http://rikrikrik.com/jquery/pager/]pager jquery[/url] -一个小巧的 jquery插件,用来增加分页的页码效果[/p] [p]>[url=http://rikrikrik.com/jquery/pager/][img]http://bbon.cn/wp-content/uploads/2009/02/143129eek.gif[/img][/url][/p] [p](49) >[url=http://texotela.co.uk/code/jquery/select/]select box manipulation[/url][/p] [p](50) >[url=http://stilbuero.de/2006/09/17/%20-plugin-for-jquery/]cookie plugin for jquery[/url][/p] [p]51) >[url=http://malsup.com/jquery/block/]jquery blockui plugin[/url][/p] [p][url=http://malsup.com/jquery/block/][img]http://bbon.cn/wp-content/uploads/2009/02/143130zk8.gif[/img][/url][/p] [p]原文出处和链接:[br][url=http://parandroid.com/more-than-50-powerful-plug-in-application-examples-jquery/]http://parandroid.com/more-than-50-powerful-plug-in-application-examples-jquery/[/url][/p] [p][url=http://bbon.cn/2009/02/50-jquery-%e6%8f%92%e4%bb%b6%e6%a1%86%e6%9e%b6%e5%ba%94%e7%94%a8%e5%ae%9e%e4%be%8b.html]http://bbon.cn/2009/02/50-jquery-%e6%8f%92%e4%bb%b6%e6%a1%86%e6%9e%b6%e5%ba%94%e7%94%a8%e5%ae%9e%e4%be%8b.html[/url][/p] 该文章在 2010/4/27 2:37:53 编辑过 |
关键字查询
相关文章
正在查询... |