YUI Handbook

Note : AUI (Alloy User Interface) is a wrapper to YUI (Yahoo User Interface), so all JavaScript syntax will remain same.

Lets explore some features of YUI.

1. Loading Libraries on demand
In YUI you can load the libraries that are required for your Website.

ex :

2. Node Selector
As of Jquery YUI comes with a powerful node selector feature. Lets see few examples.


Y.all("element")  // This is to select one or more element
Y.one("element") //This is to select the first occurrence of the element

Note : If the element is not preset if DOM then Y.one will give NullPointer Error, but Y.all will not show any error. So while using Y.one you can wrap it with a if block for safety.

if (Y.one("#myDiv"))
  Y.one("#myDiv").set('innerHTML','I am present');

Few Selector Examples

Y.one("#mainNav") //Select the div with id mainNav
Y.all(".tab") //Select all elements with class as tab;
Y.all('#myDiv span') //Select all span elements with the div id myDiv
Y.all('.c1 .c2') //Select all elements with class as c2 that are within a element of class as c1
Y.all('.mybutton input') //Select all input elements within the container having class as mybutton
Y.all('table.my-table tr') //Select all tr of table with class as my-table

Few more Examples :

A.one("#myDiv").html() //Geting innerhtml
A.one("#myDiv").hide(); or .show() //for show/hide
A.one("#mydiv").simulate("click"); //Click Simulatoin
A.all('.myClass li a').item(0)  // selecting item my order
A.one('.myClass').set('innerHTML',A.one('#myDiv').get('innerHTML')); // get and set innerHtml
A.one('#myDiv').set('text',"Updated Text"); //Seting text in anchor
A.one('#myDiv').removeClass('myClass'); //Remove class


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: