jquery.swatches

KO | EN

gitlite — search

#hacktoberfest #ai #llm #go #android #machine-learning #rust #deep-learning #docker #java #awesome #awesome-list #pytorch #open-source

jquery.swatches

(★ 243)

A jQuery plugin that turns a one-line div into a sweet color swatch

File Explorer

Download Latest Version (.zip)

- swatches.css
- beach.png
jquery.swatches.js
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# jquery.swatches

This is a jQuery plugin that turns a single `div` into a sweet color swatch (aka, color pallette).

## Usage

Simply place a similar `div` element where ever you want a swatch to appear:

Then, after including `jquery.swatches.js`, call the `swatchify()` function on the `div`:

$('.swatch').swatchify();

And when you load your page, you'll have this lovely thing staring at you (the right is what it looks like when you hover over the swatch):

Check out the examples section to see the animation too.

## Customizing

The `div` can have any class you want, however the stylesheet supplied is only configured for the `.swatch` class. Using different classes would allow you to render groups of swatches at individual times by calling `swatchify()` on a different selector.

Two strings of data need to be provided by the `div`: `data-name` and `data-colors`. The name must be a string representing the name of the swatch. The `data` string is a comma-seperate list of hex color codes. The list can be as long as you want, each color code will be used to create a portion of the swatch.

You can also provide a `.swatch` element with an javascript array of colors in the `data-colors` attribute. For example:

// assume <div id="test-swatch" class="swatch" data-name="Test"></div>
    var arr = ['#F35C9F','#F3F3F3'];
    var test = $('#test-swatch');
    test.data('colors', arr);
    $('.swatch').swatchify();

## Examples

For more examples, check out [the examples website](http://maxmackie.github.io/jquery.swatches/)

## Contributing

I'm open to any kind of contribution. If you don't have time to submit a pull request, open an issue for a new feature or enhancement and I'll get to it when I have time (or someone else will).

## License

Swatches is released under the MIT license, which is included in the plugin itself.

jquery.swatches

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

jquery.swatches

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README