<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Color picker for jQuery</title>
<meta name="description" content="A very simple jQuery color picker plugin."/>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css"/>
<link rel="stylesheet" type="text/css" href="jquery.simplecolorpicker.css"/>
</head>
<body>
<!-- Button to init the jQuery plugin -->
<button id="init" class="btn btn-primary">Init the jQuery plugin</button>
<!-- Button to destroy the jQuery plugin -->
<button id="destroy" class="btn btn-danger">Destroy the jQuery plugin</button>
<br/><br/>
Pick a color:
<select name="colorpicker-picker">
<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>
<br/><br/>
Change background color:
<select name="colorpicker-inline-background">
<!-- More colors from Google Calendar -->
<option value="#ac725e">#ac725e</option>
<option value="#d06b64">#d06b64</option>
<option value="#f83a22">#f83a22</option>
<option value="#fa573c" selected>#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>
<br/><br/>
Change background color:
<select name="colorpicker-picker-background">
<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>
<br/><br/>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Pick a color:
<select name="colorpicker-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/>
Pick another color:
<select name="colorpicker-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" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="jquery.simplecolorpicker.js"></script>
<script>
$(document).ready(function() {
$('select[name="colorpicker-inline-background"]').change(function() {
$(document.body).css('background-color', $('select[name="colorpicker-inline-background"]').val());
});
$('select[name="colorpicker-picker-background"]').change(function() {
$(document.body).css('background-color', $('select[name="colorpicker-picker-background"]').val());
});
$('#init').on('click', function() {
$('select[name="colorpicker-inline"]').simplecolorpicker();
$('select[name="colorpicker-picker"]').simplecolorpicker({picker: true});
$('select[name="colorpicker-inline-background"]').simplecolorpicker();
$('select[name="colorpicker-picker-background"]').simplecolorpicker({picker: true});
});
$('#destroy').on('click', function() {
$('select[name="colorpicker-inline"]').simplecolorpicker('destroy');
$('select[name="colorpicker-picker"]').simplecolorpicker('destroy');
$('select[name="colorpicker-inline-background"]').simplecolorpicker('destroy');
$('select[name="colorpicker-picker-background"]').simplecolorpicker('destroy');
});
// By default, activate simplecolorpicker plugin on HTML selects
$('#init').trigger('click');
});
</script>
</body>
</html>
/**
* Very simple jQuery Color Picker CSS.
*
* Copyright (C) 2012 Tanguy Krotoff
*
* Licensed under the MIT license.
*
* Inspired by Bootstrap Twitter.
* See https://github.com/twitter/bootstrap/blob/master/less/dropdowns.less
* See http://twitter.github.com/bootstrap/assets/css/bootstrap.css
*/
.simplecolorpicker.picker:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.simplecolorpicker.picker:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.simplecolorpicker.picker {
position: absolute;
top: 100%;
left: 0;
z-index: 1051; /* Above Bootstrap modal (z-index of 1050) */
display: none;
float: left;
min-width: 160px;
max-width: 264px;
padding: 4px 0 0 4px;
margin: 1px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.simplecolorpicker.inline {
display: inline-block;
height: 18px;
padding: 4px 0;
}
.simplecolorpicker.icon,
.simplecolorpicker div {
cursor: pointer;
display: inline-block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid transparent;
}
.simplecolorpicker div {
margin: 0 4px 4px 0;
}
.simplecolorpicker div:hover,
.simplecolorpicker div.selected {
border: 1px solid black;
}
/**
* Very simple jQuery Color Picker.
*
* Copyright (C) 2012 Tanguy Krotoff
*
* Licensed under the MIT license.
*/
(function($) {
'use strict';
/**
* Constructor.
*/
var SimpleColorPicker = function(select, options) {
this.init('simplecolorpicker', select, options);
};
/**
* SimpleColorPicker class.
*/
SimpleColorPicker.prototype = {
constructor: SimpleColorPicker,
init: function(type, select, options) {
this.type = type;
this.$select = $(select);
this.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
this.$select.hide();
// Trick: fix span alignment
// When a span does not contain any text, its alignment is not correct
var fakeText = ' ';
// Build the list of colors
// <div class="selected" title="Green" style="background-color: #7bd148;" role="button"></div>
var colorList = '';
$('option', this.$select).each(function() {
var option = $(this);
var color = option.val();
var title = option.text();
var selected = '';
if (option.attr('selected')) {
selected = 'class="selected"';
}
colorList += '<div ' + selected + ' title="' + title + '" style="background-color: ' + color + ';" role="button" tabindex="0">'
+ fakeText
+ '</div>';
});
if (this.options.picker) {
var selectText = this.$select.find('option:selected').text();
var selectValue = this.$select.val();
this.$icon = $('<span class="simplecolorpicker icon" title="' + selectText + '" style="background-color: ' + selectValue + ';" role="button" tabindex="0">'
+ fakeText
+ '</span>').insertAfter(this.$select);
this.$icon.on('click.' + this.type, $.proxy(this.showPicker, this));
this.$picker = $('<span class="simplecolorpicker picker"></span>').appendTo(document.body);
this.$picker.html(colorList);
this.$picker.on('click.' + this.type, $.proxy(this.click, this));
// Hide picker when clicking outside
$(document).on('mousedown.' + this.type, $.proxy(this.hidePicker, this));
this.$picker.on('mousedown.' + this.type, $.proxy(this.mousedown, this));
} else {
this.$inline = $('<span class="simplecolorpicker inline"></span>').insertAfter(this.$select);
this.$inline.html(colorList);
this.$inline.on('click.' + this.type, $.proxy(this.click, this));
}
},
showPicker: function() {
var bootstrapArrowWidth = 16; // Empirical value
var pos = this.$icon.offset();
this.$picker.css({
left: pos.left + this.$icon.width() / 2 - bootstrapArrowWidth, // Middle of the icon
top: pos.top + this.$icon.outerHeight()
});
this.$picker.show(this.options.delay);
},
hidePicker: function() {
this.$picker.hide(this.options.delay);
},
click: function(e) {
var target = $(e.target);
if (target.length === 1) {
if (target[0].nodeName.toLowerCase() === 'div') {
// When you click on a color
var color = target.css('background-color');
var title = target.attr('title');
// Mark this div as the selected one
target.siblings().removeClass('selected');
target.addClass('selected');
if (this.options.picker) {
this.$icon.css('background-color', color);
this.$icon.attr('title', title);
this.hidePicker();
}
// Change HTML select value
this.$select.val(this.rgb2hex(color)).change();
}
}
},
/**
* Prevents the mousedown event from "eating" the click event.
*/
mousedown: function(e) {
e.stopPropagation();
e.preventDefault();
},
/**
* Converts a RGB color to its hexadecimal value.
*
* See http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-jquery
*/
rgb2hex: function(rgb) {
function hex(x) {
return ('0' + parseInt(x, 10).toString(16)).slice(-2);
}
var matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (matches === null) {
// Fix for Internet Explorer < 9
// Variable rgb is already a hexadecimal value
return rgb;
} else {
return '#' + hex(matches[1]) + hex(matches[2]) + hex(matches[3]);
}
},
destroy: function() {
if (this.options.picker) {
this.$icon.off('.' + this.type);
this.$icon.remove();
this.$picker.off('.' + this.type);
this.$picker.remove();
$(document).off('.' + this.type);
} else {
this.$inline.off('.' + this.type);
this.$inline.remove();
}
this.$select.removeData(this.type);
this.$select.show();
}
};
/**
* Plugin definition.
* How to use: $('#id').simplecolorpicker()
*/
$.fn.simplecolorpicker = function(option) {
// For HTML element passed to the plugin
return this.each(function() {
var $this = $(this),
data = $this.data('simplecolorpicker'),
options = typeof option === 'object' && option;
if (data === undefined) {
$this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
}
if (typeof option === 'string') {
data[option]();
}
});
};
/**
* Default options.
*/
$.fn.simplecolorpicker.defaults = {
// Animation delay
delay: 0,
// Show the picker or make it inline
picker: false
};
})(jQuery);