Wednesday, May 19, 2010

YUI Tips

1. YUI Container

Seven Examples of YUI Panels

2. 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"
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:

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

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

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

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( {
          YAHOO.util.Event.removeListener(document, onDocumentMouseDown);
YAHOO.util.Event.addListener(document, 'mousedown', onDocumentMouseDown, null);

4. YUI namespace

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

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

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 () {
} ();

No comments:

Post a Comment