345 lines
9.5 KiB
HTML
345 lines
9.5 KiB
HTML
|
<section>
|
||
|
|
<h1 class="blue" data-id="#plugins/input"><i class="ace-icon fa fa-pencil-square-o grey"></i> Form Inputs & Controls</h1>
|
||
|
|
|
||
|
|
<div class="hr hr-double hr32"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- #section:plugins/input -->
|
||
|
|
<div class="help-content">
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#plugins/input.chosen">Chosen</h3>
|
||
|
|
<!-- #section:plugins/input.chosen -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
Chosen is a replacement for browser dropdown lists.
|
||
|
|
<br />
|
||
|
|
You can find more info about its options here:
|
||
|
|
<a href="http://harvesthq.github.io/chosen/">http://harvesthq.github.io/chosen/</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
To use it, you should include:
|
||
|
|
<br />
|
||
|
|
<code>assets/css/chosen.css</code>
|
||
|
|
<br />
|
||
|
|
<code>assets/js/chosen.jquery.js</code>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
A basic example could be like this:
|
||
|
|
|
||
|
|
<pre data-language="html">
|
||
|
|
<select name="myselect" class="chosen-select">
|
||
|
|
<option value="1">Option#1</option>
|
||
|
|
<option value="2">Option#2</option>
|
||
|
|
<option value="2">Option#3</option>
|
||
|
|
</select>
|
||
|
|
</pre>
|
||
|
|
<pre data-language="javascript">
|
||
|
|
$('.chosen-select').chosen();
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
Add <code>.tag-input-style</code> class to <code>select</code> element
|
||
|
|
for an alternative multiple chosen style:
|
||
|
|
<pre data-language="html">
|
||
|
|
<select multiple name="myselect" class="chosen-select tag-input-style">
|
||
|
|
...
|
||
|
|
</select>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
Please note that if chosen element is inside a container which is hidden at first,
|
||
|
|
it may not render properly.
|
||
|
|
<br />
|
||
|
|
To resolve it you should create the chosen or reset its width when the container is shown:
|
||
|
|
<pre data-language="javascript">
|
||
|
|
//an example of a chosen inside a modal
|
||
|
|
$('#modal-form').on('shown.bs.modal', function () {
|
||
|
|
$('.chosen-select').chosen();
|
||
|
|
})
|
||
|
|
|
||
|
|
//or
|
||
|
|
$('#modal-form').on('shown.bs.modal', function () {
|
||
|
|
$(this).find('.chosen-container').each(function(){
|
||
|
|
$(this).find('a:first-child').css('width' , '210px');
|
||
|
|
$(this).find('.chosen-drop').css('width' , '210px');
|
||
|
|
$(this).find('.chosen-search input').css('width' , '200px');
|
||
|
|
});
|
||
|
|
})
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
Chosen plugin is not responsive by default and to make it so, you should change its
|
||
|
|
dimensions on window resize event:
|
||
|
|
<pre data-language="javascript">
|
||
|
|
$(window).on('resize.chosen', function() {
|
||
|
|
//get its parent width
|
||
|
|
var w = $('.chosen-select').parent().width();
|
||
|
|
$('.chosen-select').siblings('.chosen-container').css({'width':w});
|
||
|
|
}).triggerHandler('resize.chosen');
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
Chosen does not support touch devices.
|
||
|
|
<br />
|
||
|
|
So you can ignore touch devices when initiating chosen on an element:
|
||
|
|
<pre data-language="javascript">
|
||
|
|
if(!ace.vars['touch']) {
|
||
|
|
//only enable chosen if not a touch device!
|
||
|
|
$('.chosen-select').chosen();
|
||
|
|
}
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- /section:plugins/input.chosen -->
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#plugins/input.select2">Select2</h3>
|
||
|
|
<!-- #section:plugins/input.select2 -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
Select2 is similar to chosen with more advanced features such as remote data loading.
|
||
|
|
<br />
|
||
|
|
For more info please see <a href="https://github.com/ivaynberg/select2/">https://github.com/ivaynberg/select2/</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
To use it you should include:
|
||
|
|
<br />
|
||
|
|
<code>assets/css/select2.css</code>
|
||
|
|
<br />
|
||
|
|
<code>assets/js/select2.js</code>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
You can add <code>.tag-input-style</code> class to <code>select</code> element
|
||
|
|
for an alternative multiple chosen style:
|
||
|
|
<pre data-language="html">
|
||
|
|
<select multiple name="myselect" class="select2 tag-input-style">
|
||
|
|
...
|
||
|
|
</select>
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
<!--
|
||
|
|
<li>
|
||
|
|
Please also note that Select2's dropdown sometimes jumps off.
|
||
|
|
<br />
|
||
|
|
I have tried to remove all Ace specific styles and scripts and
|
||
|
|
it still happens sometimes.
|
||
|
|
</li>
|
||
|
|
-->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- /section:plugins/input.select2 -->
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#plugins/input.tag-input">Tag Input</h3>
|
||
|
|
<!-- #section:plugins/input.tag-input -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
For more info about tag input plugin, please see its page at:
|
||
|
|
<a href="https://github.com/fdeschenes/bootstrap-tag">https://github.com/fdeschenes/bootstrap-tag</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
To use it, you should include:
|
||
|
|
<br />
|
||
|
|
<code>assets/js/bootstrap-tag.js</code>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
Its autocomplete feature is powered by <a href="#plugins/bootstrap.typeahead" class="help-more">Bootstrap's typeahead plugin</a>.
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
A basic example which retrieve's autocomplete data dynamically from server is like this:
|
||
|
|
<pre data-language="html">
|
||
|
|
<input type="text" name="tags" id="form-field-tags" value="mytag1,mytag2" />
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
<pre data-language="javascript">
|
||
|
|
var tag_input = $('#form-field-tags');
|
||
|
|
try{
|
||
|
|
tag_input.tag({
|
||
|
|
placeholder: tag_input.attr('placeholder'),
|
||
|
|
//source: ['tag 1', 'tag 2'],//static autocomplet array
|
||
|
|
|
||
|
|
//or fetch data from database, fetch those that match "query"
|
||
|
|
source: function(query, process) {
|
||
|
|
$.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
|
||
|
|
.done(function(result_items){
|
||
|
|
process(result_items);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
catch(e) {
|
||
|
|
//display a textarea for old IE, because it doesn't support this plugin or another one I tried!
|
||
|
|
tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove();
|
||
|
|
}
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
You can also add new tags using the following code:
|
||
|
|
<pre data-language="javascript">
|
||
|
|
//programmatically add a new tag
|
||
|
|
var $tag_obj = $('#form-field-tags').data('tag');
|
||
|
|
$tag_obj.add('new tag');
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- /section:plugins/input.tag-input -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#plugins/input.duallist">Dual Listbox</h3>
|
||
|
|
<!-- #section:plugins/input.duallist -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
For more info and examples about dual listbox plugin, please see:
|
||
|
|
<a href="http://www.virtuosoft.eu/code/bootstrap-duallistbox">http://www.virtuosoft.eu/code/bootstrap-duallistbox/</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
To use it, you should include:
|
||
|
|
<br />
|
||
|
|
<code>assets/css/bootstrap-duallistbox.css</code>
|
||
|
|
<br />
|
||
|
|
and
|
||
|
|
<br />
|
||
|
|
<code>assets/js/jquery.bootstrap-duallistbox.js</code>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- /section:plugins/input.duallist -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#plugins/input.multiselect">Bootstrap Multiselect</h3>
|
||
|
|
<!-- #section:plugins/input.multiselect -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
For more info and examples about multiselect plugin, please see:
|
||
|
|
<a href="http://davidstutz.github.io/bootstrap-multiselect/">http://davidstutz.github.io/bootstrap-multiselect/</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
To use it, you should include:
|
||
|
|
<br />
|
||
|
|
<code>assets/css/bootstrap-multiselect.css</code>
|
||
|
|
<br />
|
||
|
|
and
|
||
|
|
<br />
|
||
|
|
<code>assets/js/bootstrap-multiselect.js</code>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- /section:plugins/input.multiselect -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#plugins/input.masked-input">Masked Input</h3>
|
||
|
|
<!-- #section:plugins/input.masked-input -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
For more info and examples about masked input plugin, please see:
|
||
|
|
<a href="http://digitalbush.com/projects/masked-input-plugin/">http://digitalbush.com/projects/masked-input-plugin/</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
To use it, you should include:
|
||
|
|
<br />
|
||
|
|
<code>assets/js/jquery.maskedinput.js</code>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- /section:plugins/input.masked-input -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#plugins/input.limiter">Input Limiter</h3>
|
||
|
|
<!-- #section:plugins/input.limiter -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
Input Limiter plugin, limit's textarea input size by displaying a message to user which shows remaining characters.
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
For more info please see:
|
||
|
|
<a href="http://rustyjeans.com/jquery-plugins/input-limiter">http://rustyjeans.com/jquery-plugins/input-limiter</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
To use it, you should include:
|
||
|
|
<br />
|
||
|
|
<code>assets/js/jquery.inputlimiter.1.3.1.js</code>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
A basic example would be like this:
|
||
|
|
<pre data-language="javascript">
|
||
|
|
$('textarea.limited').inputlimiter({
|
||
|
|
remText: '%n character%s remaining...',
|
||
|
|
limitText: 'max allowed : %n.'
|
||
|
|
});
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- /section:plugins/input.limiter -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="info-title smaller" data-id="#plugins/input.autosize">Auto Size</h3>
|
||
|
|
<!-- #section:plugins/input.autosize -->
|
||
|
|
<div class="info-section">
|
||
|
|
<ul class="info-list list-unstyled">
|
||
|
|
<li>
|
||
|
|
Textarea autosize, is used for automatically increasing textarea height as user input grows.
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
For more info please see its page at:
|
||
|
|
<a href="http://www.jacklmoore.com/autosize/">http://www.jacklmoore.com/autosize/</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
To use it, you should include:
|
||
|
|
<br />
|
||
|
|
<code>assets/js/autosize.js</code>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
A basic example would be something like this:
|
||
|
|
<pre data-language="javascript">
|
||
|
|
autosize($('textarea[class.autosize]'));
|
||
|
|
</pre>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- /section:plugins/input.autosize -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- /section:plugins/input -->
|
||
|
|
</section>
|