source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/docs/button.html@ 24245

<p>
<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Button</h1>
  <div id="overview">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles. 
</p><p>In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons: Their associated label is styled to appear as the button, while the underlying input is updated on click.
</p>
Buttons can be grouped using the buttonSet method, which should be always applied for radio buttons.
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
<li>UI Widget</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="300">
A simple jQuery UI Button.<br />
</p>
<pre>$(&quot;button&quot;).button();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link type=&quot;text/css&quot; href=&quot;http://jqueryui.com/latest/themes/base/ui.all.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/jquery.ui.core.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/jquery.ui.widget.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/jquery.ui.button.js&quot;&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
    $(&quot;button&quot;).button();
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style="font-size:62.5%;"&gt;
  
&lt;button&gt;Button label&lt;/button&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      
<li class="option" id="option-text">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-text">text</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Whether to show any text - when set to false (display no text), icons (see icons option) must be enabled, otherwise it'll be ignored.</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a button with the <code>text</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').button({ text: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>text</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var text = $('.selector').button('option', 'text');
//setter
$('.selector').button('option', 'text', false);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-icons">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-icons">icons</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Options</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">{ primary: null, secondary: null }</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Icons to display, with or without text (see text option). The primary icon is displayed on the left of the label text, the secondary on the right. Value for the primary and secondary properties must be a classname (String), eg. "ui-icon-gear". For using only a primary icon: icons: {primary:'ui-icon-locked'}. For using both primary and secondary icon: icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a button with the <code>icons</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').button({ icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} });</code></pre>
</dd>

    
<dt>
  Get or set the <code>icons</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var icons = $('.selector').button('option', 'icons');
//setter
$('.selector').button('option', 'icons', {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-label">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-label">label</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">HTML content of the button, or value attribute</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>Text to show on the button. When not specified (null), the element's html content is used, or its value attribute when it's an input element of type submit or reset; or the html content of the associated label element if its an input of type radio or checkbox</p>
  </div>
  <div class="option-examples">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a button with the <code>label</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').button({ label: "custom label" });</code></pre>
</dd>

    
<dt>
  Get or set the <code>label</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var label = $('.selector').button('option', 'label');
//setter
$('.selector').button('option', 'label', "custom label");</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">Events</h2>
    <ul class="events-list">
      
<li class="event" id="event-click">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-click">click</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">click</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>Usually the native click event, with the exception of keyboard-triggered click with the space key on anchors and generally on checkboxes and radio buttons.</p>
  </div>
  <div class="event-examples">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>click</code> event as an init option.
</dt>
<dd>
<pre><code>$('.selector').button({
   click: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>click</code> event by type: <code>click</code>.
</dt>
<dd>
<pre><code>$('.selector').bind('click', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( 'destroy'







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Remove the button functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( 'disable'







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Disable the button.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( 'enable'







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Enable the button.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.button( 'option'

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>Get or set any button option. If no value is specified, will act as a getter.</p>
  </div>
</li>


    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Button plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.button.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  &lt;button class=&quot;<strong>ui-button</strong> ui-button-text-only ui-widget ui-state-default ui-corner-all&quot;/&gt;&lt;span class=&quot;ui-button-text&quot;&gt;Button Label&lt;/span&gt;&lt;/button&gt;
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the button plugin, not markup you should use to create a button. The only markup needed for that is &lt;button&gt;Button Label&lt;/button&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 16142 bytes
Post-expand include size: 22124 bytes
Template argument size: 11318 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3767-1!1!0!!en!2 and timestamp 20100128052926 -->