Добавление цвета / Элементы / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 301

Количество символов:

Посмотрели: 1797 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/WLhIDQ

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, цвет, COLOR, html, сниппет, Bootstrap, бутстрап

Поделился: IZOTOP

Добавлено: 2015-12-11 в 18:23

Метка: 1582102321

⇄ ⇅

<br><br><br>
<a href="https://bootstraptema.ru/stuff/plugins_bootstrap/bootstrap_3/very_simple_jquery_color_picker/12-1-0-300" target="_blank" class="btn btn-default" >Страница используемого плагина</a>
<br><br><br>

<button id="init" class="btn btn-primary">Init the jQuery plugin</button>

<button id="destroy" class="btn btn-danger">Destroy the jQuery plugin</button>

<h3>Short list of colors</h3>
colorpicker-shortlist:
<select name="colorpicker-shortlist">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Long list of colors</h3>
colorpicker-longlist:
<select name="colorpicker-longlist">
 <option value="#ac725e">#ac725e</option>
 <option value="#d06b64">#d06b64</option>
 <option value="#f83a22">#f83a22</option>
 <option value="#fa573c">#fa573c</option>
 <option value="#ff7537">#ff7537</option>
 <option value="#ffad46">#ffad46</option>
 <option value="#42d692">#42d692</option>
 <option value="#16a765">#16a765</option>
 <option value="#7bd148">#7bd148</option>
 <option value="#b3dc6c">#b3dc6c</option>
 <option value="#fbe983">#fbe983</option>
 <option value="#fad165">#fad165</option>
 <option value="#92e1c0">#92e1c0</option>
 <option value="#9fe1e7">#9fe1e7</option>
 <option value="#9fc6e7">#9fc6e7</option>
 <option value="#4986e7">#4986e7</option>
 <option value="#9a9cff">#9a9cff</option>
 <option value="#b99aff">#b99aff</option>
 <option value="#c2c2c2">#c2c2c2</option>
 <option value="#cabdbf">#cabdbf</option>
 <option value="#cca6ac">#cca6ac</option>
 <option value="#f691b2">#f691b2</option>
 <option value="#cd74e6">#cd74e6</option>
 <option value="#a47ae2">#a47ae2</option>
</select>

<h3>No theme</h3>
colorpicker-notheme:
<select name="colorpicker-notheme">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>'regularfont' theme</h3>
colorpicker-regularfont:
<select name="colorpicker-regularfont">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>'glyphicons' theme</h3>
colorpicker-glyphicons:
<select name="colorpicker-glyphicons">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>'fontawesome' theme</h3>
colorpicker-fontawesome:
<select name="colorpicker-fontawesome">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Bootstrap 3 form</h3>
<form class="form-horizontal">
 <div class="form-group">
 <label class="col-sm-4 control-label" for="input01">Text input</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" id="input01">
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-4 col-sm-6">
 <div class="checkbox">
 <label>
 <input type="checkbox"> Option one
 </label>
 </div>
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-4 control-label" for="colorpicker-bootstrap3-form">colorpicker-bootstrap3-form</label>
 <div class="col-sm-6">
 <select name="colorpicker-bootstrap3-form" id="colorpicker-bootstrap3-form" class="form-control">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
 </select>
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-4 control-label" for="multiSelect">Multicon-select</label>
 <div class="col-sm-6">
 <select multiple id="multiSelect" class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-4 control-label" for="fileInput">File input</label>
 <div class="col-sm-6">
 <input id="fileInput" type="file">
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-4 col-sm-6">
 <button type="submit" class="btn btn-primary">Save changes</button>
 <button class="btn btn-default">Cancel</button>
 </div>
 </div>
</form>

<h3>Bootstrap 3 modal window</h3>
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Launch demo modal</a>
<div id="myModal" class="modal fade" tabindex="-1">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">&times;</button>
 <h4 class="modal-title">Modal title</h4>
 </div>
 <div class="modal-body">
 colorpicker-modal-inline:
 <select name="colorpicker-modal-inline">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
 </select>
 <br><br>
 colorpicker-modal-picker:
 <select name="colorpicker-modal-picker">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
 </select>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal">Close</button>
 <button class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
</div>

