"Color selector"
Bootstrap 3.3.0 Snippet by xrozix

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>
/* * A colorselector for Twitter Bootstrap which lets you select a color from a predefined set of colors only. * https://github.com/flaute/bootstrap-colorselector * * Copyright (C) 2014 Flaute * * Licensed under the MIT license */ /* colorselector dropdown */ .dropdown-colorselector>.dropdown-menu { top: 80%; left: -7px; padding: 4px; min-width: 130px; max-width: 130px; } /* .dropdown-colorselector>.dropdown-menu.pull-right { right: -7px; left: auto; } */ .dropdown-colorselector>.dropdown-menu>li { display: block; float: left; width: 20px; height: 20px; margin: 2px; } .dropdown-colorselector>.dropdown-menu>li>.color-btn { display: block; width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 0; position: relative; -webkit-transition: all ease 0.1s; transition: all ease 0.1s; } .dropdown-colorselector>.dropdown-menu>li>.color-btn:hover { text-decoration: none; opacity: 0.8; filter: alpha(opacity = 80); -webkit-transform: scale(1.08); -ms-transform: scale(1.08); transform: scale(1.08); } .dropdown-colorselector>.dropdown-menu>li>.color-btn.selected:after { content: "\e013"; font-family: 'Glyphicons Halflings'; display: inline-block; font-size: 11px; color: #FFF; position: absolute; left: 0; right: 0; text-align: center; line-height: 20px; } .btn-colorselector { display: inline-block; width: 20px; height: 20px; background-color: #DDD; vertical-align: middle; border-radius: 0; } .dropdown-menu.dropdown-caret:before { border-bottom: 7px solid rgba(0, 0, 0, 0.2); border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; display: inline-block; left: 9px; position: absolute; top: -7px; } .dropdown-menu.dropdown-caret:after { border-bottom: 6px solid #FFFFFF; border-left: 6px solid transparent; border-right: 6px solid transparent; content: ""; display: inline-block; left: 10px; position: absolute; top: -6px; } /* .dropdown-menu.pull-right.dropdown-caret:before { left: auto; right: 9px; } .dropdown-menu.pull-right.dropdown-caret:after { left: auto; right: 10px; } */
/* * A colorselector for Twitter Bootstrap which lets you select a color from a predefined set of colors only. * https://github.com/flaute/bootstrap-colorselector * * Copyright (C) 2014 Flaute * * Licensed under the MIT license */ (function($) { "use strict"; var ColorSelector = function(select, options) { this.options = options; this.$select = $(select); this._init(); }; ColorSelector.prototype = { constructor : ColorSelector, _init : function() { var callback = this.options.callback; var selectValue = this.$select.val(); var selectColor = this.$select.find("option:selected").data("color"); var $markupUl = $("<ul>").addClass("dropdown-menu").addClass("dropdown-caret"); var $markupDiv = $("<div>").addClass("dropdown").addClass("dropdown-colorselector"); var $markupSpan = $("<span>").addClass("btn-colorselector").css("background-color", selectColor); var $markupA = $("<a>").attr("data-toggle", "dropdown").addClass("dropdown-toggle").attr("href", "#").append($markupSpan); // create an li-tag for every option of the select $("option", this.$select).each(function() { var option = $(this); var value = option.attr("value"); var color = option.data("color"); var title = option.text(); // create a-tag var $markupA = $("<a>").addClass("color-btn"); if (option.prop("selected") === true || selectValue === color) { $markupA.addClass("selected"); } $markupA.css("background-color", color); $markupA.attr("href", "#").attr("data-color", color).attr("data-value", value).attr("title", title); // create li-tag $markupUl.append($("<li>").append($markupA)); }); // append the colorselector $markupDiv.append($markupA); // append the colorselector-dropdown $markupDiv.append($markupUl); // hide the select this.$select.hide(); // insert the colorselector this.$selector = $($markupDiv).insertAfter(this.$select); // register change handler this.$select.on("change", function() { var value = $(this).val(); var color = $(this).find("option[value='" + value + "']").data("color"); var title = $(this).find("option[value='" + value + "']").text(); // remove old and set new selected color $(this).next().find("ul").find("li").find(".selected").removeClass("selected"); $(this).next().find("ul").find("li").find("a[data-color='" + color + "']").addClass("selected"); $(this).next().find(".btn-colorselector").css("background-color", color); callback(value, color, title); }); // register click handler $markupUl.on('click.colorselector', $.proxy(this._clickColor, this)); }, _clickColor : function(e) { var a = $(e.target); if (!a.is(".color-btn")) { return false; } this.$select.val(a.data("value")).change(); e.preventDefault(); return true; }, setColor : function(color) { // find value for color var value = $(this.$selector).find("li").find("a[data-color='" + color + "']").data("value"); this.setValue(value); }, setValue : function(value) { this.$select.val(value).change(); }, }; $.fn.colorselector = function(option) { var args = Array.apply(null, arguments); args.shift(); return this.each(function() { var $this = $(this), data = $this.data("colorselector"), options = $.extend({}, $.fn.colorselector.defaults, $this.data(), typeof option == "object" && option); if (!data) { $this.data("colorselector", (data = new ColorSelector(this, options))); } if (typeof option == "string") { data[option].apply(data, args); } }); }; $.fn.colorselector.defaults = { callback : function(value, color, title) { }, colorsPerRow : 8 }; $.fn.colorselector.Constructor = ColorSelector; })(jQuery, window, document);

Related: See More


Questions / Comments: