Bubbling Library > Examples

Bubbling Technique (YUI-CMS:YAHOO.CMS.Bubble): Tutorials


Examples of Using the Bubbling Technique: Simple Actions

Benefit from the bubbling technique: 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 Behavior Definition: See this advanced example to learn more about the global behaviors (NEW)

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 (NEW)

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.

Processing all the clicks on the page

Now you will see how to use a global behavior to create a dynamic navigable website (the links in the left menu load the corresponding content in the central area of the page using the YUI Connection Manager). All the clicks are wrapped by the global behavior, and certain actions are used, depending of the target for each 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...

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.

How to deal with floating elements: Repainting the viewport (NEW)

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.