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 this 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.
| 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. |
| 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 - Advanced example | 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). |
| Defining behavior for keyboard shortcuts | In this example you will see how to define keyboard shortcuts that will fire a certain behaviors. |
| Simple behavior to set the focus on form's elements | Define links to set the focus in each field in a form. |
| Simple way to attach behaviors to menu items | There is several ways to add a behavior to a certain YUI Menu Item, but there is a lot of factors that you need to keep in mind, specially for lazy menus (addListener on render, purgeElement on destroy, stopPropagation, etc). But there is a very simple way, using the bubbling technique. Each behavior will correspond with the "classname" defined for each element in the JS's Array, also can be applied directly in the XHTML in case you're using YUI Menu from markup. |
| 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. |
| Advanced rollover functionalities, expanding the CSS's boundaries | In the another example, you will see how the "Selector Plugin" can expand the CSS's boundaries. This plugin is based in one rollover behavior too, and apply certain className to DOM elements according to mouse movements. |
| 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. |
| 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. |
| 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. |
| How to pass parameters thru the dispatcher | In this example, you will see how to pass parameters from the area's initialization until methods defined within the content. You can use the same trick for delegate, process and jsLoader too. |
| 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. |
| Loading YUI controls and widgets onDemand (jsLoader) | In this case, you will see how to use the injection feature to load widgets onDemand (loading the required JS and CSS files with a logical orderly). |
| 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). |
| 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 | See how to process a HTML/JS code using the dispatcher. |
| Dynamic content with remote scripts (FULLPATH) | Defining the path for the remote assets using the fullpath. |
| 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. |
| 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. |
| Simple use of the selector plugin - simple areas | Use simples CSS rules to modify the look of the active area, including the opacity value... |
| Using the selector plugin to create an accordion control animated (like the apple iPhone website) | See how to use the important moments (onReset, onSelect) to apply certain behaviors to each area, including animations effects. |
| Slice control with a default opened section | Learn how to initialize the accordion control (the first element is opened at the beginning), and the last selected item will remain opened too... |
| Using the selector plugin to define different backgrounds for an area | The important moments can offer a gateway for load or modify certain elements. |
| 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... |
| 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. |
| Inline language definition - Simple example | The language sentences can be defined inline in the header of the document. See how to switch between available languages. |
| Remote language definition - Advanced example | See other examples to learn how to use the translator plugin to load different modules or loading onDemand when you need a language module. |
| Other examples | You can see few widgets in this library that use the Translator plugin to manage the language's sentences. Click here to see how the translator plugin is used to load the remote language sentences to display the labels of the menu's options for the selected language. |