Jquery 를 이용한 Spectrum Color Picker 입니다.
다른 컬러피커에 비해 옵션이 잘 정리되어 있네요.
$("#picker").spectrum({
color: tinycolor,
flat: bool,
showInput: bool,
showInitial: bool,
allowEmpty: bool,
showAlpha: bool,
disabled: bool,
localStorageKey: string,
showPalette: bool,
showPaletteOnly: bool,
togglePaletteOnly: bool,
showSelectionPalette: bool,
clickoutFiresChange: bool,
cancelText: string,
chooseText: string,
togglePaletteMoreText: string,
togglePaletteLessText: string,
containerClassName: string,
replacerClassName: string,
preferredFormat: string,
maxSelectionSize: int,
palette: [[string]],
selectionPalette: [string]
});
위의 옵션들에 대해서는 http://bgrins.github.io/spectrum/ 해당 페이지에 설명과 함계 예제를 제공하고 있으니 참고하셔서 ... 사용하시면 좋습니다.
기본적으로 아래의 코드를 이용하시면 심플한 컬러피커를 호출하여 사용할 수 있습니다. ^^
<link rel="stylesheet" type="text/css" href="spectrum.css">
<script type="text/javascript" src="docs/jquery-1.9.1.js"></script>
<script type="text/javascript" src="spectrum.js"></script>
<input type="text" name="color" id="color" style="width:100px;" value="">
<script type="text/javascript">
<!--
$(function() {
$("#color").spectrum({
flat: false,
showInput: true,
preferredFormat: "rgb",
color: "#000000"
});
});
//-->
</script>
|
