SOURCE CODE: Button Types
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Button Types | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta name="keywords" content="Uize.Widget.Button"/>
  <meta name="description" content="See a demonstration of different HTML implementations for the basic button widget. Play with the enabled, busy, and selected states of the buttons."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    /*** styles for frames type button ***/
      .framesButton {
        position:relative;
        width:200px;
        height:20px;
        overflow:hidden;
      }
      .framesButtonFrame {
        position:absolute;
        left:0px;
        top:0px;
        text-align:center;
        font-family:Arial;
        font-size:16px;
        font-weight:bold;
        width:200px;
        height:20px;
        color:#444;
        background:#abb;
        border:none;
      }
      .framesButtonEvents {
        width:200px;
        height:20px;
        border:none;
        background:none;
      }
      .framesButtonGrayed {
        color:#abb;
        background:#bcc;
      }
      .framesButtonOver {
        color:#222;
        background:#bcc;
      }
      .framesButtonActive {
        color:#000;
        background:#fff;
      }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="document-title">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
  Button Types
  <div id="page-actions" class="pageActions">
    <a href="source-code/button-types.html" class="buttonLink">SOURCE</a>
  </div>
</h1>

<div class="main">
  <!-- frames type button -->

  <div id="page_framesButton" class="framesButton">
    <div id="page_framesButton-frames" style="position:relative; left:0px; top:0px;">
      <div class="framesButtonFrame framesButtonGrayed" style="top:0px;">FRAMES BUTTON</div>
      <div class="framesButtonFrame" style="top:20px;">FRAMES BUTTON</div>
      <div class="framesButtonFrame framesButtonOver" style="top:40px;">FRAMES BUTTON</div>
      <div class="framesButtonFrame framesButtonActive" style="top:60px;">FRAMES BUTTON</div>
    </div>
  </div>

  <br/>

  <!-- programmatic interface examples -->

  <div class="programmaticInterface">
    <a href="javascript://" class="linkedJs" title="framesButton.set ({enabled:framesButton.get ('enabled') === false ? 'inherit' : false})">TOGGLE ENABLED</a>
    &nbsp;|&nbsp;
    <a href="javascript://" class="linkedJs" title="framesButton.set ({busy:framesButton.get ('busy') === true ? 'inherit' : true})">TOGGLE BUSY</a>
    &nbsp;|&nbsp;
    <a href="javascript://" class="linkedJs" title="framesButton.set ({selected:!framesButton.get ('selected')})">TOGGLE SELECTED</a>
  </div>

  <!-- classes type button -->

  <hr/>

  <div id="page_classesButton" class="button" style="width:130px;"><span id="page_classesButton-text">CLASSES BUTTON</span></div>

  <br/>

  <!-- programmatic interface examples -->

  <div class="programmaticInterface">
    <a href="javascript://" class="linkedJs" title="classesButton.set ({enabled:classesButton.get ('enabled') === false ? 'inherit' : false})">TOGGLE ENABLED</a>
    &nbsp;|&nbsp;
    <a href="javascript://" class="linkedJs" title="classesButton.set ({busy:classesButton.get ('busy') === true ? 'inherit' : true})">TOGGLE BUSY</a>
    &nbsp;|&nbsp;
    <a href="javascript://" class="linkedJs" title="classesButton.set ({selected:!classesButton.get ('selected')})">TOGGLE SELECTED</a>
    &nbsp;|&nbsp;
    <a href="javascript://" class="linkedJs" title="classesButton.set ({text:'NEW BUTTON TEXT'})">CHANGE BUTTON TEXT</a>
  </div>
  <br/>
</div>

<!-- JavaScript code to make the HTML "come alive" -->

<script type="text/javascript">

Uize.module ({
  required:[
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Button'
  ],
  builder:function () {
    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** create and wire up the Uize.Widget.Button instance for the frames type button ***/
      var framesButton = page.addChild ('framesButton',Uize.Widget.Button);
      framesButton.wire ('Click',function () {alert ('you clicked the frames button')});

    /*** create and wire up the Uize.Widget.Button instance for the classes type button ***/
      var classesButton = page.addChild ('classesButton',Uize.Widget.Button);
      classesButton.wire ('Click',function () {alert ('you clicked the classes button')});

    /*** wire up the page widget ***/
      page.wireUi ();
  }
});

</script>

</body>
</html>
SOURCE CODE: Button Types VIEW EXAMPLE

SOURCE CODE: Button Types
VIEW EXAMPLE
