Colorpickerplus for Twitter Bootstrap

A Twitter Bootstrap component, more user fiendly colorpicker which integrated the Bootstrap Colorpicker

It basically adds a color picker to a field or any other element, alse can be embed to the page or dropdown menu.

common color panel
custom your favor color
the bootstrap-colorpicker integrated

Examples

Sample#1

<input type="text" value="#fff" id="demo1" />
<script>
$(function(){
  var demo1 = $('#demo1');
  demo1.colorpickerplus();
  demo1.on('changeColor', function(e){
	if(e.color==null)
	  $(this).val('transparent').css('background-color', '#fff');//tranparent
	else
	  $(this).val(e.color).css('background-color', e.color);
  });
});
</script>

Sample#2

<button type="button" class="btn btn-default" id="demo2">...</button>
<script>
$(function(){
  var demo2 = $('#demo2');
  demo2.colorpickerplus();
  demo2.on('changeColor', function(e){
	if(e.color==null) {
	  //when select transparent color
	  $('.color-fill-icon', $(this)).addClass('colorpicker-color');
	} else {
	  $('.color-fill-icon', $(this)).removeClass('colorpicker-color');
	  $('.color-fill-icon', $(this)).css('background-color', e.color);
	}
  });
});
</script>

Sample#3

<input type="text" value="#fff" id="demo3" />
<div class="colorpickerplus-embed">
  <div class="colorpickerplus-container" </div>
</div>
<script>
$(function(){
  var demo3 = $('.colorpickerplus-embed .colorpickerplus-container');
  demo3.colorpickerembed();
  demo3.on('changeColor', function(e){
	if(e.color==null)
	  $('#demo3').val('transparent').css('background-color', '#fff');//tranparent
	else
	  $('#demo3').val(e.color).css('background-color', e.color);
  });
});
</script>

Sample#4

<div class="btn-group btn-group-sm colorpickerplus-dropdown" id="demo4">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">...</button>
<ul class="dropdown-menu">
<li class="disabled"><div class="colorpickerplus-container"></div>
</li>
<li>...</li>
</ul>
</div>
<script>
$(function(){
  var demo4 = $('.colorpickerplus-dropdown .colorpickerplus-container');
  demo4.colorpickerembed();
  demo4.on('changeColor', function(e){
    var el = $('.color-fill-icon', $('#demo4'));
    if(e.color==null) {
      //when select transparent color
      el.addClass('colorpicker-color');
    } else {
      el.removeClass('colorpicker-color');
      el.css('background-color', e.color);
    }
  });
});
</script>

Bootstrap Colorpicker Plus for Twitter Bootstrap

Examples