QuickUI Tutorial: Hello, world

Shows how to instantiate a couple of QuickUI controls.

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>
<!--

Welcome to the QuickUI tutorial. This tutorial is a sequence of "fiddles" -- mini web pages with HTML, JavaScript, and CSS -- that demonstrate the basics of using QuickUI. Each page of the tutorial
shows a basic QuickUI concept, and gives you a goal of something to try yourself.

This page loads the jQuery framework, plus three JavaScript and CSS resources (see the "Manage Resources" pane on the left): the quickui.js file for the framework itself, plus .js and .css files for the QuickUI Catalog of common controls.

The code in the JavaScript pane (below) creates two instances of the QuickUI Catalog control called BasicButton, and sets the content of each to a text label. The result of these calls will be two control instances, which are then handed to the jQuery $.append() function to add the controls to a div on the page. The buttons will react to mouse events, but won't do anything else yet.

-->

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

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

CSS

body {
    padding: 1em;
}
body > * {
    margin-bottom: 1em; /* Spread out controls */
}
.ButtonBase {
    margin-right: .5em;
}

JavaScript

/*
YOUR GOAL: You should see two buttons called "Hello" and "World" in the Results pane. Edit the JavaScript below to change the labels for these buttons, then press the Run button in the jsFiddle toolbar above to view the results. Once you've done that, try creating more buttons by adding more BasicButton.create() calls. Be sure to include commas betwen those calls -- they're all parameters to the $.append() function.

Each page of this tutorial also contains a "Next page" link that leads to the next step of the tutorial. You can find the working Next link in the "Result" pane in the page's lower right quarter (below the buttons you've created).
*/

$( "#demo" ).append(
    ButtonBase.create().content( "Hello" ),
    ButtonBase.create().content( "World" )
);