e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<style type="text/css" scoped>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai #mylistbox em {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai font-style:normal;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border:1px solid #aaa;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai padding:2px;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border: solid 1px #000;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color:#fff;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai white-space:nowrap;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-top: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-bottom: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border: none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-option,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox-option {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai cursor:default;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-image:none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-position:outside;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-type:none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-content,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-label {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai display: block;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai padding: .25em .5em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai overflow:auto;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox .yui3-option-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-left:.5em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-label {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai font-weight: bold;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-selected {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color: #cccccc;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-focused {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai outline: none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color: blue;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai color: #fff;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="intro">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <p>This is an advanced example, in which we create a ListBox widget with nested Option widgets, by extending the base `Widget` class, and adding `WidgetParent` and `WidgetChild` extensions, through `Base.build`.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <p>The <a href="../tabview">TabView</a> component that is included in the YUI 3 library, is also built using the WidgetParent and WidgetChild extensions.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="example">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai {{>widget-parentchild-listbox-source}}
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>The WidgetParent and WidgetChild Extensions</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p><a href="{{apiDocs}}/WidgetParent.html">WidgetParent</a> is an extension, designed to be used with `Base.build` to create a class of Widget which is designed to contain child Widgets (for example a Tree widget, which contains TreeNode children).
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiWidgetParent itself augments <a href="{{apiDocs}}/ArrayList.html">ArrayList</a> providing a convenient set of array iteration and convenience methods, allowing users of your class to easily work with parent's list of children.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p><a href="{{apiDocs}}/WidgetChild.html">WidgetChild</a> is also an extension, designed to be used with `Base.build` to create a class of Widget which is designed to nested inside parent Widgets (for example a TreeNode widget, which sits inside a Tree widget).</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>A Widget can be built with both the WidgetParent and WidgetChild extensions (it can be both a Parent and a Child), in cases where we want to support multi-level hierarchies, such as the ListBox example below.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>In addition to providing the basic support to manage (add/remove/iterate/render) children the Widget Parent/Child implementations also provides support for both single and multiple selection models.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Using WidgetParent and WidgetChild to Create the ListBox Class</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>For ListBox, since we're creating a new class from scratch, we use the sugar version of `Base.build`, called `Base.create`, which allows us to easily create a new class and define it's prototype and static properties/methods, in a single call, as shown below:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai// Create a new class, ListBox, which extends Widget, and mixes in both the WidgetParent and WidgetChild
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai// extensions since we want to be able to nest one ListBox inside another, to create heirarchical listboxes
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiY.ListBox = Y.Base.create("listbox", Y.Widget, [Y.WidgetParent, Y.WidgetChild], {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Prototype Properties for ListBox
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Static Properties for ListBox
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>We can then go ahead and fill out the prototype and static properties we want to override in our ListBox implementation, while Widget, WidgetParent and WidgetChild provide the basic Widget rendering and parent-child relationship support. Comments inline below provide the background:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h4>Prototype Method and Properties</h4>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiY.ListBox = Y.Base.create("listbox", Y.Widget, [Y.WidgetParent, Y.WidgetChild], {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // The default content box for ListBoxes will be a UL (Widget uses a DIV by default)
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai CONTENT_TEMPLATE : "<ul></ul>",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup Custom Listeners
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai bindUI: function() {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup custom focus handling, using the NodeFocusManager plugin
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // This will help us easily crete next/previous item handling using the arrow keys
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this.get("boundingBox").plug(Y.Plugin.NodeFocusManager, {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai descendants: ".yui3-option",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai next: "down:40", // Down arrow
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai previous: "down:38" // Up arrow
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai circular: true
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this.get("boundingBox").on("contextmenu", function (event) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup listener to control keyboard based single/multiple item selection
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this.on("option:keydown", function (event) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai direction = (keyCode == 40);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (this.get("multiple")) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (keyCode == 40 || keyCode == 38) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this._selectNextSibling(item, direction);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this._selectNextSibling(item, direction);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (keyCode == 13 || keyCode == 32) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai item.set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup listener to control mouse based single/multiple item selection
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this.on("option:mousedown", function (event) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (this.get("multiple")) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai item.set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai item.set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai item.set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Helper Method, to find the correct next sibling, taking into account nested ListBoxes
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai _selectNextSibling : function(item, direction) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai var parent = item.get("parent"),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai method = (direction) ? "next" : "previous",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Only go circular for the root listbox
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai circular = (parent === this),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai sibling = item[method](circular);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (sibling) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // If we found a sibling, it's either an Option or a ListBox
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (sibling instanceof Y.ListBox) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // If it's a ListBox, select it's first child (in the direction we're headed)
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai sibling.selectChild((direction) ? 0 : sibling.size() - 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // If it's an Option, select it
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai sibling.set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // If we didn't find a sibling, we're at the last leaf in a nested ListBox
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai parent[method](true).set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // The markup template we use internally to render nested ListBox children
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai NESTED_TEMPLATE : '<li class="{nestedOptionClassName}"><em class="{labelClassName}">{label}</em></li>',
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai renderUI: function () {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Handling Nested Child Element Rendering
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (this.get("depth") > -1) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai var tokens = {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai labelClassName : this.getClassName("label"),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai nestedOptionClassName : this.getClassName("option"),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai label : this.get("label")
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai liHtml = Y.substitute(this.NESTED_TEMPLATE, tokens),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai boundingBox = this.get("boundingBox"),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai parent = boundingBox.get("parentNode");
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai} { /* static properties */ });
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h4>Static Properties</h4>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The only static property we're interested in defining for the ListBox class is the `ATTRS` property. Comments inline below provide the background:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Define any new attributes, or override existing ones
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // We need to define the default child class to use,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // when we need to create children from the configuration
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // object passed to add or to the "children" attribute (which is provided by WidgetParent)
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // In this case, when a configuration object (e.g. { label:"My Option" }),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // is passed into the add method,or as the value of the "children"
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // attribute, we want to create instances of Y.Option
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai defaultChildType: {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai value: "Option"
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup Label Attribute
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Using WidgetChild to Create the Option (leaf) Class</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The Option class is pretty simple, and largely just needs the attribute and API provided by WidgetChild. We only need to over-ride the default templates and tabIndex handling:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiY.Option = Y.Base.create("option", Y.Widget, [Y.WidgetChild], {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Override the default DIVs used for rendering the bounding box and content box.
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai CONTENT_TEMPLATE : "<em></em>",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai BOUNDING_TEMPLATE : "<li></li>",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Handle rendering the label attribute
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai renderUI: function () {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this.get("contentBox").setContent(this.get("label"));
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup Label Attribute
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Override the default tabIndex for an Option,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // since we want FocusManager to control keboard
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // based focus
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Adding The Code As A "listbox" Custom Module</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>This example also shows how you can package code for re-use as a module, by registering it through the `YUI.add` method, specifying any requirements it has (the packaged code is available in ./assets/listbox.js).</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiYUI.add('listbox', function(Y) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai}, '3.1.0' ,{requires:['substitute', 'widget', 'widget-parent', 'widget-child', 'node-focusmanager']});
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Using the Custom "listbox" Module</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>To create an instance of a ListBox, we ask for the "listbox" module we packaged in the previous step, through `YUI().use("listbox")`:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai "listbox": {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai requires: ["substitute", "widget", "widget-parent", "widget-child", "node-focusmanager"]
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai }).use("listbox", function (Y) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Create the top level ListBox instance, and start it off with
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // 2 children (the defaultChildType will be used to create instances of Y.Option with the
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // children configuration passed in below).
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai var listbox = new Y.ListBox({
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai id:"mylistbox",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai width:"13em",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai height:"15em",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item One" },
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item Two" }
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>We can also use the `add` method provided by WidgetParent, to add children after contruction, and then render to the DOM:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Then we add a nested ListBox which itself has 2 children, using
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // the add API provided by WidgetParent
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai type: "ListBox",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai label: "Item Three",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item Three - One" },
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item Three - Two" }
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // One more Option child
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai listbox.add({ label: "Item Four" });
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // One more Option child, using providing an actual
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // instance, as opposed to just the configuration
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai new Y.Option({ label: "Item Five" })
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // And finally, a last nested ListBox, again with
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // 2 children
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai type: "ListBox",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai label: "Item Six",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item Six - One" },
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item Six - Two" }
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Render it, using Widget's render method,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // to the "#exampleContainer" element.
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai listbox.render("#exampleContainer");
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The ListBox fires selectionChange events, every time it's selection state changes (provided by WidgetParent), which we can listen and respond to:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai listbox.after("selectionChange", function(e) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai var selection = this.get("selection");
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (selection instanceof Y.ListBox) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai selection = selection.get("selection");
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (selection) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai Y.one("#selection").setContent(selection.get("label"));
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>The CSS</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border: solid 1px #000;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color:#fff;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai white-space:nowrap;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-top: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-bottom: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border: none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-option,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox-option {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai cursor:default;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-image:none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-position:outside;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-type:none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-content,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-label {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai display: block;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai padding: .25em .5em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai overflow:auto;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox .yui3-option-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-left:.5em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-label {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai font-weight: bold;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-selected {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color: #cccccc;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-focused {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai outline: none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color: blue;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai color: #fff;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h2>Complete Example Source</h2>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai{{>widget-parentchild-listbox-source}}