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

jQuery确实是一项伟大的技术，通过jQuery的插件，我们可以方便的创建具有更好用户界面的网站。在本文中，将和大家分享40个对你创建更好用户界面的jQuery技术和教程。 1.CustomAnimationBannerwithjQuery 在该教程中你将学会如何使用jQuery的Easing插件及2DTransform插件创建自定义的动画横幅。教程的想法是将不同的元素以自定义动画的形式融入到横幅中去。  查看实例 2.MovingBoxesCarouselwithjQuery 你将学会如何创建一个拥有改变面板及缩放面板的按钮的滑块。 查看实例  3.QuickFeedbackForm–jQuery&PHP 通过jQuery和PHP实现的快速填写反馈表单的实例。 查看实例 4.Wijmo–jQueryUIWidgetsWijmo是一个拥有超过30个jQueryUIWidgets的库。   查看实例5.OnePageNavigation–jQueryPlugin 这是一个在同一个页面中如何平滑的导航的实例。 查看实例 6.RSSReaderWithjQueryMobile  7.EasyAccordion–jQueryPlugin TheEasyAccordionpluginbyAndreaCimaSerniottiwillgetyourdefinitionlists(DTs)andgenerateaniceandsmoothhorizontalaccordion.  8.Lettering–jQueryTypographyPlugin Inthisarticleyouwilllearnhowtocreate,forexampletypographicalCSS3posters,orforreallycustomtypeheadings,whilekeepingthetextselectable.   9.AnnotationOverlayEffectwithjQuery Createasimpleoverlayeffecttodisplayannotations. 10.Snippet–jQuerySyntaxHighlighter SnippetisacooljQuerysyntaxhighlightingpluginbuiltontopoftheSHJSscriptfoundonSourceForge.SnippetjQuerypluginprovidesaquickandeasywayofhighlightingsourcecodepassagesinHTMLdocuments.   11.GooglePoweredSiteSearchWithjQuery InthislogicaltutorialyouwilllearnhowtocreateabrandedcustomsearchenginesimplybyusingGoogle’sAJAXSearchAPI,withwhichyoucansearchforimagesandvideoandnewsitemsonyoursite–andyoucanalsogetgeneralwebresults.    12.BuildaBetterTooltipwithjQueryAwesomeness Inthistutorial,It showshowtoquicklywriteajQuerypluginthatwillreplacethetypicalbrowsertooltipwithsomethingalittleflashier. 13.SimpleTooltip–jQuery&CSS InthistutorialbySohTanakayouwilllearnhowtocreatesimpletooltipwithjQueryandanincrediblysimplestylingwithCSS.   14.CodaPopupBubblesjQuerytutorialshowsyouhowtocreateslickpopupbubblesthatappearwhenhoveringoverthetargetobject.查看实例15.ExposurejQueryPluginExposureisanimageviewingpluginforthejQueryJavaScriptlibrary.It’sdesignedforcreatingrich,fullycustomizableviewingexperiences,andcanhandleverylargeamountsofimageswithoutpushingyourbandwidththroughtheroof.查看实例16.GiveawayRandomizerApp–jQueryInthistutorialyouwilllearnhowtocreateadedicatedrandomizerjQueryapplication.查看实例17.jQuerySmoothTabsPluginjQuerySmoothTabsiseasytouseplugin,whichallowsyoutodisplayyourcontentwithsomeeffects,forbetteruserexperience.Allyouneedisasinglecontainerforyourdesiredtabsandcontent,someniceCSSandimages.查看实例18.TN34Timetabs–jQueryPluginThisjQuerypluginbyMarioAlvescreatestabcontainerthatswitchesautomaticallyeverycycletonexttab.Itiscompatiblewithmostmodernbrowsers.查看实例19.FullPageImageGallerywithjQueryInthistutorialyouaregoingtocreateastunningfull-pagegallerywithscrollablethumbnailsandascrollablefullscreenpreview.查看实例20.bgStretcher–jQueryPluginbgStretcher(BackgroundStretcher)isajQueryplug-inwhichallowsyoutoaddalargeimage(orasetofimages)tothebackgroundofyourwebpageandwillproportionallyresizetheimage(s)tofilltheentirewindowarea.Theplug-inwillworkasaslideshowifmultipleimagesmodeisused(thespeedanddurationfortheslideshowisconfigurable).查看实例21.SlideNote–jQueryPluginForSlidingNotificationsSlideNoteisacustomizable,flexiblejQuerypluginthatmakesiteasytodisplayslidingnotificationsonyourwebsiteorinyourwebapplication.查看实例22.EasyListSplitter–jQueryPluginEasyListSplitterkeepstheHTMLtotheminimum.Nounnecessaryelementsorinlinestylesareaddedtothecode.You’llgetacleanplainHTMLwithsomeclassesthatyoucanuseashookstoeasilystyleyourlists.Choosewhethertoorderyourlistitemsverticallyorhorizontally.YoucanthendecidewhethertomodifythedefaultCSSorapplyanewone.查看实例23.CreateaSlideTabbedBoxusingjQueryShowyouhowtocreateasetamoduletabinterfacethatslidescontentleftandrightasyouclickonthetabs.查看实例24.CreateaTabbedInterfaceUsingjQueryThisverydetailedstep-by-steptutorialwillshowyouhowtocreateatabbedinterfaceusingjQuery.查看实例25.jQueryTabbedInterfaceTabbedInterfaceorTabbedStructureMenushowyouhowtobuildyourowntabbedInterfaceusingjQuerywithslideDown/slideUpeffect.查看实例26.CreateSlidingImageCaptionwithjQueryThisimagegallerytutorialshowsyouaninterestinginteractiontechniqueforhavingcaptionsthatslideuptorevealmoreinformationaboutaparticularimagewhentheuserhoversoverit.查看实例27.ImageCrossFadeTransitionThistutorialwillshowyouhowtofadeanotherimagein,superimposingontothecurrentimagewhentheuserhoversit.Itcanbeagreatwaytodisplaymoreinformationaboutaparticularimage.查看实例28.ImageRevealusingjQueryHYPERLINK"http://justinfarmer.com/?p=31"Thisquickandeasytutorialshowsyoutheconceptofhidingandshowingelementsbywatchingoutforwindowevents.29.SliderGallery在这篇教程中，你将学会如何创建基于jQueryUI的slidinggallery。查看实例30.SimplejQueryImageSlideShowwithSemi-TransparentCaptionItshowshowtocreateasimpleimageslideshowwithasemi-transparentcaptionwithjQuery.Itissuitabletodisplaynewsheadlines,oranimageslideshowinyourwebsitefrontpage.查看实例31.CreateanAmazonBooksWidgetwithjQueryandXMLCreatehowtoleveragejQueryandtheAmazonAPItodisplayproductsinsideacontentareathat’shorizontally-scrollableinthishighlyinvolvedstep-by-steptutorial.查看实例32.BuildingajQuery-PoweredTag-CloudAtag-cloudisagreatwayofshowingvisitorstoyourblogthemaintopicsofinterestthatareavailable.Thereisalsoadditionalinformationcontainedinatag-cloud.33.SimplejQuerySpyEffectInthistutorial,you’lldiscoveraninnovativetechniqueformimickingDigg’snowdefunctDiggSpyapplication.查看实例34.CreatingaFloatingHTMLMenuUsingjQueryandCSSThisjQuery-basednavigationmenututorialwillshowyouhowtocreateamenuthatfollowsyouupanddownthepageasyouscroll.查看实例35.HorizontalSlideNavUsingjQuery&CSSLearntocreateaspectacularslidingnavigationwhoseanimationistriggeredwhentheuserhoversoveranavigationitem.查看实例36.CreatingASlickAjaxedAdd-To-BasketWithjQueryAndPHPThisisadetailedtutorialwhichshowscreatinganunobtrusiveAjaxedshoppingcartusingjQuery&PHPandcanguideyoutoAjaxifyanye-commercesoftwareyoumayalreadybeusingorcoding.Themainfunctionsofthecartwillbeadding/removingitemstothebasketwithouttheneedofrefreshingthepage&displayingtheactionswitheffects.查看实例37.CreateaDigg-stylepostsharingtoolwithjQueryCreateasocialbookmarkingtoolthatlooksimilartoDigg’s.Itlookscool,practicalanduseful!Ialsoincludethekomodomedia’ssocialbookmarkingiconsandalonglistofsubmissionURLforoneclickbookmark.查看实例38.Createanamazingmusicplayerusingmousegestures&hotkeysinjQuery我们将使用鼠标手势和快捷键结合XHTML、jQuery技术创建音乐播放器。你可以使用鼠标点击、拖拽操作音乐播放器。查看实例39.CreatingaVirtualjQueryKeyboard这个教程会解释我们怎么实现一个简单的虚拟键盘。查看实例40.QuickTip:ResizingImagesBasedOnBrowserWindowSizeInfluidlayoutsitiseasytoformatthetexttoadjustnicelywhenthewindowisresized,buttheimagesarenotasfluid-friendly.ThisQuickTipshowsyouhowtoswapbetweentwoimagesizesbasedonthecurrentsizeofthebrowser,div,orwhateveryoudecidetomakethedecidingfactor.第1页共28页