YUI Bubbling Core

Bubbling CORE

The first thing you need to do before trying to use this utility, is to read this article in the Yahoo! User Interface Blog "The Bubbling Technique & Custom Event, YUI's Secret Weapon", to learn the principles of this pattern.

The Bubbling CORE Object require the inclusion of the YUI scripts: yahoo, dom, event or utilities. Once the necessary scripts are included in the pages, and the inclusion of the bubbling.js script, all the default behaviors layers (navigate, property, key, repaint, rollover and rollout) will be initialized automatically, using the default configuration, which means that you can subscribe behaviors immediately after the inclusion of the bubbling core. Each behaviors layer have an Custon Event, which means that you can add as many listeners as you need, see the list below:

  • navigate
    This layer will catch the click, and action over links.
  • property
    This layer will catch the right click, and control click in mac and opera.
  • key
    This layer will catch the keyboard events.
  • repaint
    This special layer will catch the resize window, font resize, and scrolling events. (the last two events require extra initialization, see the documentation)
  • rollover
    This layer will catch the mouse movement, and will be fired on mouseover.
  • rollout
    This layer will catch the mouse movement, and will be fired on mouseout.

The bubbling core is the keystone for building a Rich Internet Application, and will allow you to cut the big application down into manageable chunks and components and you can plan the detailed usability, information architecture and accessibility for each component separately. This allows you to develop in parallel with the design or information architecture team and results in reusable components for other applications.

Continue reading about the Bubbling Core…


can\'t locate basic basic info

trying to get info on these basic behaviors...
this link goes nowhere..

Continue reading about the Bubbling Coreā€¦

can't seem to find the api for the bubbling core. the links just seem to go round and round...

Comment by Charles - November 7, 2008

RE: cannot locate basic basic info

Hello Charles:

Unfortunately we don't have the full API for the bubbling core, just a bunch of example. But I have published some articles related with the Bubbling Core in the YUIBlog, here are two of them:



There is the theory and probably all the necessary information to understand the whole concept. Definitely we need the API, and a well documented source codes. I have been working in a new version on top of the YUI 3.x, and this new version will be documented using the YUIDoc.

If you have any particular question... your best bet is the YUI Forum, or you can email to me directly and I will try to help you.

Comment by Caridy - November 7, 2008

circular links

Charles does have a good point- I've found at least two self-referencing links on this page: at the end of the Bubbling Core section, and at the bottom of the page. These can be very confusing to the newcomer. I would recommend you remove the links pointing back to this page as they throw people off the "scent of information" by turning them around in a circle.

Comment by Andy - November 12, 2008
Bubbling for YUI 3.x

Dispatcher (gallery-dispatcher)
The Dispatcher satisfies a very common need of developers using the YUI library: dynamic execution of Ajax response content. (new)

Node Accordion (gallery-node-accordion)
The Accordion Node Plugin makes it easy to transform existing markup into an accordion element with expandable and collapsible elements. Elements are easy to customize, and only require a small set of dependencies. (new)

Event Binder (gallery-event-binder)
Binding user actions until a particular YUI instance become ready, and the listeners defined before flushing those events through a queue. This will help to catch some early user interactions due the on-demand nature of YUI 3. (new)

Preload (gallery-preload)
Port of Stoyan Stefanov's JavaScript preload() function. It also has built-in support for Timer Idle to preload files only when the user is idle to avoid any overhead during the initial loading process. (new)

Parent Window Utility (gallery-parent-window)
This utility provides a set of functionalities to interact with the parent window. (new)

- See more modules by Caridy.

Bubbling Library is free open source software under the BSD License

(c) 2006 - 2010 Caridy Patino. All Rights Reserved.

This is one of my side projects, if you need something, just ask!