QuickUI Catalog Sandbox

This fiddle includes the resources necessary to use QuickUI Catalog controls (http://quickui.org/catalog).

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">
<script src="http://quickui.org/plugins/quickui.rehydrate.js"></script>
<!--
Demonstrates a simple button subclass that adds some elements
to the content supplied to it.
-->

<button data-control="IconButton">Icon Button</button>
<button data-control="AsteriskButton">Asterisk Button</button>
<button data-control="IconButton">Icon Button</button>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
    padding: 1em;
}

.AsteriskButton {
    color: darkred;
}

JavaScript

// Shows a little document icon to the left of the content.
window.IconButton = Control.subclass({
    className: "IconButton",
    content: [
        "<img src='http://quickui.org/demos/resources/document_alt_stroke_12x16.png'/> ",
        { html: "<span>", id: "IconButton_content" }
    ],
    prototype: {
        // Delegate IconButton's content to the inner span.
        content: Control.chain( "$IconButton_content", "content" )
    },
    tag: "button"
});

// Adds asterisks to its content.
window.AsteriskButton = IconButton.subclass({
    className: "AsteriskButton",
    content: [
        "*",
        { html: "<span>", id: "AsteriskButton_content" },
        "*"
    ],
    generic: true,
    prototype: {
        // Delegate SpecialButton's content to the inner span.
        content: Control.chain( "$AsteriskButton_content", "content" )
    }
});

// Invoke standard QuickUI plugin to instantiate controls.
Control( document.body ).rehydrate();