Every control and plugin of the bubbling library ships with a series of examples that illustrate its implementation. These examples can serve as starting points for your exploration of the Bubbling Library, as code snippets to get you started in your own programming. Some of these examples use XHR request, which means that may not work if you don't use a webserver, you can see these examples directly in the official website.
Also, you can navigate through the API documentation in the official library website, and you will be able to explore these examples component-by-component; on this page you'll find the full index of library examples with a link to and short description of each one.
YAHOO.Bubbling | Examples of Using the Bubbling Technique: Simple Actions | Untied your XHTML code from the javascript listeners, no more addListener in your code. Just define the class of each link, and the corresponding behavior for each link´s class. |
| How to define a global behavior using the Bubbling Technique: Global Behaviors | In this example you will see how to define a global behavior called "actionGlobalBahavior", and every link or button in this page that have a className equal to "actionGlobalBahavior" will fire this behavior, even when the element is created form JavaScript or by another component in the page, even before or after the definition of the global behavior |
| Global Behaviors Definition: See this advanced example to learn more about the global behaviors | In this example you will see a full explanation, step by step, of the possibilities of this technique, including dynamic behaviors (behaviors can be activated onDemand). |
| How to define keyboard shortcuts using the Bubbling Technique: Behaviors' shortcuts | In this example you will see how to define keyboard shortcuts that will fire a certain behaviors. |
| Bubbling Technique: actionSetFocus | Define links to set the focus in each field in a form. |
| Defining keyboard shorcuts for YUI Menus | In this example you will see how to add keyboard shortcuts for menu items and submenus in a YUI Menu bar. |
| Dealing with floating elements (repainting the viewport) | In this example you will see how to use the bubbling core to repaint certain elements when something change in the viewport using the "repaint" behaviors layer. The bubbling CORE will define a set of listeners to monitoring the browser (font size, scrolling, browser resize, etc), creating pipes to take certain actions. |
| Processing all the clicks on the page | See how to use a global behavior to create a dynamic navigable website. All the clicks are wrapped by the global behavior, and certain actions will be fired, depending of the target of the event. |
| Rollover and Rollout behaviors layers | The previous examples, were related with the navigation behaviors (click), now we can see how to use the mouseover/mouseout events to fire certain behaviors, getting as a result a nice dynamic "tooltips", even to dynamic elements created on the fly. |
YAHOO.plugin.Dispatcher| Dispatcher - General approach | |
|---|---|
| Dynamically loading content with script inside | This is an example of the DISPATCHER feature over two DIV tags, you can use the dispatcher to managing the content inside each DIV. This feature will warranty the execution of the scripts (remote and inline "script" tags) during the URI request. |
| Dispatcher Example - Customizing the script inline execution | By default, the dispatcher will use the javascript eval method, wrapping the code inside an anonymous function. Some javascript frameworks will require to be executed in the global scope, defining variables as global. The dispatcher will loose the global variables definition if you don't use namespacing. |
| Dispatcher for Tabview & external components | |
| Delegate the loading mechanism for a TabView to the dispatcher to content with script inside | This is an example of the DISPATCHER feature over the YUI tabview component, you can use the dispatcher to managing the content inside the tab. This feature will warranty the execution of the scripts (remote and inline "script" tags) during the dataSrc request. |
| TabView and Dispatcher Example - Dynamically loading content with child tabview inside | This is an example of the DISPATCHER feature over the YUI tabview component, you can use the dispatcher to managing the "child tabview" inside each tab. |
| TabView, Datatable and Dispatcher Example - Dynamically loading content with datatable inside | This is an example of the DISPATCHER feature over the YUI tabview component, you can use the dispatcher to managing the content inside the tab, and including another YUI component (YUI Datatable) during the dataSrc request. |
| TabView, Accordion and Dispatcher Example - Dynamically loading content with accordion inside | This is an example of the DISPATCHER feature over the YUI tabview component, you can use the dispatcher to managing the content inside the tab, and including another tabview with accordion layout. |
| TabView and Dispatcher Example - Dynamically loading content with script inside | This is an example of the DISPATCHER feature over the YUI tabview component, you can use the dispatcher to managing the content inside the tab. This feature will warranty the execution of the scripts (remote and inline "script" tags) during the dataSrc request. |
| Dispatcher for JavaScript and CSS injection | |
| CSS Injection (cssLoader and applyCSS) | In this example you will see how to inject CSS rules on demand in your application, the rules can be written in line or thru a remote file loaded thru AJAX using the YUI connection manager. |
| Dynamic Navegation Theory | |
| Dynamically loading simple contents | See how the left menu load the corresponding content in the central area of the page. |
| Dynamically loading content with YUI controls inside the area | See how the left menu load the corresponding content in the central area of the page. In this example the main of the page also include external components that will be loaded onDemand (ex. Datatable and Tabview). |
| Combining the YUI MenuBar with the dispatcher | See how the YUI MenuBar load the corresponding content in the central area of the page. |
| Dispatcher Plugin and YUI Browser History Manager | The dispatcher plugin have build-in integration with the YUI Browser History Manager. Which means that you can use the extension with the tabview, layout and a simple DIV as well, and the dispatcher controls the actions in all these areas using the YUI BHM. |
| Advanced configuration options | |
| How to pass parameters thru the dispatcher | In this example, you will see how to pass parameters in the initialization process, and then use these parameters in the different moments during the loading process. |
| How to avoid memory leaks | In this example, you can see how the first tab "Datatable Control" define the rules to destroy the YUI Datatable before change the content of the tab. |
| Dynamic content with inline scripts | You can also use the dispatcher to execute inline JS code without using AJAX to load the content. |
| Dynamic content with remote scripts (FULLPATH) | Defining the path for the remote assets using the fullpath. |
YAHOO.plugin.Lighter| Plugin Lighter - Example - Extending the CSS functionalities | These examples will show you how to use the lighter plugin to highlighting areas within the document when the mouse goes into each area. |
| Using the lighter plugin to define different backgrounds for an area | The important moments can offer a gateway for load or modify certain elements. |
YAHOO.plugin.WizardManager| PEAR Wizard using Javascript | This example show you how to create and manage simple forms using the wizard plugin. In this case, using the PEAR:DBObject:Wizard in the backend... |
| Multiple Forms - Installer | Using the wizard along with different components to create an installer (mutiple forms). |
| Wizard plugin for a login forms | In this example you will see how the wizard can adopt an area, and how it will manage the submition events for login thru the YUI connection manager. |
| Wizard plugin for a login forms - Loading the form dynamically | In this example you will see how the wizard can add a new area, and how it will manage the submition events for login thru the YUI connection manager. |
YAHOO.widget.TooltipManager| ToolTips for every link in the page | See how to use the mouseover/mouseout events to fire certain behaviors, getting as a result a nice dynamic "tooltips", even to dynamic elements created on the fly. |
| Dynamic ToolTips for different kind of elements (YUI Buttons, images, links) | Dynamic ToolTips - This is a customization of the previous example, attaching tooltips to dynamic and static elements based on the title of the anchor. |
| ToolTips without the link information (new) | This is a customization of the previous example, redefining the method "onCompile" to display whatever we want into the tooltip's overlay. |
| Parsing the tooltip's content and applying a pseudo code (new) | Creating a pseudo code to apply styles to the title. |
| HelpHints with images and links inside (flickr images and thumbnails) | This is a tooltip customization to display thumbnail images on mouse over based on the HREF of the anchor. This implementation is based on the technique described by Chris Heilmann. |
| Animated and dragable ToolTips with "close" button and persistent (keeping one instance visible) | You can use this control to display information related with the target element, and this information can be an common xhtml full text, allow you to use this control to keep this information visible until the user close the panel or rollover another element with tooltip attached. In this case the panel will be displayed using an animation effect (FADE In/Out). |
| AJAX ToolTips (Get the tooltip's content remotely) | If you're using a lot of dynamic links, and every link has a custom text for the tooltip element, you can use a simple ajax application for fetch the content on the fly using the YUI Connection Manager. |
| ToolTips for different type of elements in the page using the className | Include the corresponding behavior for Tooltips and a bunch of elements in your page will show a nice dynamic tooltip. All the elements with title and className equal to "yui-tip" will show a tooltip on rollover event. Also, learn how to extend the method "finder" to apply the dynamic tooltip to other kind of elements. |
YAHOO.widget.AccordionManager (New) | Accordion Menu (click to toggle) | The elements will be expanded or collapsed when you click in the area that represent the element. You don't need to define a particular trigger element. As you can see in this example, the elements with the class "trigger" fires the toggle method. |
| Accordion Menu (action on rollover) | The accordion can handle clicks on each item to expand or collapse the item, depending of the target, but also supports mousein/mouseout (rollover approach). In this case depending of the position of the mouse, the accordion's items will be toggle. |
| AJAX Accordion Menu (open on click) | The content of each element will be loaded using YUI Dispacher plugins. |
| Hidden Left Panel (Accordion Menu) (open on rollover) | The accordion widget is a very extensible component, to expand and collapse DOM elements, you can use it to create hidden panels, horizontal or vertical panels. |
| Accordion Panels: Using Drag and Drop to Reorder the Panels | In this example, we used the YUI Drag and Drop utility and the YUI Container Skin to create accordion items and these items can be drag and drop between different accordion instances. |
| Accordion Panels using the YUI Panel Skin | The accordion is very flexible in terms of markup. Basically you can accomodate the accordion's classes to any HTML markup. In this example we use the YUI Panel Skin to create the accordion's items. |
| Accordion Menu and how to handle it from outside (open on click) | It's really easy to handle the states of the items using JS, you only need a reference to a DOM element within an accordion item, and you can modify the state for that particular item, collapsing or expanding it. Also you can control the accordion as a single object. |
| Creating items on the fly for existing accordions (Injecting Elements) | The accordion widget do not use listeners for the trigger elements, which means that you can extend your current HTML markup, and the new elements can be handle by the accordion control automatically. In the same way, you can remove elements from the DOM without worry about memory leaks. |
| Nested Accordions Menus | The accordion works based on the HTML markup, catching the events and fires the corresponding behavior. This technique allows us to use complex markups easily. This example describes how to create nested accordions. Note: the child accordion is persistent, which means that only one element can be opened at the same time. |
| Accordion Control - Expandable items | The accordion widget allow us to create expandable or collapsable elements. We have two different approach, all the elements can be expanded at the same time, or only one of them can be opened. This example show the first approach. |
| YUI Accordion Widget to create Collapsable and Expandable YUI Panels | The accordion widget use the HTML code (DOM structure) to create the accordion's effects, which means that you can use it with some of the YUI Widgets. This example shows how to use the YUI Panel / Dialog with the accordion control, and also creating dependencies between some of the panels. |
| Vertical Accordion Menu | The accordion also supports vertical items. This approach is not widely extended, but in case you need it, there it goes... :-) |
YAHOO.widget.Loading| Simple Loading Mask | See how to use the "Loading Mask" in an overloaded webpage to avoid the quirks during the displaying process. |
| Animated Loading Mask | The same loading mask but now with a fade In/Out animation. |
| Simple Loading Mask with Opacity | See how to use the "Loading Mask" in an overloaded webpage to avoid the quirks during the displaying process. This example also apply alpha opacity to the mask to get the transparence effect. |
| Preconfigured - Loading Mask | Also, you can setup the mask before display it, in order to customize the way the the mask should be displayed. |
| Loading Mask: advanced example | Every time you click on a dynamic link, the loading mask will be displayed and will be hiding at the loading process end (Integration with the YUI Connection Manager). |