Bootstrap Snippet Color selector using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
 * 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
 * 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() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Color selector"
Bootstrap 3.3.0 Snippet by XhamirM

Related: See More

Questions / Comments:

"Color selector" Bootstrap 3.3.0 Snippet by XhamirM

Related: See More

Questions / Comments:

"Color selector"
Bootstrap 3.3.0 Snippet by XhamirM