(gh-pages-audit) fixed spinbox dupe ID issues. Clarified some documentation points

This commit is contained in:
Christopher McCulloh
2014-09-30 15:58:00 -04:00
parent aad4d8031c
commit 467fa2e075
3 changed files with 14 additions and 6 deletions

View File

@@ -37,7 +37,7 @@ $('#myCombobox').combobox('selectByIndex', '1');
</div>
<h4 id="overview-control-initialization-markup">With markup: data-attributes</h4>
<p class="bg-danger" style="padding: 15px;">The Fuel UX team recommends the precision and greater number of options provided by <a href="#control-initialization-javascript">initializing manually via JavaScript</a>.</p>
<p class="bg-danger">The Fuel UX team recommends the precision and greater number of options provided by <a href="#control-initialization-javascript">initializing manually via JavaScript</a>.</p>
<p>The following Fuel UX controls <em class="text-muted">(those that that do not require a data source)</em> can be initialized on page load using the <code>data-initialize</code> attribute:
<ul>
<li><a href="#checkbox">checkbox</a></li>
@@ -53,10 +53,12 @@ $('#myCombobox').combobox('selectByIndex', '1');
<li><a href="#spinbox">spinbox</a></li>
<li><a href="#wizard">wizard</a></li>
</ul>
<span class="text-muted">Attribute initialization is used in this section's examples when available.</span>
<span class="text-muted">Attribute initialization is used in each section's examples when available.</span>
</p>
<p>If not present <cod>onready</cod>, these controls will be 'lazily' initialized when the user interacts with them (such as on <code>mouseover</code>). <span class="text-warning">Be careful of <code>changed</code> events when initializing. To disable this data-api, use <code>$.off('fu.data-api')</code></span>.</p>
<p>If control is not present <cod>onready</cod>, it will be 'lazily' initialized when the user interacts with it (such as on <code>mouseover</code>).</p>
<p class="bg-danger">Currently there is a bug causing <code>changed</code> events to fire twice for some elements (such as <a href="#spinbox">spinbox</a>). The workaround is to disable this data-api, using <code>$.off('fu.data-api')</code></p>
<div class="fu-callout fu-callout-warning">
<h4 id="overview-manual-initialization">Requires Manual Initialization</h4>

View File

@@ -6,11 +6,11 @@
<p>Spinbox includes an enhanced numeric input based upon the native <code>&lt;input type=&quot;number&quot;&gt;</code>.</p>
<div class="form-group">
<label class="control-label" for="mySpinboxWithDefaultInput">spinbox</label>
<label class="control-label" for="overviewSpinboxInput">spinbox</label>
<div class="form-group">
<div id="mySpinboxWithDefault" class="spinbox digits-3" data-initialize="spinbox">
<input id="mySpinboxWithDefaultInput" type="text" value="3" class="form-control input-mini spinbox-input">
<div id="overviewSpinbox" class="spinbox digits-3" data-initialize="spinbox">
<input id="overviewSpinboxInput" type="text" value="3" class="form-control input-mini spinbox-input">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button type="button" class="btn btn-default spinbox-up btn-xs">
@@ -28,6 +28,8 @@
<h2 id="spinbox-usage">Usage</h2>
<p>A spinbox allows for click interaction with a numeric input.</p>
<p class="bg-danger">Currently there is a bug causing <code>changed</code> events to fire twice for some elements. The workaround is to disable this data-api, using <code>$.off('fu.data-api')</code></p>
<h3 id="spinbox-usage-javascript">Via JavaScript</h3>
<p>Call the selectlist control via JavaScript:</p>
{% highlight js %}$('#mySpinbox').spinbox();{% endhighlight %}

View File

@@ -15,6 +15,10 @@ body {
margin-top: 40px;
}
.bg-danger {
padding: 15px;
}
a {
color: #8fa5b7;
}