mirror of
https://github.com/ExactTarget/fuelux.git
synced 2026-04-26 03:00:10 -04:00
217 lines
8.8 KiB
HTML
217 lines
8.8 KiB
HTML
<!-- spinbox
|
|
================================================== -->
|
|
<div class="fu-docs-section">
|
|
<h1 id="spinbox" class="page-header">Spinbox<small> spinbox.js</small></h1>
|
|
|
|
<h2 id="spinbox-examples">Example</h2>
|
|
<p>Spinbox includes an enhanced numeric input based upon the native <code><input type="number"></code>. Wrap the input and the increment/decrement buttons within <code>.fuelux .spinbox</code></p>
|
|
|
|
<div class="fu-example section">
|
|
|
|
<div class="form-group">
|
|
<label class="control-label" for="mySpinboxInput">Without default value</label>
|
|
<div class="form-group">
|
|
|
|
<div id="mySpinbox" class="spinbox" data-initialize="spinbox">
|
|
<input id="mySpinboxInput" type="text" 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">
|
|
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
|
|
</button>
|
|
<button type="button" class="btn btn-default spinbox-down btn-xs">
|
|
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="control-label" for="mySpinboxWithDefaultInput">With default value and 3-digit class</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 class="spinbox-buttons btn-group btn-group-vertical">
|
|
<button type="button" class="btn btn-default spinbox-up btn-xs">
|
|
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
|
|
</button>
|
|
<button type="button" class="btn btn-default spinbox-down btn-xs">
|
|
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="control-label" for="mySpinboxWithDecimalInput">With custom decimal mark and units</label>
|
|
<div class="form-group">
|
|
|
|
<div id="mySpinboxDecimal" class="spinbox">
|
|
<input id="mySpinboxWithDecimalInput" type="text" 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">
|
|
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
|
|
</button>
|
|
<button type="button" class="btn btn-default spinbox-down btn-xs">
|
|
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Sample Methods</h5>
|
|
<div class="btn-group">
|
|
<input id="spinboxSetValueBtn" type="button" class="btn btn-default" value="set value (4)"/>
|
|
<input id="spinboxGetValueBtn" type="button" class="btn btn-default" value="get value"/>
|
|
<input id="enableSpinbox" type="button" class="btn btn-default" value="enable"/>
|
|
<input id="disableSpinbox" type="button" class="btn btn-default" value="disable"/>
|
|
<button id="btnSpinboxDestroy" type="button" class="btn btn-default">destroy and append</button>
|
|
</div>
|
|
|
|
</div><!-- /example -->
|
|
|
|
<h2 id="spinbox-usage">Usage</h2>
|
|
<p>A spinbox allows for click interaction with a numeric input.</p>
|
|
|
|
<h3>Via data-attributes</h3>
|
|
<p>The spinbox will automatically instantiate any spinbox with <code>data-initialize="spinbox"</code>. If you add control markup <i>after page load</i> with <code>data-initialize="selectlist"</code>, this control initializes on <code>mousedown</code>.
|
|
|
|
<h3>Via JavaScript</h3>
|
|
<p>Call the selectlist control via JavaScript:</p>
|
|
{% highlight js %}$('#mySpinbox').spinbox();{% endhighlight %}
|
|
|
|
<h3>Markup</h3>
|
|
|
|
<p>Add <code>class="spinbox"</code> to an a div within a <code>class="fuelux"</code> container.</p>
|
|
|
|
|
|
{% highlight html %}
|
|
<div id="mySpinbox" class="spinbox" data-initialize="spinbox">
|
|
<input id="mySpinboxInput" type="text" 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">
|
|
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
|
|
</button>
|
|
<button type="button" class="btn btn-default spinbox-down btn-xs">
|
|
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endhighlight %}
|
|
|
|
<h3>Methods</h3>
|
|
|
|
<h4>.spinbox('destroy')</h4>
|
|
<p>Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.</p>
|
|
{% highlight js %}$('#mySpinbox').spinbox('destroy');{% endhighlight %}
|
|
<h4>.spinbox('value')</h4>
|
|
<p>Sets or returns the spinner value, as shown in the example below:</p>
|
|
{% highlight js %}$('#mySpinbox').combobox('value') {% endhighlight %}
|
|
<p>This example would return the current value of the spinbox and</p>
|
|
{% highlight js %}$('#mySpinbox').combobox('value', 37) {% endhighlight %}
|
|
<p>would set the current value to 37. If value contains units, the value returns as a string. Otherwise, the value returns as a number.</p>
|
|
|
|
<h3>Options</h3>
|
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-selected=""</code>.</p>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">Name</th>
|
|
<th style="width: 100px;">type</th>
|
|
<th style="width: 50px;">default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>value</td>
|
|
<td>number</td>
|
|
<td>1</td>
|
|
<td>Sets the initial spinner value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>min</td>
|
|
<td>number</td>
|
|
<td>1</td>
|
|
<td>Sets the minimum spinner value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>max</td>
|
|
<td>number</td>
|
|
<td>999</td>
|
|
<td>Sets the maximum spinner value</td>
|
|
</tr>
|
|
<tr>
|
|
<td>step</td>
|
|
<td>number</td>
|
|
<td>1</td>
|
|
<td>Sets the increment by which the value in the spinner will change each time the spinner buttons are pressed</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hold</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>If <code>true</code>, the spinner will react to its buttons being pressed and held down</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hold</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>If <code>true</code>, the spinner will react to its buttons being pressed and held down</td>
|
|
</tr>
|
|
<tr>
|
|
<td>speed</td>
|
|
<td>string</td>
|
|
<td>"medium"</td>
|
|
<td>Assigns spinner speed when buttons are held down. Options include <code>"fast","medium","slow".</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>disabled</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Creates a disables spinner.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>units</td>
|
|
<td>array</td>
|
|
<td>[]</td>
|
|
<td>Units that will be allowed to appear and be typed into the spinbox input along with the numeric value. For example, setting units to a value of <code>['px', 'en', 'xx']</code> would allow <code>px, en, and xx</code> units to appear within the spinbox input</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><!-- ./fu-table-responsive -->
|
|
|
|
<h3>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>changed.fu.spinbox</td>
|
|
<td>This event fires when the value changes (either by selecting an item from the list or updating the input value directly). Arguments include <code>event, value</code> where value is the current value of the spinner. Returns the current value of the spinner.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><!-- ./fu-table-responsive -->
|
|
{% highlight js %}
|
|
$('#mySpinbox').on('changed.fu.spinbox', function () {
|
|
// do something
|
|
})
|
|
{% endhighlight %}
|
|
|
|
</div><!-- end docs-section -->
|