50+ jquery 插件框架應用實例
當前位置:點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
[p]jquery是近段時間里比較流行的一個javascript框架,不斷有使用者開發(fā)出新的 jquery插件。下面收集了50多個開發(fā)者最喜歡使用的jquery插件。[/p]
[p][b]sliding panels -滑動門控制[/b][/p] 1) sliding panels for jquery -元素可以展開或關(guān)閉,創(chuàng)建出手風琴的滑動效果。 [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插件同樣點擊后滑動展開或關(guān)閉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 – 當用戶在選項卡之間進行切換時,產(chǎn)生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-讓你在你的網(wǎng)頁上很簡單的實現(xiàn)圖片的縮放功能。 [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]- 一個圖像/相片的畫廊展示插件。可以讓你對圖片進行分組、并產(chǎn)生像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]- 可以讓網(wǎng)頁中的任何元素產(chǎn)生淡化效果[/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 – 有一套完整相當?shù)男问津炞C規(guī)則。該插件還動態(tài)地創(chuàng)建id和聯(lián)系信息。 [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] – 從現(xiàn)在的選擇元素中創(chuàng)建一個個性的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插件讓你可以使用圖像做為文件瀏覽按鈕,你還可以樣式化文件名稱區(qū)域。[/p] [p][b]star rating - 星形評級系統(tǒng)[/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] – 一個花俏的提示應用。 可以對提示信息進行自定義位置, 設置陰影效果和添加更多內(nèi)容等.你可以點擊>[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來創(chuàng)建出斑馬線風格的數(shù)據(jù)表格,鼠標懸浮時能改變背景色。[/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標簽構(gòu)成的分類表格,不需要刷新。它能夠成功地解析和整理多種類型的數(shù)據(jù),包括聯(lián)系資料。[/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] -可以生成網(wǎng)頁表格的熱點自動滾動效果[/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- 用來轉(zhuǎn)換表格為普通的滾動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]- 這是一個很好的演示。用來實現(xiàn)拖拽樹形菜單項目的操作[/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允許訪客選擇他們喜歡的網(wǎng)站樣式,使用了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插件可以讓你實現(xiàn)當點擊鏈接時中滾動到頁面中的某一對象[/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 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |