fuelux/_includes/js/checkbox.html

<!-- checkbox
================================================== -->
<div class="fu-docs-section">
  <h1 id="checkboxes" class="page-header">Checkboxes <small>checkboxes.js</small></h1>

  <h2 id="checkboxes-examples">Examples</h2>
  <p>Add a custom look and feel for checkbox element.</p>

  <h4>Default (stacked)</h4>
  <div class="fu-example section">
    <div id="myCheckbox" class="checkbox" data-initialize="checkbox">
      <label class="checkbox-custom">
        <input class="sr-only" type="checkbox" value="option1">
        <span class="checkbox-label">Custom checkbox unchecked on page load</span>
      </label>
    </div>
    <div class="checkbox" data-initialize="checkbox">
      <label class="checkbox-custom">
        <input class="sr-only" checked="checked" type="checkbox" value="option2">
        <span class="checkbox-label">Custom checkbox checked on page load</span>
      </label>
    </div>
    <div class="checkbox" data-initialize="checkbox">
      <label class="checkbox-custom">
        <input class="sr-only" disabled="disabled" type="checkbox" value="option3">
        <span class="checkbox-label">Disabled custom checkbox unchecked on page load</span>
      </label>
    </div>
    <div class="checkbox" data-initialize="checkbox">
      <label class="checkbox-custom">
        <input class="sr-only" checked="checked" disabled="disabled" type="checkbox" value="option4">
        <span class="checkbox-label">Disabled custom checkbox checked on page load</span>
      </label>
    </div>
  </div>
{% highlight html %}
<div id="myCheckbox" class="checkbox">
  <label class="checkbox-custom" data-initialize="checkbox">
    <input class="sr-only" type="checkbox" value="">
    <span class="checkbox-label">Custom checkbox unchecked on page load</span>
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-custom" data-initialize="checkbox">
    <input class="sr-only" checked="checked" type="checkbox" value="">
    <span class="checkbox-label">Custom checkbox checked on page load</span>
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-custom" data-initialize="checkbox">
    <input class="sr-only" disabled="disabled" type="checkbox" value="">
    <span class="checkbox-label">Disabled custom checkbox unchecked on page load</span>
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-custom" data-initialoze="checkbox">
    <input class="sr-only" checked="checked" disabled="disabled" type="checkbox" value="">
    <span class="checkbox-label">Disabled custom checkbox checked on page load</span>
  </label>
</div>
{% endhighlight %}

  <h4>Inline checkboxes</h4>
  <p>Use the <code>.checkbox-inline</code> class on checkboxes for controls that appear on the same line.</p>
  <div class="fu-example section">
    <label class="checkbox-custom checkbox-inline" data-initialize="checkbox">
      <input class="sr-only" type="checkbox" value="option1"> <span class="checkbox-label">1</span>
    </label>
    <label class="checkbox-custom checkbox-inline" data-initialize="checkbox">
      <input class="sr-only" checked="checked" type="checkbox" value="option2"> <span class="checkbox-label">2</span>
    </label>
    <label class="checkbox-custom checkbox-inline" data-initialize="checkbox">
      <input class="sr-only" disabled="disabled" type="checkbox" value="option3"> <span class="checkbox-label">3</span>
    </label>
  </div>
{% highlight html %}
<label id="myCheckbox" class="checkbox-custom checkbox-inline" data-initialize="checkbox">
  <input class="sr-only" type="checkbox" value="option1"> <span class="checkbox-label">1</span>
</label>
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox">
  <input class="sr-only" checked="checked" type="checkbox" value="option2"> <span class="checkbox-label">2</span>
</label>
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox">
  <input class="sr-only" disabled="disabled" type="checkbox" value="option3"> <span class="checkbox-label">3</span>
