QuickUI Tutorial: Controls are jQuery instances

by quickui

HTML

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

Controls are jQuery instances.

Rather than creating a new inheritance scheme, QuickUI uses the inheritance system built into jQuery. All QuickUI controls inherit from a base Control class, which in turn inherits from the base jQuery class.

Because all control classes ultimately derive from the base jQuery class, all QuickUI control instances are also jQuery instances. You can show and hide control instances with $.show() and $.hide(), you can manipulate a control’s CSS styling with $.css(), you can animate a control with $.animate(), and so on.

-->

<div id="demo"></div>

<a href="/quickui/krubE" target="_top">Next page</a>

CSS

body { padding: 1em; }
#demo > * {
    margin-bottom: 1em;
}

JavaScript

/*
YOUR GOAL: Change the $.toggle() call below to jQuery $.fadeToggle().
Add a duration parameter to the jQuery $.fadeToggle() effect. The duration can be a string like "fast" or "slow", or a number in milliseconds. (For a complete reference, see http://api.jquery.com/fadeToggle/.)
*/

var $comboBox = ColorSwatchComboBox.create()
    .content( "Green" )
    .items([ "Red", "Green", "Blue" ]);

var $button = ButtonBase.create()
    .content( "Toggle" )
    .click( function() {
        $comboBox.toggle();
    });

$( "#demo" ).append(
    $( "<div/>" ).append( $button ),
    $comboBox
);