fuelux/_includes/js/radio.html

<!-- radio
================================================== -->
<div class="fu-docs-section">
  <h1 id="radio" class="page-header">Radio <a href="{{ site.repo }}/blob/{{ site.current_version }}/js/radio.js"><small>radio.js</small></a></h1>

  <p>The radio control provides a customized look and feel that can be standardized across all browsers.</p>
  <div class="fu-example section">

    <div class="radio" id="radioIllustration">
      <label class="radio-custom" data-initialize="radio">
        <input class="sr-only" name="radioEx1" type="radio" value="option1"> Browser-independent radio 1
      </label>
      <label class="radio-custom" data-initialize="radio">
        <input class="sr-only" name="radioEx1" type="radio" value="option2"> Browser-independent radio 2
      </label>
      <label class="radio-custom" data-initialize="radio">
        <input class="sr-only" name="radioEx1" type="radio" value="option3"> Browser-independent radio 3
      </label>
    </div>
  </div>

  <h2 id="radio-usage">Usage</h2>

  <h3 id="radio-usage-javascript">Via JavaScript</h3>
  <p>Call the radio control via JavaScript on the <code>label</code>. The <code>div.radio</code> container is only present for block level stying:</p>
  {% highlight js %}$('#myRadioLabel').radio();{% endhighlight %}

  <h3 id="radio-usage-data-attributes">Via data-attributes</h3>
  <p>The radio will automatically instantiate any radios with <code>data-initialize="radio"</code> located on the <code>&lt;label&gt;</code>. If you add the control markup <em>after page load</em> with <code>data-initialize="radio"</code>, this control initializes on <code>mouseover</code>.

  <div class="fu-callout fu-callout-warning">
    <h4 id="deprecated-radio-markup">Deprecated radio button markup</h4>
    <p>Before v3.7.0, the radio control could be bound with <code>$().radio();</code> or <code>data-initialize="radio"</code> to the <code>div.radio</code> or the <code>input</code> elements. This is no longer supported. Please update your markup and JavaScript to be bound to the <code>label</code> only.</p>
  </div>

  <h3 id="radio-usage-methods">Methods</h3>
  <dl>
    <dt id="radio-usage-methods-check">.radio('check')</dt>
    <dd>Ensures the radio is checked</dd>

    <dt id="radio-usage-methods-destroy">.radio('destroy')</dt>
    <dd>Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.</dd>

    <dt id="radio-usage-methods-disable">.radio('disable')</dt>
    <dd>Ensures the radio is disabled</dd>

    <dt id="radio-usage-methods-enable">.radio('enable')</dt>
    <dd>Ensures the radio is enabled</dd>

    <dt id="radio-usage-methods-is-checked">.radio('isChecked')</dt>
    <dd>Returns <code>true</code> or <code>false</code> indicating the radio's checked state</dd>

    <dt id="radio-usage-methods-uncheck">.radio('uncheck')</dt>
    <dd>Ensures the radio is not checked</dd>
  </dl>

  <h3 id="radio-usage-events">Events</h3>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 150px;">Event Type</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>enabled.fu.radio</td>
          <td>Event fires when radio is enabled</td>
        </tr>
        <tr>
          <td>disabled.fu.radio</td>
          <td>Event fires when radio is disabled</td>
        </tr>
        <tr>
          <td>checked.fu.radio</td>
          <td>Event fires when radio is checked</td>
        </tr>
        <tr>
          <td>unchecked.fu.radio</td>
          <td>Event fires when radio is unchecked</td>
        </tr>
        <tr>
          <td>changed.fu.radio</td>
          <td>Event fires when state of radio is changed</td>
        </tr>
      </tbody>
    </table>
  </div><!-- ./fu-table-responsive -->

  <h2 id="radio-examples">Examples</h2>
  <p>Customized look and feel for radio button element</p>

  <h4 id="radio-examples-default">Default (stacked)</h4>
  <div class="fu-example section">

    <div class="radio">
      <label class="radio-custom" data-initialize="radio">
        <input class="sr-only" name="radioEx1" type="radio" value="option1">
        Browser-independent radio unchecked on page load
      </label>
    </div>

    <div class="radio checked">
      <label class="radio-custom" data-initialize="radio">
        <input class="sr-only" checked="checked" name="radioEx1" type="radio" value="option2">
        Browser-independent radio checked on page load
      </label>
    </div>

    <div class="radio checked">
      <label id="lbl3" class="radio-custom" data-initialize="radio">
        <input id="radio3" class="sr-only" checked="checked" disabled="disabled" name="radio1b" type="radio">
        <span class="radio-label">Disabled custom appearance radio selected on page load</span>
      </label>
    </div>

    <div class="radio">
      <label class="radio-custom" data-initialize="radio">
        <input class="sr-only" disabled="disabled" name="radioEx2" type="radio" value="option3">
        Disabled browser-independent radio unchecked on page load
      </label>
    </div>
  </div>
{% highlight html %}
<div class="radio">
  <label class="radio-custom" data-initialize="radio" id="myCustomRadioLabel">
    <input class="sr-only" name="radioEx1" type="radio" value="option1">
    Browser-independent radio unchecked on page load
  </label>
</div>

<div class="radio checked">
  <label class="radio-custom" data-initialize="radio" id="myCustomRadioLabel2">
    <input class="sr-only" checked="checked" name="radioEx1" type="radio" value="option2">
    Browser-independent radio checked on page load
  </label>
</div>

