Delegating content to a subelement

Demonstrates how a control class can delegate its content() property to a subelement. Here, a custom UserTile class delegates its content() to a <span> called "name".

by quickui

HTML

<script src="http://quickui.org/release/quickui.js"></script>
<script src="http://quickui.org/release/quickui.catalog.js"></script>
<link rel="stylesheet" href="http://quickui.org/release/quickui.catalog.css">

CSS

body {
    padding: 2em;
}

JavaScript

var UserTile = BasicButton.subclass({
    className: "UserTile",
    generic: true,
    content: [
        {
            control: FlickrInterestingPhoto,
            css: {
                "margin-right": "0.5em",
                "vertical-align": "middle",
            },
            photoSize: "s"
        },
        {
            html: "<span/>",
            id: "name"
        }
    ],
    prototype: {
        /*
         * Delegates the control's content() property to
         * the span above with ID "name". See
         * http://quickui.org/tutorial/control-chain-helper.html
         * for details of concisely defining a property like this
         * that invokes a chain of jQuery calls.
         */
        content: Control.chain( "$name", "content" )
    }
})

$( document.body ).append(
    ListBox.create()
        .itemClass( UserTile )
        .items([
            "Alice",
            "Bob",
            "Carol",
            "David",
            "Ellen"
        ])
);