Book Image

Yahoo User Interface Library 2.x Cookbook

By : Matt Snider
Book Image

Yahoo User Interface Library 2.x Cookbook

By: Matt Snider

Overview of this book

<p>The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. Although you can create stylish Internet applications by modifying its default components, even advanced users find it challenging to create impressive feature-rich Internet applications using YUI.</p> <p>This book will help you learn how to use YUI 2.x to build richer, more interactive web applications that impress clients and wow your friends. It has recipes explaining over twenty-five YUI components, showing how to use them, and how to configure them to meet your needs. Each covered component will have extractable code samples that showcase the common ways that the component is used.</p> <p>The book starts by explaining the core features of YUI 2.x, the utilities that the rest of the library depends on and that will make your life easier. It then explains how to build UI components and make AJAX requests using the YUI framework. Each recipe will cover the most common ways to use a component, how to configure it, and then explain any other features that may be available. We wrap things up by looking at some of the recent beta components and explain how to use them, and how they may be useful on your web application.</p> <p>For each of the recipes, there is an introductory example, then more advanced examples, followed by an explanation of how the component works and what YUI is doing. For more experienced developers, most recipes also include additional discussion of the solution, explaining to further customize and enhance the component.</p>

Related Content you might be interested in

Current Title:

Small book image
Yahoo User Interface Library 2.x Cookbook
Matt Snider
Jan, 2011 | 436 pages
No titles found
Table of Contents (22 chapters)
Yahoo! User Interface 2.x Cookbook
Yahoo! User Interface 2.x Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
USING YUI 2.x
USING YUI 2.x
Introduction
Fetching the latest version of YUI 2.x
Letting YDN manage YUI dependencies dynamically
Configuring the YUILoader component
Letting YUI manage My Script dependencies
Importing JavaScript and CSS with the Get component
Configuring the Get component
Building namespaces
Including YUI CSS
Evaluating object types, the YUI way
Using hasOwnProperty to fix for...in loops
Extending JavaScript objects, the YUI way
Augmenting objects using YUI
Detecting client browser and platforms
Using the Cookie component
Using the JSON package
2
Using DOM and Selector Components
Using DOM and Selector Components
Introduction
Searching the document
Searching for element children and siblings
Searching for element ancestors
Working with HTML classes
Modifying element styles and HTML attributes
Element positions and sizes
Using and comparing regions
Using advanced DOM functions
Using Selector to search the DOM
Using CSS 2 and 3 Selectors with YUI
Filtering and testing nodes using selector
3
Using Event Component
Using Event Component
Introduction
Using YUI to attach JavaScript event listeners
Event normalization functions
Removing event listeners
Listening for key events
Using special YUI only events
Using YUI helper event functions
Using custom events
The simple way to add custom events to classes
4
Using Connection Component
Using Connection Component
Introduction
Making your first AJAX request
Exploring the callback object properties
Exploring the response object properties
Handling event callback functions
Subscribing to connection events globally
Uploading files using Connection Manager
Making cross-domain AJAX requests
Other useful Connection Manager static function
Putting it all together
5
Using DataSource Component
Using DataSource Component
Introduction
Simple examples of each DataSource type
Using the JavaScript array response type
Using the JSON response type
Using the XML ResponseType
Using the text response type
Using the HTML table response type
Exploring advanced DataSource features
6
Using Logger and YUI Test Components
Using Logger and YUI Test Components
Introduction
Writing your first log statement
Exploring the Logger component
Configuring and using the LogReader class
Using the LogWriter component
Writing your first test case
How to use assertions
Simulating user actions in your tests
Using TestSuite to manage TestCases
Using TestRunner to run tests
7
Using Element and Button Components
Using Element and Button Components
Introduction
Creating your first element object
Subscribing to events on element objects
Using AttributeProvider to attributes for classes
Manipulating the DOM using element objects
Creating your first button object
Using ButtonGroups to control related buttons
Using events with button and ButtonGroup objects
8
Using Menu Component
Using Menu Component
Introduction
Creating your first Menu object
Grouping related MenuItems
Adding Submenus to your Menus
Traversing a Menu instance
Adding help text to your MenuItems
Configuring Menu and MenuItem instances
Subscribing to events on Menu objects
Using the ContextMenu Menu object
Using the MenuBar Menu object
Controlling a Menu using a Button object
9
Using Animation Component
Using Animation Component
Introduction
Creating your first animation
Exploring the animation attributes
Using and writing easing functions
Subscribing to animation events
Animating colors
Animating with motion
Animating an element's scroll offset
10
Using Drag and Drop Component
Using Drag and Drop Component
Introduction
Creating your first Drag and Drop element
Configuring and using Drag and Drop manager
Handling Drag and Drop events between DD and DDTarget objects
Limiting Drag and Drop interactions by grouping instances
Constraining drag elements within a region
Using drag handles
Limiting the drag element regions for dragging
11
Using Container Component
Using Container Component
Introduction
Using Module, the foundation for all containers
Exploring Overlay, a foundation for all positioned containers
Creating a JavaScript driven tooltip
Exploring the Panel infrastructure
Showing on-demand forms with dialog
Replacing browser dialogs with SimpleDialog
Adding animation effects to your containers
12
Using DataTable Component
Using DataTable Component
Introduction
Creating a simple DataTable
Defining DataTable columns
Custom cell formatting
Manipulating columns and rows
Sorting your DataTable
Paginating your DataTable
Scrolling your DataTable
Selecting rows, columns, and cells
Inline cell editing
Retrieving remote data for DataTable
13
Using TreeView Component
Using TreeView Component
Introduction
Creating a simple TreeView
Defining node definitions
Navigating and searching the tree
Adding and removing nodes
Animating TreeView expand and collapse
Editing the content of a node
Handling TreeView events
Working with dynamic data
Creating custom node types
14
Other Useful Components
Other Useful Components
Introduction
Using the Autocomplete component
Using the Calendar component
Using the History component
Using the Resize component
Using the Slider component
Using the TabView component
15
Some Interesting Beta Components
Some Interesting Beta Components
Introduction
Using the SWF component
Using the SWFStore component
Using the Storage component
Using the StyleSheet component
Using the Charts component
Using the Uploader component
Index
Index

Removing event listeners

As with attaching listeners, there are two browser variations for removing events and legacy browser considerations as well. Additionally, when using the native event removal functions, you must pass in exactly the same arguments as you passed to the native add event functions. YUI not only handles the cross-browser variations, but ensures that you pass the correct arguments when removing a function. This recipe shows several ways to remove event listeners from elements.

How to do it...

Remove a callback function directly, by passing in the exact same arguments you used when calling addListener: 

YAHOO.util.Event.removeListener('myElementId', 'click', fnCallback);

Removing all events of a specific type does not require the arguments from addListener: 

// removes all 'click' type events from 'myElementId'
YAHOO.util.Event.removeListener('myElementId', 'click');

Remove all listeners from an element:

YAHOO.util.Event.purgeElement('myElementId');

Remove all listeners from...

Previous Section
End of Section 5
Next Section