https://github.com/extremeFE/bootstrap-colorpalette

Simple color palette for Bootstrap
https://github.com/extremeFE/bootstrap-colorpalette

Last synced: 5 days ago
JSON representation

Simple color palette for Bootstrap

• Host: GitHub
• URL: https://github.com/extremeFE/bootstrap-colorpalette
• Owner: extremeFE
• Created: 2013-06-20T01:02:36.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-10-24T15:22:06.000Z (about 11 years ago)
• Last Synced: 2024-08-01T12:34:44.846Z (3 months ago)
• Language: JavaScript
• Homepage: http://extremefe.github.io/bootstrap-colorpalette/
• Size: 156 KB
• Stars: 91
• Watchers: 8
• Forks: 33
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-starred - extremeFE/bootstrap-colorpalette - Simple color palette for Bootstrap (others)
• jimsghstars - extremeFE/bootstrap-colorpalette - Simple color palette for Bootstrap (JavaScript)

README

        
# bootstrap-colorpalette

Simple color palette for Bootstrap

#### [Online Demo](http://extremefe.github.io/bootstrap-colorpalette/)

# Requirements

* [Bootstrap](http://twitter.github.com/bootstrap/) 2.3.2+

* [jQuery](http://jquery.com/) 1.8.1+

# Example

#### Basic

```html



```

```javascript

$('.colorpalette').colorPalette();

```

***


#### selectColor event

```html



```

```javascript

$('.colorpalette').colorPalette()

  .on('selectColor', function(e) {

    $('.selected-color').val(e.color);

  });

```

***


#### Gmail editor style

```html



  A

  


    


      
 font color

      


    

    


      
 background color

      


    

  



```

```javascript

$('.colorpalette1').colorPalette()

  .on('selectColor', function(e) {

    $('.selected-color i').css('color', e.color);

  });

$('.colorpalette2').colorPalette()

  .on('selectColor', function(e) {

    $('.selected-color i').css('background-color', e.color);

  });

```

***


#### Custom color option

```html



```

```javascript

var options = {

  colors:[['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#EFF7F7', '#FFFFFF']]

}

$('.colorpalette').colorPalette(options)

  .on('selectColor', function(e) {

    $('.selected-color').val(e.color);

  });

```