book

YUI 3 Cookbook

by Evan Goer

June 2012

Beginner

430 pages

11h 42m

English

O'Reilly Media, Inc.

Read now

Unlock full access

YUI 2 Versus YUI 3Why Use YUI?Library or Framework?Who This Book Is ForResources and CommunityConventions Used in This BookAbout the ExamplesTypesetting ConventionsUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgments
Loading Rollups and ModulesProblemSolutionDiscussionLoading SimpleYUIProblemSolutionDiscussionIdentifying and Loading Individual ModulesProblemSolutionDiscussionSee AlsoLoading a Different Default SkinProblemSolutionDiscussionSee AlsoLoading Gallery ModulesProblemSolutionDiscussionSee AlsoLoading a YUI 2 WidgetProblemSolutionDiscussionSee AlsoLoading Locally Hosted BuildsProblemSolutionDiscussionSee AlsoCreating Your Own ModulesProblemSolutionDiscussionSee AlsoCreating a Module with DependenciesProblemSolutionDiscussionSee AlsoCreating Truly Reusable ModulesProblemSolutionDiscussionDefining Groups of Custom ModulesProblemSolutionDiscussionSee AlsoReusing a YUI ConfigurationProblemSolutionDiscussionDefining Your Own RollupsProblemSolutionDiscussionSee AlsoLoading jQuery as a YUI ModuleProblemSolutionDiscussionSee AlsoLoading Modules Based on Browser CapabilitiesProblemSolutionDiscussionSee AlsoMonkeypatching YUIProblemSolutionDiscussionSee AlsoLoading Modules on DemandProblemSolutionDiscussionSee AlsoEnabling Predictive Module Loading on User InteractionProblemSolutionDiscussionBinding a YUI Instance to an iframeProblemSolutionDiscussionSee AlsoImplementing Static LoadingProblemSolutionDiscussion
Getting Element ReferencesProblemSolutionDiscussionSee AlsoManipulating CSS ClassesProblemSolutionDiscussionGetting and Setting DOM PropertiesProblemSolutionDiscussionSee AlsoChanging an Element’s Inner ContentProblemSolutionDiscussionWorking with Element CollectionsProblemSolutionDiscussionSee AlsoCreating New ElementsProblemSolutionDiscussionSee AlsoAdding Custom Methods to NodesProblemSolutionDiscussionAdding Custom Properties to NodesProblemSolutionDiscussion
Hiding an ElementProblemSolutionDiscussionFading an ElementProblemSolutionDiscussionSee AlsoMoving an ElementProblemSolutionDiscussionSee AlsoCreating a Series of TransitionsProblemSolutionDiscussionDefining Your Own Canned TransitionsProblemSolutionDiscussionCreating an Infinite Scroll EffectProblemSolutionDiscussionSee AlsoDragging an ElementProblemSolutionDiscussionCreating a Resizable NodeProblemSolutionDiscussionSee AlsoImplementing a Reorderable Drag-and-Drop TableProblemSolutionDiscussion
Responding to Mouseovers, Clicks, and Other User ActionsProblemSolutionDiscussionSee AlsoResponding to Element and Page Lifecycle EventsProblemSolutionDiscussionControlling Event Propagation and BubblingProblemSolutionDiscussionSee AlsoPreventing Default BehaviorProblemSolutionDiscussionDelegating EventsProblemSolutionDiscussionFiring and Capturing Custom EventsProblemSolutionDiscussionDriving Applications with Custom EventsProblemSolutionDiscussionUsing Object Methods as Event HandlersProblemSolutionDiscussionDetaching Event SubscriptionsProblemSolutionDiscussionSee AlsoControlling the Order of Event Handler ExecutionProblemSolutionDiscussionCreating Synthetic DOM EventsProblemSolutionDiscussionResponding to a Method Call with Another MethodProblemSolutionDiscussion
Fetching and Displaying XHR DataProblemSolutionDiscussionSee AlsoHandling Errors During Data TransportProblemSolutionDiscussionSee AlsoLoading Content Directly into a NodeProblemSolutionDiscussionSee AlsoSubmitting Form Data with XHRProblemSolutionDiscussionUploading a File with XHRProblemSolutionDiscussionGetting JSON Data Using Script Nodes (JSONP)ProblemSolutionDiscussionSee AlsoFetching and Displaying Data with YQLProblemSolutionDiscussionSee AlsoScraping HTML with YQLProblemSolutionDiscussionSee AlsoQuerying Data Using DataSourceProblemSolutionDiscussionSee AlsoNormalizing DataSource Responses with a DataSchemaProblemSolutionDiscussionSee Also
Normalizing Browser Style InconsistenciesProblemSolutionDiscussionSee AlsoRebuilding Uniform Base StylesProblemSolutionDiscussionApplying Consistent FontsProblemSolutionDiscussionLaying Out Content with GridsProblemSolutionDiscussionSee AlsoUsing Grids for Responsive DesignProblemSolutionDiscussionSee AlsoCreating Consistent ButtonsProblemSolutionDiscussionSee Also
Managing State with AttributesProblemSolutionDiscussionSee AlsoCreating Base Components with Y.extend()ProblemSolutionDiscussionSee AlsoCreating Base Components with Y.Base.create()ProblemSolutionDiscussionSee AlsoCreating a Basic WidgetProblemSolutionDiscussionSee AlsoCreating a Widget That Uses Progressive EnhancementProblemSolutionDiscussionSee AlsoRendering Remote Data with a WidgetProblemSolutionDiscussionSee AlsoCreating a Simple PluginProblemSolutionDiscussionSee AlsoCreating a Plugin That Alters Host BehaviorProblemSolutionDiscussionSee AlsoBundling CSS with a Widget as a CSS ModuleProblemSolutionDiscussionSee AlsoBundling CSS with a Widget as a SkinProblemSolutionDiscussionSee AlsoRepresenting Data with a ModelProblemSolutionDiscussionSee AlsoPersisting Model Data with a Sync LayerProblemSolutionDiscussionSee AlsoManaging Models with a Syncing ModelListProblemSolutionDiscussionSee AlsoRendering HTML with a ViewProblemSolutionDiscussionSee AlsoRendering a Model with a ViewProblemSolutionDiscussionSee AlsoRendering a ModelList with a ViewProblemSolutionDiscussionSee AlsoSaving State Changes in the URLProblemSolutionDiscussionSee AlsoDefining and Executing RoutesProblemSolutionDiscussionSee Also

