{"id":237,"date":"2009-12-14T13:13:06","date_gmt":"2009-12-14T05:13:06","guid":{"rendered":"http:\/\/www.genepeng.com\/index.php\/237"},"modified":"2011-10-14T23:35:08","modified_gmt":"2011-10-14T15:35:08","slug":"2009%e6%9c%80%e5%a5%bd%e7%9a%84jquery-plugins%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/www.genepeng.com\/index.php\/237","title":{"rendered":"2009\u6700\u597d\u7684jQuery Plugins[\u63d2\u4ef6]"},"content":{"rendered":"<p>During the past few weeks we\u2019ve been publishing our \u201cBest of 2009\u2033 series in which we\u2019ve shown you the best <a href=\"http:\/\/webdesignledger.com\/freebies\/the-best-free-wordpress-themes-of-2009\">WordPress themes<\/a>, <a href=\"http:\/\/webdesignledger.com\/freebies\/the-best-free-fonts-of-2009\">fonts<\/a>, <a href=\"http:\/\/webdesignledger.com\/freebies\/the-best-free-icon-sets-of-2009\">icons<\/a>, and<a href=\"http:\/\/webdesignledger.com\/tutorials\/the-best-photoshop-tutorials-of-2009\">Photoshop Tutorials<\/a>. In this article, our focus is on jQuery. Over the past couple of years jQuery has been growing in popularity, which means more and more plugins are being created to make web designers\u2019 lives easier. Here are our favorites from 2009.<\/p>\n<p>&nbsp;<\/p>\n<p><!--more--><\/p>\n<h4>Content Sliders<\/h4>\n<p>This year we saw a growing popularity in using content sliders as a way to display several pieces of content within a limited area or to engage the user with the sliding animation. Normally this is done in a featured banner area near the top of the page. There were several jQuery plugins written in \u201809 to accomplish this type of effect, but here are our favorites.<\/p>\n<h5><a href=\"http:\/\/css-tricks.com\/anythingslider-jquery-plugin\/\">AnythingSlider<\/a><\/h5>\n<p><a href=\"http:\/\/css-tricks.com\/anythingslider-jquery-plugin\/\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_1.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>AnythingSlider is created by Chris Coyier of CSS-Tricks and is a fully featured slider that is widely useful.<\/p>\n<h5><a href=\"http:\/\/cssglobe.com\/post\/5780\/easy-slider-17-numeric-navigation-jquery-slider\">Easy Slider<\/a><\/h5>\n<p><a href=\"http:\/\/cssglobe.com\/post\/5780\/easy-slider-17-numeric-navigation-jquery-slider\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_3.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>Easy Slider is a content slider that gives you the the option to choose between classic previous\/next navigation or to use a numeric \u201cpagination\u201d style navigation.<\/p>\n<h5><a href=\"http:\/\/www.ndoherty.biz\/tag\/coda-slider\/\">Coda-Slider 2.0<\/a><\/h5>\n<p><a href=\"http:\/\/www.ndoherty.biz\/tag\/coda-slider\/\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_7.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>Coda-Slider 2.0 is aimed to mimic the slider effect on the promo page for Panic\u2019s Coda software. The original version was hacked together in 2007, but this 2.0 version is built from the ground up.<\/p>\n<h4>Image Galleries<\/h4>\n<p>The days of having to use Flash to create image galleries with cross fading or sliding transitions are long gone. Thanks to jQuery these types of effects can be easily achieved with javascript. Here are our favorite image gallery plugins from this year.<\/p>\n<h5><a href=\"http:\/\/devkick.com\/lab\/galleria\/\">Galleria<\/a><\/h5>\n<p><a href=\"http:\/\/devkick.com\/lab\/galleria\/\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_4.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.<\/p>\n<h5><a href=\"http:\/\/www.catchmyfame.com\/2009\/08\/13\/jquery-panel-gallery-1-1-plugin-released\/\">jQuery Panel Gallery<\/a><\/h5>\n<p><a href=\"http:\/\/www.catchmyfame.com\/2009\/08\/13\/jquery-panel-gallery-1-1-plugin-released\/\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_5.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>jQuery Panel Gallery is a compact image gallery that can easily be configured. Not one image needs to be sliced or edited to work with this plugin. The plugin handles everything itself. You can even configure fading transitions per image.<\/p>\n<h5><a href=\"http:\/\/www.gcmingati.net\/wordpress\/wp-content\/lab\/jquery\/imagestrip\/imageslide-plugin.html\">slideViewer<\/a><\/h5>\n<p><a href=\"http:\/\/www.gcmingati.net\/wordpress\/wp-content\/lab\/jquery\/imagestrip\/imageslide-plugin.html\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_10.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>slideViewer checks for the number of images within your list, and dynamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture.<\/p>\n<h5><a href=\"http:\/\/www.buildinternet.com\/project\/supersized\/\">Supersized<\/a><\/h5>\n<p><a href=\"http:\/\/www.buildinternet.com\/project\/supersized\/\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_6.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>Supersized cycles images with transitions and preloading. It automatically resizes images to fill browser while maintaining image dimension ratio.<\/p>\n<h4>Navigation<\/h4>\n<p>I believe navigation is an aspect of a web site that should kept simple and easy to use. However, if there is a need to create a more engaging nav, jQuery is your best bet. Here are a few of the best from \u201809.<\/p>\n<h5><a href=\"http:\/\/pupunzi.open-lab.com\/mb-jquery-components\/mb-_menu\/\">jquery mb.menu<\/a><\/h5>\n<p><a href=\"http:\/\/pupunzi.open-lab.com\/mb-jquery-components\/mb-_menu\/\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_8.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<h5><a href=\"http:\/\/www.queness.com\/post\/256\/horizontal-scroll-menu-with-jquery-tutorial\">Horizontal Scroll Menu with jQuery<\/a><\/h5>\n<p><a href=\"http:\/\/www.queness.com\/post\/256\/horizontal-scroll-menu-with-jquery-tutorial\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_16.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>This isn\u2019t a plugin, but I had to include it since it is such a cool effect. It\u2019s a horizontal scroll menu that scrolls automatically according to your mouse axis-Y movement.<\/p>\n<h5><a href=\"http:\/\/www.newmediacampaigns.com\/page\/autosprites-jquery-menu-plugin\">AutoSprites<\/a><\/h5>\n<p><a href=\"http:\/\/www.newmediacampaigns.com\/page\/autosprites-jquery-menu-plugin\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_9.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<h4>Forms and Tables<\/h4>\n<p>Working with forms and tables is probably not the most glamorous part of web design and development, but it has to be done. There were several plugins released this year to help you spice things up a bit. Here are our favorites.<\/p>\n<h5><a href=\"http:\/\/www.unwrongest.com\/projects\/password-strength\/\">Password Strength<\/a><\/h5>\n<p><a href=\"http:\/\/www.unwrongest.com\/projects\/password-strength\/\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_12.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>Password Strength tries to calculate how many possibilities the hacker needs to try to guess your password.<\/p>\n<h5><a href=\"http:\/\/www.webdesignbeach.com\/beachbar\/ajax-fancy-captcha-jquery-plugin\">Ajax Fancy Capcha<\/a><\/h5>\n<p><a href=\"http:\/\/www.webdesignbeach.com\/beachbar\/ajax-fancy-captcha-jquery-plugin\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_13.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. It introduces a new, intuitive way of completing \u201cverify humanity\u201d tasks.<\/p>\n<h5><a href=\"http:\/\/www.chromaloop.com\/posts\/chromatable-jquery-plugin\">Chromatable<\/a><\/h5>\n<p><a href=\"http:\/\/www.chromaloop.com\/posts\/chromatable-jquery-plugin\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/11\/jquery_tables_10.jpg\" alt=\"jquery tables\" \/><\/a><\/p>\n<p>Chromatable allows you to easily create scrolling tables with fixed headers.<\/p>\n<h5><a href=\"http:\/\/www.dfc-e.com\/metiers\/multimedia\/opensource\/jqtransform\/\">jqTransform<\/a><\/h5>\n<p><a href=\"http:\/\/www.dfc-e.com\/metiers\/multimedia\/opensource\/jqtransform\/\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_14.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>jqTransform is a styling plugin which allows you to skin form elements.<\/p>\n<h5><a href=\"http:\/\/www.uploadify.com\/\">Uploadify<\/a><\/h5>\n<p><a href=\"http:\/\/www.uploadify.com\/\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/jquery_2009_15.jpg\" alt=\"jquery plugins\" \/><\/a><\/p>\n<p>Uploadify allows the easy integration of a multiple (or single) file uploads on your website.<\/p>\n<h5><a href=\"http:\/\/www.jankoatwarpspeed.com\/post\/2009\/07\/20\/Expand-table-rows-with-jQuery-jExpand-plugin.aspx\">jExpand<\/a><\/h5>\n<p><a href=\"http:\/\/www.jankoatwarpspeed.com\/post\/2009\/07\/20\/Expand-table-rows-with-jQuery-jExpand-plugin.aspx\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/11\/jquery_tables_1.jpg\" alt=\"jquery tables\" \/><\/a><\/p>\n<p>jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.<\/p>\n<h4>Related Posts<\/h4>\n<p>Here&#8217;s some other articles that you will definitely find useful.<\/p>\n<h5><a href=\"http:\/\/webdesignledger.com\/tutorials\/the-best-vector-tutorials-of-2009\">The Best Vector Tutorials of 2009<\/a><\/h5>\n<p><a href=\"http:\/\/webdesignledger.com\/tutorials\/the-best-vector-tutorials-of-2009\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/12\/illustrator_2009.jpg\" alt=\"\" \/><\/a><\/p>\n<h5><a href=\"http:\/\/webdesignledger.com\/freebies\/the-best-free-wordpress-themes-of-2009\">The Best Free WordPress Themes of 2009<\/a><\/h5>\n<p><a href=\"http:\/\/webdesignledger.com\/freebies\/the-best-free-wordpress-themes-of-2009\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/11\/themes_2009.jpg\" alt=\"\" \/><\/a><\/p>\n<h5><a href=\"http:\/\/webdesignledger.com\/tutorials\/the-best-photoshop-tutorials-of-2009\">The Best Photoshop Tutorials of 2009<\/a><\/h5>\n<p><a href=\"http:\/\/webdesignledger.com\/tutorials\/the-best-photoshop-tutorials-of-2009\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/11\/photoshop_tuts_2009.jpg\" alt=\"\" \/><\/a><\/p>\n<h5><a href=\"http:\/\/webdesignledger.com\/freebies\/the-best-free-icon-sets-of-2009\">The Best Free Icon Sets of 2009<\/a><\/h5>\n<p><a href=\"http:\/\/webdesignledger.com\/freebies\/the-best-free-icon-sets-of-2009\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/11\/icons_09.jpg\" alt=\"\" \/><\/a><\/p>\n<h5><a href=\"http:\/\/webdesignledger.com\/freebies\/the-best-free-fonts-of-2009\">The Best Free Fonts of 2009<\/a><\/h5>\n<p><a href=\"http:\/\/webdesignledger.com\/freebies\/the-best-free-fonts-of-2009\"><img decoding=\"async\" src=\"http:\/\/webdesignledger.com\/wp-content\/uploads\/2009\/11\/fonts_2009.jpg\" alt=\"\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>During the past few weeks we\u2019ve been publishing our \u201cBest of 2009\u2033 series in which we\u2019ve shown you the best WordPress themes, fonts, icons, andPhotoshop Tutorials. In this article, our focus is on jQuery. Over the past couple of years jQuery has been growing in popularity, which means more and more plugins are being created &#8230; <a title=\"2009\u6700\u597d\u7684jQuery Plugins[\u63d2\u4ef6]\" class=\"read-more\" href=\"https:\/\/www.genepeng.com\/index.php\/237\" aria-label=\"More on 2009\u6700\u597d\u7684jQuery Plugins[\u63d2\u4ef6]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27],"tags":[],"_links":{"self":[{"href":"https:\/\/www.genepeng.com\/index.php\/wp-json\/wp\/v2\/posts\/237"}],"collection":[{"href":"https:\/\/www.genepeng.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.genepeng.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.genepeng.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.genepeng.com\/index.php\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":6,"href":"https:\/\/www.genepeng.com\/index.php\/wp-json\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":287,"href":"https:\/\/www.genepeng.com\/index.php\/wp-json\/wp\/v2\/posts\/237\/revisions\/287"}],"wp:attachment":[{"href":"https:\/\/www.genepeng.com\/index.php\/wp-json\/wp\/v2\/media?parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.genepeng.com\/index.php\/wp-json\/wp\/v2\/categories?post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.genepeng.com\/index.php\/wp-json\/wp\/v2\/tags?post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}