Simple Use Case: YAHOO.plugin.Lighter
Markup (lighter container element):
<div class="hotarea1 yui-cms-selector">
<div class="yui-cms-item">
Hot item #1
</div>
<div class="yui-cms-item">
Hot item #2
</div>
</div>
Script:
YAHOO.plugin.Lighter.add( 'hotarea1' );
The Ligther Manager explore the areas with className "hotarea1" and highlight the items with className "yui-cms-item" on mouseover event.
Singleton: YAHOO.plugin.Lighter
YAHOO.plugin.Lighter.add(str className, obj config);
Arguments:
(1) className: className of the area (don't matter if the markup exist or no, the lighter is based on the "event-driven technique" to monitoring the hot areas).
(2) Configuration Object: JS object defining configuration properties for the area. See Configuration section for full list.
Solutions:
YAHOO.plugin.Lighter.add( "myhotareas", {
persistent: false,
onSelect: function ( element, area ) {
alert ( 'Highlighting the element inside the area...');
},
onReset: function ( area ) {
alert ( 'Removing the highlighting from all the elements inside this area.' );
}
});
Leave the selected area highlighted:
Use the attribute "persistent" in the configuration to leave the last selected area highlighted when the mouse go out of this area.
Use the CSS rules to customize your lighter expirience:
#leftcolumn div.myhotarea.yui-cms-selector div.yui-cms-item {
border: 1px solid #eeeeee;
background-color: #ffffff;
margin: 5px;
padding: 5px;
}
#leftcolumn div.myhotarea.yui-cms-selector div.yui-cms-item.selected {
border: 1px solid #333333;
background-color: #cccccc;
}
The lighter add a new className "selected" to the item (yui-cms-item) when the mouse is over the element.
Key Interesting Moments in Lighter
| Events | Fires | Arguments |
| onSelect | ...on mouseover a highlightable item element | [0] element: item DOM ref, [1] parent: area DOM ref |
| onReset | ...when the lighter reset all items inside an area | [0] parent: area DOM ref |
Key Lighter Configuration Options
| Option (type) | Default | Description |
| className (s) | null | The className of the explorable areas |
Lighter DOM Structure
classname: yui-cms-selector
|
Facts
- Use the same className for several areas inside the document
- Use the onSelect and onReset events to create your our functionalities
- Use the CSS rules to create different behaviors for the same className
See the API Docs at full screen in a new window:
http://www.bubbling-library.com/sandbox/api/index.hml