Instantiating, Rendering, and Configuring WidgetsProblemSolutionDiscussionSee AlsoCreating an OverlayProblemSolutionDiscussionSee AlsoAligning and Centering an OverlayProblemSolutionDiscussionSee AlsoMaking an Overlay DraggableProblemSolutionDiscussionSee AlsoCreating a Simple, Styled Information PanelProblemSolutionDiscussionSee AlsoCreating a Modal Dialog or FormProblemSolutionDiscussionSee AlsoCreating a Tooltip from an OverlayProblemSolutionDiscussionSee AlsoCreating a Lightbox from an OverlayProblemSolutionDiscussionSee AlsoCreating a SliderProblemSolutionDiscussionSee AlsoCreating a TabviewProblemSolutionDiscussionSee AlsoCreating a Basic DataTableProblemSolutionDiscussionSee AlsoFormatting a DataTable’s AppearanceProblemSolutionDiscussionSee AlsoDisplaying a Remote JSON DataSource in a DataTableProblemSolutionDiscussionSee AlsoPlotting Data in a ChartProblemSolutionDiscussionSee AlsoChoosing Dates with a CalendarProblemSolutionDiscussionSee AlsoDefining Calendar RulesProblemSolutionDiscussionCreating a Basic AutoCompleteProblemSolutionDiscussionSee AlsoHighlighting and Filtering AutoComplete ResultsProblemSolutionDiscussionSee AlsoUsing AutoComplete with Remote DataProblemSolutionDiscussionSee AlsoCustomizing the AutoComplete Result ListProblemSolutionDiscussionSee Also
Determining a Variable’s TypeProblemSolutionDiscussionSee AlsoIterating Over Arrays and ObjectsProblemSolutionDiscussionSee AlsoFiltering an ArrayProblemSolutionDiscussionMerging ObjectsProblemSolutionDiscussionComposing and Inheriting from Other ObjectsProblemSolutionDiscussionSee AlsoAutomatically Caching Function Call ResultsProblemSolutionDiscussionTemplating with Simple String SubstitutionProblemSolutionDiscussionSee AlsoFormatting NumbersProblemSolutionDiscussionSee AlsoFormatting DatesProblemSolutionDiscussionSee AlsoParsing Arbitrary XMLProblemSolutionDiscussionSee AlsoConverting Color ValuesProblemSolutionDiscussionManaging History and the Back ButtonProblemSolutionDiscussionSee AlsoEscaping User InputProblemSolutionDiscussionSee AlsoAssigning Special Behavior to a Checkbox GroupProblemSolutionDiscussionSee AlsoImplementing Easy Keyboard Actions and NavigationProblemSolutionDiscussionSee AlsoReliably Detecting Input Field ChangesProblemSolutionDiscussionSee AlsoManaging and Validating FormsProblemSolutionDiscussionSee Also
Installing and Running YUI on the ServerProblemSolutionDiscussionSee AlsoLoading Modules Synchronously on the ServerProblemSolutionDiscussionSee AlsoUsing YUI on the Command LineProblemSolutionDiscussionSee AlsoCalling YQL on the ServerProblemSolutionDiscussionUsing the YUI REPLProblemSolutionDiscussionConstructing and Serving a Page with YUI, YQL, and HandlebarsProblemSolutionDiscussionSee Also
Preventing the Flash of Unstyled ContentProblemSolutionDiscussionSee AlsoAdding ARIA to Form Error MessagesProblemSolutionDiscussionSee AlsoBuilding a Widget with ARIAProblemSolutionDiscussionSee AlsoRetrofitting a Widget with an ARIA PluginProblemSolutionDiscussionSee AlsoDefining Translated StringsProblemSolutionDiscussionSee AlsoInternationalizing a WidgetProblemSolutionDiscussionSee Also
Enabling Debug LoggingProblemSolutionDiscussionRendering Debug Log Output in the PageProblemSolutionDiscussionSee AlsoWriting Unit TestsProblemSolutionDiscussionSee AlsoOrganizing Unit Tests into SuitesProblemSolutionDiscussionSee AlsoTesting Event Handlers by Simulating EventsProblemSolutionDiscussionMocking ObjectsProblemSolutionDiscussionSee AlsoTesting Asynchronously Using wait()ProblemSolutionDiscussionCollecting and Posting Test ResultsProblemSolutionDiscussionSee AlsoPrecommit Testing in Multiple BrowsersProblemSolutionDiscussionTesting on Mobile DevicesProblemSolutionDiscussionSee AlsoTesting Server-Side JavaScriptProblemSolutionDiscussionMinifying Your CodeProblemSolutionDiscussionSee AlsoDocumenting Your CodeProblemSolutionDiscussionSee Also

Overview

Solve a wide range of problems in your web application quickly and efficiently with the Yahoo! User Interface Library (YUI). With this definitive, getting-started guide to version 3 of the popular open source JavaScript library, you’ll learn how to address many of the most common and challenging problems that web development presents.