# Bootstrap Colorpicker Plus 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

Fork me on Github Download

## 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>