YUI Tips

1. YUI Container
http://developer.yahoo.com/yui/container/

Seven Examples of YUI Panels
http://icant.co.uk/sandbox/yuipanel/

2. YUI Event
http://developer.yahoo.com/yui/event/

YAHOO.util.Event.addListener(el, sType, fn, obj, overrideContext)
el:  id, or a collection of ids
sType: the type of event to append (such as "click" http://www.quirksmode.org/dom/events/)
fn: the method the event invokes
obj: an arbitrary object that will be passed as a parameter to the handler
overrideContect: if true, the obj passed in becomes the execution context of the listener; if an object, this object becomes the execution context

YAHOO.util.Subscriber( fn , obj , overrideContext )
fn: the function to execute
obj: an object to be passed along when the event fires
overrideContext: If true, the obj passed in becomes the execution context of the listener

There are 2 main types of event subscriptions:

//DragDrop
var dd = new YAHOO.util.DD('dd');
dd.on('dragEvent', function() { });

//Panel
var panel = new YAHOO.widget.Panel('panel');
panel.renderEvent.subscribe(function() {});

//Calendar
var cal = new YAHOO.widget.Calendar('cal');
cal.selectEvent.subscribe(function() {});

//Editor
var editor = new YAHOO.widget.Editor('editor', {});
editor.on('afterRender', function() {});



3. Define anonymous function 
Defining an anonymous function in order to keep all variables out of the global scope. Inside the anonymous function, define some shortcuts to utils that will be used frequently (Dom and Event).

(function () {
    var Event = YAHOO.util.Event,
    Dom = YAHOO.util.Dom;
}());


Inside the the anonymous function, use the onDOMReady method of the Event utility to instantiate an Overlay and a Button when the page's DOM is ready to be scripted.

Event.onDOMReady(function () {
    var oCalendarMenu;

    // Create an Overlay instance to house the Calendar instance
    oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu", { visible: false });

    // Create a Button instance of type "menu"

    var oButton = new YAHOO.widget.Button({
       type: "menu",
       id: "calendarpicker",
       label: "Choose A Date",
       menu: oCalendarMenu,
       container: "datefields" });
});

3. YUI Panel
Click outside of a panel to close it
var treePanel = new YAHOO.widget.Panel(...);

function isInsideTreePanel(clicked_element) {
    var current_element = clicked_element;
    while(current_element && current_element != document.body) {
       if (current_element == treePanel.element) {
          return true;
       }
    current_element = current_element.parentNode;
    }
    return false;
}

function onDocumentMouseDown(e) {
    if (treePanel.cfg.getProperty('visible')) {
       if (!isInsideTreePanel(e.target)) {
          treePanel.hide();
          YAHOO.util.Event.removeListener(document, onDocumentMouseDown);
       }
    }
}

treePanel.show();
YAHOO.util.Event.addListener(document, 'mousedown', onDocumentMouseDown, null);

4. YUI namespace
http://www.yuiblog.com/blog/2007/06/12/module-pattern/

YAHOO.namespace("mySwitch");
YAHOO.mySwitch.panelTable = new YAHOO.widget.Panel("panelTable");

Error: missing ; before statement
if trying to create a public method with “var” keyword

YAHOO.namespace("mySwitch");
var YAHOO.mySwitch.panelTable = new YAHOO.widget.Panel("panelTable");


parentheses () at the end of function: cause anonymous function to execute immediately

YAHOO.myProject.myModule = function () {
} ();