<h3>Option selected</h3>
colorpicker-option-selected:
<select name="colorpicker-option-selected">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc" selected>Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c" selected>Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Options disabled</h3>
colorpicker-options-disabled:
<select name="colorpicker-options-disabled">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc" disabled>Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c" disabled>Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Option selected and disabled at the same time</h3>
colorpicker-option-selected-disabled:
<select name="colorpicker-option-selected-disabled">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc" selected disabled>Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c" selected disabled>Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Optgroups</h3>
colorpicker-optgroups:
<select name="colorpicker-optgroups">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <optgroup label="----------"></optgroup>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <optgroup label="----------"></optgroup>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Change background color</h3>
colorpicker-change-background-color:
<select name="colorpicker-change-background-color">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>selectColor('#fbd75b') after 5 seconds</h3>
colorpicker-selectColor-#fbd75b:
<select name="colorpicker-selectColor-#fbd75b">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>selectColor('#FBD75B') after 5 seconds</h3>
colorpicker-selectColor-#FBD75B:
<select name="colorpicker-selectColor-#FBD75B">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Multiple selectColor('#fbd75b') after 5 seconds</h3>
colorpicker-selectColor-#fbd75b-multiple:
<select name="colorpicker-selectColor-#fbd75b-multiple" style="display: none;">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>selectColor('unknown') after 5 seconds</h3>
colorpicker-selectColor-unknown:
<select name="colorpicker-selectColor-unknown">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker short list</h3>
colorpicker-picker-shortlist:
<select name="colorpicker-picker-longlist">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker long list</h3>
colorpicker-picker-longlist:
<select name="colorpicker-picker-longlist">
 <option value="#ac725e">#ac725e</option>
 <option value="#d06b64">#d06b64</option>
 <option value="#f83a22">#f83a22</option>
 <option value="#fa573c">#fa573c</option>
 <option value="#ff7537">#ff7537</option>
 <option value="#ffad46">#ffad46</option>
 <option value="#42d692">#42d692</option>
 <option value="#16a765">#16a765</option>
 <option value="#7bd148">#7bd148</option>
 <option value="#b3dc6c">#b3dc6c</option>
 <option value="#fbe983">#fbe983</option>
 <option value="#fad165">#fad165</option>
 <option value="#92e1c0">#92e1c0</option>
 <option value="#9fe1e7">#9fe1e7</option>
 <option value="#9fc6e7">#9fc6e7</option>
 <option value="#4986e7">#4986e7</option>
 <option value="#9a9cff">#9a9cff</option>
 <option value="#b99aff">#b99aff</option>
 <option value="#c2c2c2">#c2c2c2</option>
 <option value="#cabdbf">#cabdbf</option>
 <option value="#cca6ac">#cca6ac</option>
 <option value="#f691b2">#f691b2</option>
 <option value="#cd74e6">#cd74e6</option>
 <option value="#a47ae2">#a47ae2</option>
</select>

<h3>Picker with 1s animation delay</h3>
colorpicker-picker-delay:
<select name="colorpicker-picker-delay">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with option selected</h3>
colorpicker-picker-option-selected:
<select name="colorpicker-picker-option-selected">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc" selected>Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c" selected>Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with options disabled</h3>
colorpicker-picker-options-disabled:
<select name="colorpicker-picker-options-disabled">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc" disabled>Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c" disabled>Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with option selected and disabled at the same time</h3>
colorpicker-picker-option-selected-disabled:
<select name="colorpicker-picker-option-selected-disabled">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc" selected disabled>Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c" selected disabled>Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with Optgroups</h3>
colorpicker-picker-optgroups:
<select name="colorpicker-picker-optgroups">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <optgroup label="----------"></optgroup>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <optgroup label="----------"></optgroup>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with selectColor('#fbd75b') after 5 seconds</h3>
colorpicker-picker-selectColor-#fbd75b:
<select name="colorpicker-picker-selectColor-#fbd75b">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

<h3>Picker with selectColor('unknown') after 5 seconds</h3>
colorpicker-picker-selectColor-unknown:
<select name="colorpicker-picker-selectColor-unknown">
 <option value="#7bd148">Green</option>
 <option value="#5484ed">Bold blue</option>
 <option value="#a4bdfc">Blue</option>
 <option value="#46d6db">Turquoise</option>
 <option value="#7ae7bf">Light green</option>
 <option value="#51b749">Bold green</option>
 <option value="#fbd75b">Yellow</option>
 <option value="#ffb878">Orange</option>
 <option value="#ff887c">Red</option>
 <option value="#dc2127">Bold red</option>
 <option value="#dbadff">Purple</option>
 <option value="#e1e1e1">Gray</option>
