Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Commit

Permalink
Merge pull request #1263 from interactivellama/radio-markup
Browse files Browse the repository at this point in the history 
Add radio markup deprecation notice, update markup
  • Loading branch information
Kevin Parkerson committed Apr 27, 2015
2 parents 3ccda7c + 110c8b0 commit 9b4e3b4
Showing 1 changed file with 31 additions and 25 deletions.
56 changes: 31 additions & 25 deletions _includes/js/radio.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,16 @@ <h1 id="radio" class="page-header">Radio <a href="{{ site.repo }}/blob/{{ site.c
<h2 id="radio-usage">Usage</h2>

<h3 id="radio-usage-javascript">Via JavaScript</h3>
<p>Call the radio control via JavaScript:</p>
{% highlight js %}$('#myRadio').radio();{% endhighlight %}
<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>. If you add the control markup <em>after page load</em> with <code>data-initialize="radio"</code>, this control initializes on <code>mouseover</code>.
<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>
Expand Down Expand Up @@ -46,58 +51,59 @@ <h2 id="radio-examples">Examples</h2>

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

<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" data-initialize="radio">
<label class="radio-custom">
<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" data-initialize="radio">
<label id="lbl3" class="radio-custom">
<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" data-initialize="radio">
<label class="radio-custom">
<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" data-initialize="radio" id="myCustomRadio">
<label class="radio-custom">
<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" data-initialize="radio" id="myCustomRadio2">
<label class="radio-custom">
<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" data-initialize="radio" id="myCustomRadio3">
<label class="radio-custom">
<div class="radio checked">
<label class="radio-custom" 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" data-initialize="radio" id="myCustomRadio4">
<label class="radio-custom">
<div class="radio">
<label class="radio-custom" 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>
Expand All @@ -118,13 +124,13 @@ <h4 id="radio-examples-inline">Inline radio</h4>
</label>
</div>
{% highlight html %}
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomRadio5">
<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="myCustomRadio6">
<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" data-initialize="radio" id="myCustomRadio7">
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomRadioLabel7">
<input class="sr-only" disabled="disabled" name="radioEx2" type="radio" value="option3"> 3
</label>
{% endhighlight %}
Expand Down Expand Up @@ -170,12 +176,12 @@ <h4 id="radio-examples-element-toggling">Element toggling radios</h4>
</div>
{% highlight html %}
<div class="radio">
<label class="radio-custom" data-initialize="radio" id="myCustomRadio8">
<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="myCustomRadio9">
<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>
Expand All @@ -202,7 +208,7 @@ <h4 id="radio-examples-highlighting">Highlighting radios</h4>
</label>
</div>
{% highlight html %}
<div class="radio highlight" data-initialize="radio" id="myCustomRadio10">
<div class="radio highlight" data-initialize="radio" id="myCustomRadioLabel10">
<label class="radio-custom">
<input class="sr-only" name="radioEx4" type="radio" value="option1">
This block-level radio will highlight on check.
Expand Down

0 comments on commit 9b4e3b4

Please sign in to comment.