下载
加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 YUI.3.Cookbook

YUI.3.Cookbook.pdf

YUI.3.Cookbook

x5641217
2013-04-22 0人阅读 举报 0 0 0 暂无简介

简介:本文档为《YUI.3.Cookbookpdf》,可适用于IT/计算机领域

YUICookbookEvanGoerBeijing•Cambridge•Farnham•Köln•Sebastopol•TokyoYUICookbookbyEvanGoerCopyright©Yahoo!IncAllrightsreservedPrintedintheUnitedStatesofAmericaPublishedbyO’ReillyMedia,Inc,GravensteinHighwayNorth,Sebastopol,CAO’Reillybooksmaybepurchasedforeducational,business,orsalespromotionaluseOnlineeditionsarealsoavailableformosttitles(http:mysafaribooksonlinecom)Formoreinformation,contactourcorporateinstitutionalsalesdepartment:orcorporateoreillycomEditor:MaryTreselerProductionEditor:KristenBorgCopyeditor:RachelMonaghanProofreader:KielVanHornIndexer:BIMIndexingCoverDesigner:KarenMontgomeryInteriorDesigner:DavidFutatoIllustrator:RobertRomanoJune:FirstEditionRevisionHistoryfortheFirstEdition:FirstreleaseSeehttp:oreillycomcatalogerratacspisbn=forreleasedetailsNutshellHandbook,theNutshellHandbooklogo,andtheO’ReillylogoareregisteredtrademarksofO’ReillyMedia,IncYUICookbook,theimageofaspottedcuscus,andrelatedtradedressaretrademarksofO’ReillyMedia,IncManyofthedesignationsusedbymanufacturersandsellerstodistinguishtheirproductsareclaimedastrademarksWherethosedesignationsappearinthisbook,andO’ReillyMedia,Inc,wasawareofatrademarkclaim,thedesignationshavebeenprintedincapsorinitialcapsWhileeveryprecautionhasbeentakeninthepreparationofthisbook,thepublisherandauthorassumenoresponsibilityforerrorsoromissions,orfordamagesresultingfromtheuseoftheinformationcontainedhereinISBN:LSITableofContentsPrefaceixLoadingModulesLoadingRollupsandModulesLoadingSimpleYUIIdentifyingandLoadingIndividualModulesLoadingaDifferentDefaultSkinLoadingGalleryModulesLoadingaYUIWidgetLoadingLocallyHostedBuildsCreatingYourOwnModulesCreatingaModulewithDependenciesCreatingTrulyReusableModulesDefiningGroupsofCustomModulesReusingaYUIConfigurationDefiningYourOwnRollupsLoadingjQueryasaYUIModuleLoadingModulesBasedonBrowserCapabilitiesMonkeypatchingYUILoadingModulesonDemandEnablingPredictiveModuleLoadingonUserInteractionBindingaYUIInstancetoaniframeImplementingStaticLoadingDOMManipulationGettingElementReferencesManipulatingCSSClassesGettingandSettingDOMPropertiesChanginganElement’sInnerContentWorkingwithElementCollectionsCreatingNewElementsiiiAddingCustomMethodstoNodesAddingCustomPropertiestoNodesUIEffectsandInteractionsHidinganElementFadinganElementMovinganElementCreatingaSeriesofTransitionsDefiningYourOwnCannedTransitionsCreatinganInfiniteScrollEffectDragginganElementCreatingaResizableNodeImplementingaReorderableDragandDropTableEventsRespondingtoMouseovers,Clicks,andOtherUserActionsRespondingtoElementandPageLifecycleEventsControllingEventPropagationandBubblingPreventingDefaultBehaviorDelegatingEventsFiringandCapturingCustomEventsDrivingApplicationswithCustomEventsUsingObjectMethodsasEventHandlersDetachingEventSubscriptionsControllingtheOrderofEventHandlerExecutionCreatingSyntheticDOMEventsRespondingtoaMethodCallwithAnotherMethodAjaxFetchingandDisplayingXHRDataHandlingErrorsDuringDataTransportLoadingContentDirectlyintoaNodeSubmittingFormDatawithXHRUploadingaFilewithXHRGettingJSONDataUsingScriptNodes(JSONP)FetchingandDisplayingDatawithYQLScrapingHTMLwithYQLQueryingDataUsingDataSourceNormalizingDataSourceResponseswithaDataSchemaCSSNormalizingBrowserStyleInconsistenciesRebuildingUniformBaseStylesiv|TableofContentsApplyingConsistentFontsLayingOutContentwithGridsUsingGridsforResponsiveDesignCreatingConsistentButtonsInfrastructureManagingStatewithAttributesCreatingBaseComponentswithYextend()CreatingBaseComponentswithYBasecreate()CreatingaBasicWidgetCreatingaWidgetThatUsesProgressiveEnhancementRenderingRemoteDatawithaWidgetCreatingaSimplePluginCreatingaPluginThatAltersHostBehaviorBundlingCSSwithaWidgetasaCSSModuleBundlingCSSwithaWidgetasaSkinRepresentingDatawithaModelPersistingModelDatawithaSyncLayerManagingModelswithaSyncingModelListRenderingHTMLwithaViewRenderingaModelwithaViewRenderingaModelListwithaViewSavingStateChangesintheURLDefiningandExecutingRoutesUsingWidgetsInstantiating,Rendering,andConfiguringWidgetsCreatinganOverlayAligningandCenteringanOverlayMakinganOverlayDraggableCreatingaSimple,StyledInformationPanelCreatingaModalDialogorFormCreatingaTooltipfromanOverlayCreatingaLightboxfromanOverlayCreatingaSliderCreatingaTabviewCreatingaBasicDataTableFormattingaDataTable’sAppearanceDisplayingaRemoteJSONDataSourceinaDataTablePlottingDatainaChartChoosingDateswithaCalendarDefiningCalendarRulesCreatingaBasicAutoCompleteTableofContents|vHighlightingandFilteringAutoCompleteResultsUsingAutoCompletewithRemoteDataCustomizingtheAutoCompleteResultListUtilitiesDeterminingaVariable’sTypeIteratingOverArraysandObjectsFilteringanArrayMergingObjectsComposingandInheritingfromOtherObjectsAutomaticallyCachingFunctionCallResultsTemplatingwithSimpleStringSubstitutionFormattingNumbersFormattingDatesParsingArbitraryXMLConvertingColorValuesManagingHistoryandtheBackButtonEscapingUserInputAssigningSpecialBehaviortoaCheckboxGroupImplementingEasyKeyboardActionsandNavigationReliablyDetectingInputFieldChangesManagingandValidatingFormsServerSideYUIInstallingandRunningYUIontheServerLoadingModulesSynchronouslyontheServerUsingYUIontheCommandLineCallingYQLontheServerUsingtheYUIREPLConstructingandServingaPagewithYUI,YQL,andHandlebarsUniversalAccessPreventingtheFlashofUnstyledContentAddingARIAtoFormErrorMessagesBuildingaWidgetwithARIARetrofittingaWidgetwithanARIAPluginDefiningTranslatedStringsInternationalizingaWidgetProfessionalToolsEnablingDebugLoggingRenderingDebugLogOutputinthePageWritingUnitTestsvi|TableofContentsOrganizingUnitTestsintoSuitesTestingEventHandlersbySimulatingEventsMockingObjectsTestingAsynchronouslyUsingwait()CollectingandPostingTestResultsPrecommitTestinginMultipleBrowsersTestingonMobileDevicesTestingServerSideJavaScriptMinifyingYourCodeDocumentingYourCodeIndexTableofContents|viiPrefaceWelcometotheYUICookbookIfyou’realreadyinvestedintheYahoo!UserInterfacelibrary(YUI),that’sexcellent!ThisbookisfullofusefulrecipesandinsightsGoforthanduseittobuildsomethinggreat!Ifyou’renotalreadyinvestedinYUI,that’sfinetooPerhapsyoupickedupthisbookbecauseyouliketostayinformedOrperhapsyoupickedupthisbookbecauseyou’vebeenassignedtoaprojectthatusesYUI,you’redeathlyafraidofthisalientechnology,andevennowyou’reidlywonderingwhethertorewritetheentireprojectfromscratchEitherway,you’reprobablythinkingtoyourself,“WhatexactlyisYUIgoodfor”Orperhapsevenmoreaccurately,“WhatcanIbuildwithYUIthatIcan’tjustdowithjQuery”TheshortansweristhatwiththehelpofauxiliarylibrariessuchasUnderscoreandBackbone,there’slittleyoucan’tbuildwithjQueryjQueryisanexcellentdocumentobjectmodel(DOM),events,andAjaxabstractionlibrary,andpeopleuseittobuildbeautifulpageseverydayThelongeransweristhateverylibraryisdesignedtoaddressaparticularsetofproblemsYUIfocusesonkeepingthecomplexityofwebapplicationsfromspiralingoutofcontrolItskeystrengthsaremodularityandstructure•“Modularity”meansthatYUIisnotamonolithiclibrary,butatoolkitforassemblinghighlytailoredlibrariesIfyouneedAutoCompleteandCalendar,youcanloadjustthosewidgetsandleaveoutalltheothersIfyouneedDOMmanipulationbutnotXHRrequests,youcanloadjustthecoreDOMAPIswithoutAjaxModularityisnottackedonasanafterthought,butbakeddeepintoYUI’sdesign•“Structure”meansthatYUI’sAPIsguideyoutowardbuildingapplicationsasasetoforderlycomponentsBecauseofthis,YUIcomponentsallhaveverysimilarbehaviorsIfyouknowhowtoworkwithaYUIScrollView,youalreadyknowalotabouthowtoworkwithaSlider,aDataTable,oranyotherYUIwidgetixThemostrealisticansweristhatthebestwaytodeterminewhetheraframeworkorlibraryworksforyouistotryitoutyourselfYUIisapowerfulopensourceJavaScriptandCSStoolkitforbuildingwebapplications,buttherearemanyotherfinechoicesoutthereThisbookaimstodemystifyYUIandhelpyoumakeaninformeddecisionYUIVersusYUITobeginthedemystificationprocess,let’sstartwiththedifferencebetweenYUIandYUIYUIburstonthesceneatacriticalmoment,whenthefieldoffrontendengineeringwasstartingtocoalesceasadisciplineEvenyearsafterYUI’srelease,manypeoplestillthinkofYUIasYUIYUIcodelookslikethis:varnodes=YAHOOutilDomgetElementsByClassName('demo')AlthoughthislooksuncomfortablylikeJava,bearinmindthatbackinearly,carefullynamespacingyourAPIunderobjectswasacuttingedgetechniqueThestatusquowasthrowingyourcodeintotheglobalnamespaceandhopingforthebestBecauseofthisfocusonsafety,YUIgainedareputationasanindustrialstrengthbutverboseAPIYUIlaunchedinasamajorrevampTherevampnotonlybakedmodulesandmoduleloadingintothecore,butalsocleaneduptheAPIandeliminatedmostoftheverbosemethodnamesYUIcodelookslikethis:varnodes=Yall('demo')whichshouldlookfamiliarifyouareusedtocallingdojoquery('demo'),$$('demo'),or$('demo')However,thankstoancienttutorials,rottingcodeexamples,questionable“webmaster”forums,andothersourcesofbadadvice,peoplewhoarevaguelyawareofYUIoftenthinkitmeanslongJavaesquemethodnamesThat’sunfortunate,becauseinYUI,thesimplethingsareactuallyprettysimpleYoucanuseYUItomanipulatetheDOMandinvokepageeffectswithverysmallamountsofcodeThatbyitselfisnotareasontouseYUI,asmanylibrariesalsoprovidepowerfulAPIsforDOMmanipulationandeffectsStill,ifyou’recreatingaquickprototypeoratemporarymarketingpagewithacoupleoffades,restassuredthatyoucanknockthatpageoutwithYUIjustaboutaseasilyaswithanythingelseWhyUseYUIWhileYUIissuccinctenoughfor“light”JavaScriptwork,whereitreallyshinesisinprovidingasolidfoundationformoremaintainablecodex|PrefaceAsanexample,sayyourbossasksyoutodesignaformwithaJavaScriptdatepickerYoufindaprepackagedwidgetthatlooksniceandseemstoworkwell,soyoucopyandpasteitintoyourcodeEveryoneishappyThenyourbosstellsyouthattherequirementshavechanged,andwhattheformactuallyneedsisadoublepanecalendarSoyouhackthatfunctionalityintothewidgetYoumanagetogetittowork,butthecodeisn’tpretty,andworse,nowyou’relockedinToavoidlockin,everycomponentinYUIisdesignedforextensionEveryYUIwidgetsharesthesamesolidAPIcoreandoffersthesameextensionpoints,includingacommonrenderinglifecyclewithstandardhookstointerceptoroverrideYUIletsyouextendcomponentsinaclasslikehierarchy,mixinnewmethodsandproperties,plugnewbehaviorsintoinstances,andeveninjectarbitrarybehaviorbeforeandaftermethodsInshort,thereisalwaysacleanwaytoextendaYUIcomponentinsteadofcreatinganunmaintainablemessWhileYUIisaverycomprehensivetoolkit,itsoverall“size”isassmalloraslargeasyoulikeNobodyloads“allofYUI”Instead,youloadwhatyouneed:DOMmanipulation,customevents,animationsandpageeffects,Ajax,widgets,functionandarrayutilities,templating,vectorgraphics,MVCyounameit,YUIprobablyhasitAndifYUIdoesn’thaveit,that’snoproblemeitherYUIisdesignedfromthegrounduptorunsafelyalongsidethirdpartycodeYoucanevenusetheYUILoadertowrapandloadotherlibrariesintothepageasiftheywereordinaryYUImodulesWiththiscomprehensivetoolkitcomescomprehensivedocumentationandtoolsYUIincludesdetaileduserguides,tutorials,APIreferencedocumentation,hundredsofexamples,andYUITheater,anincrediblevideoresourcethatdocumentstheevolutionofthefrontendengineeringprofessionYUIalsoincludesanentiresuiteoftoolsforprofessionalcodedevelopment:abuilder,adocumentationgenerator,atestframeworkandtestrunner,aminificationandcompressiontool,andmoreAsanopensourceproject,YUIhasaccumulatedavibrantdevelopercommunityMostactiveYUIcommunitymembersareexperiencedengineerswhohaveabroadbackgroundwithotherframeworksandlibrariesIfyouhavetechnicalquestionsabouthowtouseYUIeffectively,thecommunityisawealthofinformationFinally,YUIadherestothebizarre,unfashionablephilosophythatlibrarycodeshould,asmuchaspossible,runasisinawidearrayofenvironmentsThisisactuallyabitconfusingtodevelopers,whotendtoassumethatsincethereisno“YUIMobile”forkofthelibrary,thatmustmeanYUIdoesn’tworkonmobiledevicesInfact,theYUIteamtestsalllibrarycodeonawideselectionofmobiledevices,andaddsmethodsandsyntheticeventstohelpyouabstractawaydifferencesbetweenplatformsLikewise,YUIrunsinaNodejsserverenvironmentasisThereisnoYUIMobileEditionorYUITabletEditionorYUIServerEditionThereisjustYUIPreface|xiLibraryorFrameworkWebdeveloperstendtocalllargerprojects“frameworks,”andmediumsizeandsmallerprojects“libraries”Thelinebetweenthetwoisfuzzy,andtendstoleadtoreligiousdisagreementsForalargebutalsohighlymodularprojectsuchasYUIorDojo,themostaccuratetermmightactuallybe“toolkit”ThisbookcheerfullyreferstoYUIasallthreeThereisalsoaminitrendofcallingsmallJavaScriptlibraries“microframeworks”However,thisbookwillfollowthelastfiftyyearsofsoftwareengineeringpracticeandcontinuetorefertothemas“libraries”WhoThisBookIsForTherearetwomainaudienceswhowillbenefitmostfromthisbook:•JavaScriptdeveloperswhoarenewtoYUIThesedeveloperswillmostlikelybenefitfromreadingthesimplerrecipes(whichtendtoclusteratthebeginningofeachchapter)andfromfocusingonthe“Problem”and“Solution”sectionsofeachrecipe•JavaScriptdeveloperswhohavelighttomoderateYUIexperienceandarelookingtodeepentheirknowledgeThesedeveloperswillmostlikelybeinterestedinthemoreadvancedrecipesandinreadingtheindepth“Discussion”sectionsThisbookwillnotteachyouJavaScriptItassumesthatyouarefamiliarwiththebasicmechanicsofthelanguage,upthroughandincludingprototypes,anonymousfunctions,andatleastsomestandardECMAScriptandDOMmethodsIfyouareanexperiencedengineerwhopicksupnewlanguagesinweeks,readingthisbookmighthelpyoulearnsomeJavaScriptthroughosmosis,butitisn’tthebestplacetostartAmuchbetterplacetostartisEloquentJavaScriptbyMarijnHaverbeke(NoStarchPress),followedbyJavaScript:TheGoodPartsbyDouglasCrockford(O’Reilly)ThereasonthisbookassumesyoualreadyknowJavaScriptisthatalllibrariesfailTherewillbebugsTherewillbesituationswherethelibrary’sabstractionsfallapartGettingyourselfunstuckmeansbeingabletounderstandwhatisgoingonbothinthelibrarycodeandbeyondOrasformerYahoo!architectNicholasZakasputsit,“Libraryknowledgeisnotfrontendknowledgeanymorethanknowinghowtouseahammermakesyouacarpenter”IfyouarealreadyaYUIexpert,thisbookprobablycoversalotoffamiliargroundStill,itmighthelpyouwithcornersofthelibrarythatyouknowlesswell,orprovidesomeextrainsightintowhysomeaspectofYUIworksthewayitdoesThisbookisnotacomprehensivereferencemanualfortheentireYUIlibrarySomecomponentsareexploredindetailSomegetshortshriftManydon’tgetmentionedatallEachrecipesolvesaspecificproblem,butveryfewcovereveryavailablemethod,xii|Prefaceparameter,andconfigurationoptionForthat,pleaseconsu

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

评分:

/49

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利