40个实用的jquery用户界面ui设计技巧及教程.doc

jQuery确实是一项伟大的技术，通过jQuery的插件，我们可以方便的创建具有更好用户界面的网站。在本文中，将和大家分享40个对你创建更好用户界面的jQuery技术和教程。1. Custom Animation Banner with jQuery在该教程中你将学会如何使用jQuery的Easing插件及2D Transform插件创建自定义的动画横幅。教程的想法是将不同的元素以自定义动画的形式融入到横幅中去。查看实例2. Moving Boxes Carousel with jQuery你将学会如何创建一个拥有改变面板及缩放面板的按钮的滑块。查看实例3. Quick Feedback Form jQuery & PHP通过jQuery和PHP实现的快速填写反馈表单的实例。查看实例4. Wijmo jQuery UI WidgetsWijmo是一个拥有超过30个jQuery UI Widgets的库。 查看实例5. One Page Navigation jQuery Plugin这是一个在同一个页面中如何平滑的导航的实例。查看实例6. RSS Reader With jQuery Mobile7. Easy Accordion jQuery Plugin The Easy Accordion plugin by Andrea Cima Serniotti will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. 8. Lettering jQuery Typography PluginIn this article you will learn how to create, for example typographical CSS3 posters, or for really custom type headings, while keeping the text selectable. 9. Annotation Overlay Effect with jQueryCreate a simple overlay effect to display annotations.10. Snippet jQuery Syntax HighlighterSnippet is a cool jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet jQuery plugin provides a quick and easy way of highlighting source code passages in HTML documents.11. Google Powered Site Search With jQueryIn this logical tutorial you will learn how to create a branded custom search engine simply by using Googles AJAX Search API, with which you can search for images and video and news items on your site and you can also get general web results. 12. Build a Better Tooltip with jQuery AwesomenessIn this tutorial ,It shows how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.13. Simple Tooltip jQuery & CSSIn this tutorial by Soh Tanaka you will learn how to create simple tooltip with jQuery and an incredibly simple styling with CSS. 14. Coda Popup BubblesjQuery tutorial shows you how to create slick popup bubbles that appear when hovering over the target object.查看实例15. Exposure jQuery PluginExposure is an image viewing plugin for the jQuery JavaScript library. Its designed for creating rich, fully customizable viewing experiences, and can handle very large amounts of images without pushing your bandwidth through the roof.查看实例16. Giveaway Randomizer App jQueryIn this tutorial you will learn how to create a dedicated randomizer jQuery application.查看实例17. jQuery Smooth Tabs PluginjQuery Smooth Tabs is easy to use plugin, which allows you to display your content with some effects, for better user experience. All you need is a single container for your desired tabs and content, some nice CSS and images.查看实例18. TN34 Timetabs jQuery PluginThis jQuery plugin by Mario Alves creates tab container that switches automatically every cycle to next tab. It is compatible with most modern browsers.查看实例19. Full Page Image Gallery with jQueryIn this tutorial you are going to create a stunning full-page gallery with scrollable thumbnails and a scrollable full screen preview.查看实例20. bgStretcher jQuery PluginbgStretcher (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).查看实例21. SlideNote jQuery Plugin For Sliding NotificationsSlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application.查看实例22. Easy List Splitter jQuery PluginEasy List Splitter keeps the HTML to the minimum. No unnecessary elements or inline styles are added to the code. Youll get a clean plain HTML with some classes that you can use as hooks to easily style your lists. Choose whether to order your list items vertically or horizontally. You can then decide whether to modify the default CSS or apply a new one.查看实例23. Create a Slide Tabbed Box using jQueryShow you how to create a set a module tab interface that slides content left and right as you click on the tabs.查看实例24. Create a Tabbed Interface Using jQueryThis very detailed step-by-step tutorial will show you how to create a tabbed interface using jQuery.查看实例25. jQuery Tabbed InterfaceTabbed Interface or Tabbed Structure Menu show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect.查看实例26. Create Sliding Image Caption with jQueryThis image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it.查看实例27. Image Cross Fade TransitionThis tutorial will show you how to fade another image in, superimposing onto the current image when the user hovers it. It can be a great way to display more information about a particular image.查看实例28. Image Reveal using jQueryThis quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events .29. Slider Gallery在这篇教程中，你将学会如何创建基于jQuery UI的sliding gallery。查看实例30. Simple jQuery Image Slide Show with Semi-Transparent CaptionIt shows how to create a simple image slide show with a semi-transparent caption with jQuery. It is suitable to display news headlines, or an image slide show in your website front page.查看实例31. Create an Amazon Books Widget with jQuery and XMLCreate how to leverage jQuery and the Amazon API to display products inside a content area thats horizontally-scrollable in this highly involved step-by-step tutorial.查看实例32. Building a jQuery-Powered Tag-CloudA tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud.33. Simple jQuery Spy EffectIn this tutorial, youll discover an innovative technique for mimicking Diggs now defunct Digg Spy application.查看实例34. Creating a Floating HTML Menu Using jQuery and CSSThis jQuery-based navigation menu tutorial will show you how to create a menu that follows you up and down the page as you scroll.查看实例35. Horizontal Slide Nav Using jQuery & CSSLearn to create a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item.查看实例36. Creating A Slick Ajaxed Add-To-Basket With jQuery And PHPThis is a detailed tutorial which shows creating an unobtrusive Ajaxed shopping cart using jQuery & PHP and can guide you to Ajaxify any e-commerce software you may already be using or coding.The main functions of the cart will be adding/removing items to the basket without the need of refreshing the page & displaying the actions with effects.查看实例37. Create a Digg-style post sharing tool with jQueryCreate a social bookmarkin