</select>

</div></div></div>

setTimeout(function() {
 $('select[name="colorpicker-selectColor-#fbd75b"]').simplecolorpicker('selectColor', '#fbd75b');
 }, 5000);

setTimeout(function() {
 $('select[name="colorpicker-selectColor-#FBD75B"]').simplecolorpicker('selectColor', '#FBD75B');
 }, 5000);

setTimeout(function() {
 $('select[name="colorpicker-selectColor-#fbd75b-multiple"]').simplecolorpicker('selectColor', '#fbd75b');
 }, 5000);

setTimeout(function() {
 // Generates a JavaScript error
 $('select[name="colorpicker-selectColor-unknown"]').simplecolorpicker('selectColor', 'unknown');
 }, 5000);

setTimeout(function() {
 $('select[name="colorpicker-picker-selectColor-#fbd75b"]').simplecolorpicker('selectColor', '#fbd75b');
 }, 5000);

setTimeout(function() {
 // Generates a JavaScript error
 $('select[name="colorpicker-picker-selectColor-unknown"]').simplecolorpicker('selectColor', 'unknown');
 }, 5000);

$('#init').on('click', function() {
 $('select[name="colorpicker-shortlist"]').simplecolorpicker();
 $('select[name="colorpicker-longlist"]').simplecolorpicker();
 $('select[name="colorpicker-notheme"]').simplecolorpicker();
 $('select[name="colorpicker-regularfont"]').simplecolorpicker({theme: 'regularfont'});
 $('select[name="colorpicker-glyphicons"]').simplecolorpicker({theme: 'glyphicons'});
 $('select[name="colorpicker-fontawesome"]').simplecolorpicker({theme: 'fontawesome'});
 $('select[name="colorpicker-bootstrap3-form"]').simplecolorpicker({theme: 'glyphicons'});
 $('select[name="colorpicker-modal-inline"]').simplecolorpicker();
 $('select[name="colorpicker-modal-picker"]').simplecolorpicker({picker: true});
 $('select[name="colorpicker-option-selected"]').simplecolorpicker({theme: 'glyphicons'});
 $('select[name="colorpicker-options-disabled"]').simplecolorpicker({theme: 'glyphicons'});
 $('select[name="colorpicker-option-selected-disabled"]').simplecolorpicker({theme: 'glyphicons'});
 $('select[name="colorpicker-optgroups"]').simplecolorpicker();
 $('select[name="colorpicker-change-background-color"]').simplecolorpicker();
 $('select[name="colorpicker-selectColor-#fbd75b"]').simplecolorpicker({theme: 'glyphicons'});
 $('select[name="colorpicker-selectColor-#FBD75B"]').simplecolorpicker({theme: 'glyphicons'});
 $('select[name="colorpicker-selectColor-#fbd75b-multiple"]').simplecolorpicker({theme: 'glyphicons'});
 $('select[name="colorpicker-selectColor-unknown"]').simplecolorpicker({theme: 'glyphicons'});

$('select[name="colorpicker-picker-shortlist"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
 $('select[name="colorpicker-picker-longlist"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
 $('select[name="colorpicker-picker-delay"]').simplecolorpicker({picker: true, theme: 'glyphicons', pickerDelay: 1000});
 $('select[name="colorpicker-picker-option-selected"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
 $('select[name="colorpicker-picker-options-disabled"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
 $('select[name="colorpicker-picker-option-selected-disabled"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
 $('select[name="colorpicker-picker-optgroups"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
 $('select[name="colorpicker-picker-selectColor-#fbd75b"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
 $('select[name="colorpicker-picker-selectColor-unknown"]').simplecolorpicker({picker: true, theme: 'glyphicons'});
 });

$('#destroy').on('click', function() {
 $('select').simplecolorpicker('destroy');
 });

// By default, activate simplecolorpicker plugin on HTML selects
 $('#init').trigger('click');
});
</script>

BootstrapTema

Добавление цвета

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0