</label>
{% endhighlight %}

  <h4>Element toggling checkboxes</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 control works with any <a href="http://api.jquery.com/category/selectors/">jQuery selector</a>.
  </p>
  <div class="fu-example section">
    <div class="checkbox" data-initialize="checkbox">
      <label class="checkbox-custom">
        <input class="sr-only" data-toggle="#checkboxToggleID" type="checkbox" value="option1">
        <span class="checkbox-label">Toggles element with matching ID</span>
      </label>
    </div>

    <div class="checkbox" data-initialize="checkbox">
      <label class="checkbox-custom">
        <input class="sr-only" data-toggle=".checkboxToggleCLASS" type="checkbox" value="option1">
        <span class="checkbox-label">Toggles elements with matching class</span>
      </label>
    </div>

    <div class="alert bg-info hide" id="checkboxToggleID">ID toggling container</div>
    <div class="alert bg-success hide checkboxToggleCLASS">Class toggling container</div>
    <div class="alert bg-success hide checkboxToggleCLASS">Class toggling container</div>
  </div>
{% highlight html %}
<div id="myCheckbox" class="checkbox" data-initialize="checkbox">
  <label class="checkbox-custom">
    <input class="sr-only" data-toggle="#checkboxToggleID" type="checkbox" value="option1">
    <span class="checkbox-label">Toggles element with matching ID</span>
  </label>
</div>
<label class="checkbox-custom checkbox-inline">
  <input class="sr-only" data-toggle=".checkboxToggleCLASS" type="checkbox" value="option1">
  <span class="checkbox-label">Toggles elements with matching class.</span>
</label>

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

  <h4>Highlighting checkboxes</h4>
  <p>Use the <code>.highlight</code> class to add a background highlight upon check.
  </p>
  <div class="fu-example section">
    <div class="checkbox highlight" data-initialize="checkbox">
      <label class="checkbox-custom">
        <input class="sr-only" type="checkbox" value="option1">
        This control highlights a block-level checkbox on check
      </label>
    </div>
    <label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox">
      <input class="sr-only" type="checkbox" value="option2">
      This control highlights an inline checkbox on check
    </label>
  </div>
{% highlight html %}
<div id="myCheckbox" class="checkbox highlight" data-initialize="checkbox">
  <label class="checkbox-custom">
    <input class="sr-only" type="checkbox" value="option1">
    This control highlights a block-level checkbox on check
  </label>
</div>
<label class="checkbox-custom checkbox-inline highlight">
  <input class="sr-only" type="checkbox" value="option2">
  This control highlights an inline checkbox on check
</label>
{% endhighlight %}

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

  <h3>Via data-attributes</h3>
  <p>The checkbox will automatically instantiate any checkboxes with <code>data-initialize="checkbox"</code>. If you add the control markup <i>after page load</i> with <code>data-initialize="checkbox"</code>, this control will initialize on <code>mouseover</code>.

  <h3>Via JavaScript</h3>
  <p>Call the checkbox control via JavaScript:</p>
  {% highlight js %}$('#myCheckbox').checkbox();{% endhighlight %}

  <h3>Methods</h3>
  <h4>$().checkbox();</h4>
  Activates your content as a custom checkbox

  <h4>.checkbox('check')</h4>
  <p>Checks the checkbox</p>
  {% highlight js %}$('#myCheckbox').checkbox('check');{% endhighlight %}

  <h4>.checkbox('destroy')</h4>
  <p>Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.</p>
  {% highlight js %}$('#myCheckbox').checkbox('destroy');{% endhighlight %}

  <h4>.checkbox('disable')</h4>
  <p>Disables the checkbox</p>
  {% highlight js %}$('#myCheckbox').checkbox('disable');{% endhighlight %}

  <h4>.checkbox('enable')</h4>
  <p>Enables the checkbox</p>
  {% highlight js %}$('#myCheckbox').checkbox('enable');{% endhighlight %}

  <h4>.checkbox('isChecked')</h4>
  <p>Returns <code>true</code> or <code>false</code> depending on whether the checkbox is checked</p>
  {% highlight js %}$('#myCheckbox').checkbox('isChecked');{% endhighlight %}

  <h4>.checkbox('toggle')</h4>
  <p>Toggles the checkbox between checked/unchecked states</p>
  {% highlight js %}$('#myCheckbox').checkbox('toggle');{% endhighlight %}

  <h4>.checkbox('uncheck')</h4>
  <p>Unchecks the checkbox</p>
  {% highlight js %}$('#myCheckbox').checkbox('uncheck');{% endhighlight %}

</div>