<section>
|
<h1 class="blue"><i class="ace-icon fa fa-desktop grey"></i> Color picker</h1>
|
|
<div class="hr hr-double hr32"></div>
|
|
|
<!-- #section:custom/colorpicker -->
|
<div class="help-content">
|
<h3 class="info-title smaller" data-id="#custom/colorpicker">Custom Color Picker</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Custom color picker converts a <code>select</code> element into a dropdown:
|
<pre data-language="html">
|
<select name="mycolor" id="mycolor">
|
<option value="red">red</option>
|
<option value="blue">blue</option>
|
<option value="black">black</option>
|
<option value="green">green</option>
|
<option value="purple">purple</option>
|
</select>
|
</pre>
|
|
<pre data-language="javascript">
|
$('#mycolor').ace_colorpicker()
|
.on('change', function() {
|
alert(this.value);
|
alert(this.selectedIndex);
|
});
|
</pre>
|
</li>
|
|
<li>
|
Color picker has two functions:
|
<ol>
|
<li>
|
<code>pick</code>
|
which selects a color. Argument can be a string(color) or an integer(index)
|
</li>
|
|
<pre data-language="javascript">
|
$('#mycolor').ace_colorpicker('pick', '#FFAA77');//select '#FFAA77' color
|
$('#mycolor').ace_colorpicker('pick', 3);//select 3rd index
|
//or
|
var color_picker = $('#mycolor').data('ace_colorpicker');
|
color_picker.pick('#EE6699', true);
|
//"true" means select #EE6699 and insert it if it doesn't exist
|
</pre>
|
|
<li>
|
<code>destroy</code> which destroys color picker and shows <code>select</code> element
|
<pre data-language="javascript">
|
$('#mycolor').ace_colorpicker('destroy');
|
</pre>
|
</li>
|
</ol>
|
</li>
|
</ul>
|
</div>
|
|
|
</div>
|
<!-- /section:custom/colorpicker -->
|
</section>
|