<div class="radio checked">
  <label class="radio-custom disabled" data-initialize="radio" id="myCustomRadioLabel3">
    <input class="sr-only" checked="checked" disabled="disabled" name="radio1b" type="radio">
    <span class="radio-label">Disabled custom appearance radio selected on page load</span>
  </label>
</div>

<div class="radio">
  <label class="radio-custom disabled" data-initialize="radio" id="myCustomRadioLabel4">
    <input class="sr-only" disabled="disabled" name="radioEx2" type="radio" value="option3">
    Disabled browser-independent radio unchecked on page load
  </label>
</div>
{% endhighlight %}

  <h4 id="radio-examples-inline">Inline radio</h4>
  <p>Use the <code>.radio-inline</code> classes on radios for controls that appear on the same line.</p>
  <div class="fu-example section">
    <label class="radio-custom radio-inline" data-initialize="radio">
      <input class="sr-only"  name="radioEx2" type="radio" value="option1"> 1
    </label>
    <label class="radio-custom radio-inline" data-initialize="radio">
      <input class="sr-only" checked="checked" name="radioEx2" type="radio" value="option2"> 2
    </label>
    <label class="radio-custom radio-inline disabled" data-initialize="radio">
      <input class="sr-only" disabled="disabled" name="radioEx2" type="radio" value="option3"> 3
    </label>
  </div>
{% highlight html %}
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomRadioLabel5">
  <input class="sr-only" name="radioEx2" type="radio" value="option1"> 1
</label>
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomRadioLabel6">
  <input class="sr-only" checked="checked" name="radioEx2" type="radio" value="option2"> 2
</label>
<label class="radio-custom radio-inline disabled" data-initialize="radio" id="myCustomRadioLabel7">
  <input class="sr-only" disabled="disabled" name="radioEx2" type="radio" value="option3"> 3
</label>
{% endhighlight %}

  <div class="fuelux-mctheme-do-not-use">

  <h4 id="radio-examples-addon">Addon radios</h4>
  <p>Place any radio option within an input group's addon instead of text.</p>
  <div class="fu-example section">
    <div class="input-group">
      <label class="input-group-addon radio-custom radio-inline" data-initialize="radio">
        <input class="sr-only" type="radio" value="option1">
      </label>
      <input type="text" class="form-control">
    </div>
  </div>
{% highlight html %}
  <div class="input-group">
    <label class="input-group-addon radio-custom radio-inline" data-initialize="radio">
      <input class="sr-only" type="radio" value="option1">
    </label>
    <input type="text" class="form-control">
  </div>
{% endhighlight %}

  </div>


  <h4 id="radio-examples-element-toggling">Element toggling radios</h4>
  <p>Use the <code>data-toggle="{{selector}}"</code> to automatically show or hide elements matching the selector within the body upon check or uncheck. This function works with any <a href="https://api.jquery.com/category/selectors/">jQuery selector</a>.
  </p>
  <div class="fu-example section">
    <div class="radio">
      <label class="radio-custom" data-initialize="radio">
        <input class="sr-only" data-toggle="#radioToggleID" name="radioEx3" type="radio" value="option1">
        Toggles element with matching ID
      </label>
    </div>
    <label class="radio-custom radio-inline" data-initialize="radio">
      <input class="sr-only" data-toggle=".radioToggleCLASS" name="radioEx3" type="radio" value="option1">
      Toggles elements with matching class.
    </label>

    <div class="alert bg-info hide" id="radioToggleID">ID-toggling container</div>
    <div class="alert bg-success hide radioToggleCLASS">Class-toggling container</div>
    <div class="alert bg-success hide radioToggleCLASS">Class-toggling container</div>
  </div>
{% highlight html %}
<div class="radio">
  <label class="radio-custom" data-initialize="radio" id="myCustomRadioLabel8">
    <input class="sr-only" data-toggle="#radioToggleID" name="radioEx3" type="radio" value="option1">
    Toggles element with matching ID
  </label>
</div>
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomRadioLabel9">
  <input class="sr-only" data-toggle=".radioToggleCLASS" name="radioEx3" type="radio" value="option1">
  Toggles elements with matching class
</label>


<div class="alert bg-info" id="radioToggleID">ID-toggling container</div>
<div class="alert bg-success radioToggleCLASS">Class-toggling container</div>
<div class="alert bg-success radioToggleCLASS">Class-toggling container</div>
{% endhighlight %}

  <h4 id="radio-examples-highlighting">Highlighting radios</h4>
  <p>Use the <code>.highlight</code> class to add a background highlight upon check.
  </p>
  <div class="fu-example section">
    <div class="radio highlight">
      <label class="radio-custom highlight" data-initialize="radio">
        <input class="sr-only" name="radioEx4" type="radio" value="option1">
        This block-level radio will highlight on check.
      </label>
    </div>
    <label class="radio-custom radio-inline highlight" data-initialize="radio">
      <input class="sr-only" name="radioEx4" type="radio" value="option2">
      This inline radio will highlight on check.
    </label>
  </div>
  {% highlight html %}
<div class="radio highlight" id="myCustomRadioLabel10">
  <label class="radio-custom highlight" data-initialize="radio">
    <input class="sr-only" name="radioEx4" type="radio" value="option1">
    This block-level radio will highlight on check.
  </label>
</div>
<label class="radio-custom radio-inline highlight" data-initialize="radio" id="myCustomRadio11">
  <input class="sr-only" name="radioEx4" type="radio" value="option2">
  This inline radio will highlight on check.
</label>
  {% endhighlight %}
</div>