Fork me on GitHub

ColorSelector for Bootstrap bootstrap-colorselector.js

Examples

First Example

The simplest way to use the ColorSelector.

<select id="colorselector">
	<option value="106" data-color="#A0522D">sienna</option>
	<option value="47" data-color="#CD5C5C" selected="selected">indianred</option>
	<option value="87" data-color="#FF4500">orangered</option>
	...
	<option value="15" data-color="#DC143C">crimson</option>
	<option value="24" data-color="#FF8C00">darkorange</option>
	<option value="78" data-color="#C71585">mediumvioletred</option>
</select>

<script>
	$('#colorselector').colorselector();
</script>

Second Example

A huge color palette and the picker is extended to 12 colors in a row (default is 8).

# 
<div class="control-group">
	<label for="colorselector" class="control-label">ColorSelector</label>
	<div class="controls">
		<div class="input-prepend input-append">
			<span class="add-on">#</span>
			<select id="colorselector">
				<option value="1" data-color="#F0F8FF" selected="selected">aliceblue</option>
				<option value="2" data-color="#FAEBD7">antiquewhite</option>
				<option value="3" data-color="#7FFFD4">aquamarine</option>
				...
				<option value="118" data-color="#F5DEB3">wheat</option>
				<option value="119" data-color="#F5F5F5">whitesmoke</option>
				<option value="120" data-color="#9ACD32">yellowgreen</option>
			</select>
		</div>
	</div>
</div>

<script>
	$('#colorselector').colorselector({
		colorsPerRow : 12
	});
</script>

Third Example

A bootstrap-styled form using the control-group class and a callback-function to populate the input field with the color's title.

# 
<div class="control-group">
	<label for="colorselector" class="control-label">Choose a color</label>
	<div class="controls">
		<div class="input-prepend input-append">
			<span class="add-on">#</span>
			<input type="text" id="colorIdText" />
			<select id="colorselector">
				<option value="106" data-color="#A0522D">sienna</option>
				<option value="47" data-color="#CD5C5C">indianred</option>
				<option value="87" data-color="#FF4500">orangered</option>
				...
				<option value="15" data-color="#DC143C">crimson</option>
				<option value="24" data-color="#FF8C00">darkorange</option>
				<option value="78" data-color="#C71585">mediumvioletred</option>
			</select>
		</div>
	</div>
</div>

<script>
	$('#colorselector').colorselector({
		callback : function(value, color, title) {
			$("#colorIdText").val(title);
		},
		colorsPerRow : 4
	});
</script>

Fourth Example

The ColorSelector can be initialized and destroyed at "runtime".

<div class="control-group">
	<label for="init" class="control-label">Switch</label>
	<div class="controls">
		<button type="button" id="init" class="btn">Init plugin</button>
		<button type="button" id="destroy" class="btn">Destroy plugin</button>
	</div>
</div>

<div class="control-group">
	<label for="colorselector" class="control-label">ColorSelector</label>
	<div class="controls">
		<select id="colorselector">
			<option value="87" data-color="#FF4500">orangered</option>
			<option value="107" data-color="#87CEEB">skyblue</option>
			<option value="13" data-color="#6495ED">cornflowerblue</option>
			<option value="15" data-color="#DC143C">crimson</option>
			<option value="78" data-color="#C71585">mediumvioletred</option>
		</select>
	</div>
</div>

<script>
	$('#init').on('click', function() {
		$('#colorselector').colorselector();
	});

	$('#destroy').on('click', function() {
		$('#colorselector').colorselector('destroy');
	});
</script>

Fifth Example

Using ColorSelector methods to show or hide the picker and to set a color by hex-value or by id.

<div class="control-group">
	<label for="init" class="control-label">Switch</label>
	<div class="controls">
		<button type="button" id="showPicker" class="btn">show picker</button>
		<button type="button" id="hidePicker" class="btn">hide picker</button>
		<button type="button" id="setColor" class="btn">set color #DB7093 (palevioletred)</button>
		<button type="button" id="setId" class="btn">set id 4 (dodgerblue)</button>
	</div>
</div>

<div class="control-group">
	<label for="colorselector" class="control-label">ColorSelector</label>
	<div class="controls">
		<select id="colorselector">
			<option value="8" data-color="#DEB887">burlywood</option>
			<option value="9" data-color="#5F9EA0">cadetblue</option>
			<option value="10" data-color="#7FFF00">chartreuse</option>
			...
			<option value="117" data-color="#EE82EE">violet</option>
			<option value="118" data-color="#F5DEB3">wheat</option>
			<option value="120" data-color="#9ACD32">yellowgreen</option>
		</select>
	</div>
</div>

<script>
	$('#colorselector').colorselector();
	
	$('#showPicker').on('click', function() {
		$('#colorselector').colorselector('showPicker');
	});

	$('#hidePicker').on('click', function() {
		$('#colorselector').colorselector('hidePicker');
	});

	$('#setColor').on('click', function() {
		$('#colorselector').colorselector('setColor', "#DB7093");
	});

	$('#setId').on('click', function() {
		$('#colorselector').colorselector("setId", 36);
	});
</script>

Usage

Include all the libs needed to use bootstrap, jquery and of course bootstrap-colorselector.

<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-colorselector.css" />

<script src="jquery-1.9.1.min.js"></script>
<script src="bootstrap-colorselector.js"></script>

Trigger the tooltip via JavaScript:

$('#colorselector').colorselector(options)

Options

Name type default description
callback function callback(value, color, title);
colorsPerRow int 8 The number of colors in the picker per row.

Methods

$().colorselector(options)

Attaches a colorselector to a <select> element.

.colorselector('setColor', 'color')

Sets a color specified by its hex-value.

$('#element').tooltip('setColor', '#FF0000')

.colorselector('setId', id)

Sets a color specified by its id.

$('#element').colorselector('setId', 4)

.colorselector('showPicker')

Shows a colorselector's picker.

$('#element').colorselector('showPicker')

.colorselector('hidePicker')

Hides a colorselector's picker.

$('#element').colorselector('hidePicker')

.colorselector('destroy')

Hides and destroys a colorselector.

$('#element').colorselector('destroy')