rhymix/common/js/plugins/spectrum
conory b1cb1f3f34 다른 프레임워크와 css 충돌을 피하기 위해 rhymix.less의 class/id 이름에 prefix 처리
변경전의 xe.less 파일도 rhymix.less와 함께 load 하여 호환정 유지

CSS 충돌 예)
bootstrap의 .btn
사용 예)
bootstrap 사용시엔 {Context::unloadBasicFiles('xe')}으로 unload 시키면 문제없음
2018-08-03 19:45:30 +09:00
..
build Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
docs Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
example Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
i18n Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
test Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
themes Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
.gitignore Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
.travis.yml Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
bower.json Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
Gruntfile.js Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
index.html 다른 프레임워크와 css 충돌을 피하기 위해 rhymix.less의 class/id 이름에 prefix 처리 2018-08-03 19:45:30 +09:00
LICENSE Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
package.json Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
plugin.load class 명을 기존 jPicker 와 달리 써서 충돌 회피 2016-02-06 18:46:02 +09:00
README.md Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
rx_spectrum.js input type=color can not be empty 2016-03-13 00:37:04 +09:00
spectrum.css Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00
spectrum.js Spectrum 컬러피커 추가 등 2016-02-06 17:53:53 +09:00

Spectrum

The No Hassle Colorpicker

See the demo and docs: http://bgrins.github.io/spectrum.

I wanted a colorpicker that didn't require images, and that had an API that made sense to me as a developer who has worked with color in a number of applications. I had tried a number of existing plugins, but decided to try and make a smaller, simpler one.

I started using canvas, then switched to CSS gradients, since it turned out to be easier to manage, and provided better cross browser support.

Basic Usage

Head over to the docs for more information. There is a visual demo of the different options hosted at: http://bgrins.github.io/spectrum.

<script src='spectrum.js'></script>
<link rel='stylesheet' href='spectrum.css' />

<input id='colorpicker' />

<script>
$("#colorpicker").spectrum({
    color: "#f00"
});
</script>

npm

Spectrum is registered as package with npm. It can be installed with:

npm install spectrum-colorpicker

Bower

Spectrum is registered as a package with Bower, so it can be pulled down using:

bower install spectrum

Using spectrum with a CDN

CDN provided by cdnjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">

Continuous Integration

Build Status

Visit https://travis-ci.org/bgrins/spectrum to view the status of the automated tests.

Building Spectrum Locally

If you'd like to download and use the plugin, head over to http://bgrins.github.io/spectrum/ and click the 'Download Zip' button.

If you'd like to run the development version, spectrum uses Grunt to automate the testing, linting, and building. Head over to http://gruntjs.com/getting-started for more information. First, clone the repository, then run:

npm install -g grunt-cli
npm install

# runs jshint and the unit test suite
grunt

# runs jshint, the unit test suite, and builds a minified version of the file.
grunt build

Internationalization

If you are able to translate the text in the UI to another language, please do! You can do so by either filing a pull request or opening an issue with the translation. The existing languages are listed at: https://github.com/bgrins/spectrum/tree/master/i18n.

For an example, see the Dutch translation.