[JQuery] color picker 사용법, colorPicker js

■ JQuery color picker 사용법

colorpicker palette

- 웹에서 사용자에게 색상코드 선택 값을 받을 때 단순히 input 박스를 사용하는 것보다 UI적으로 보기 좋음

---

■ 라이브러리

<link rel="stylesheet" href="/plugin/colorpicker/colorPick.css">
<link rel="stylesheet" href="/plugin/colorpicker/colorPick.dark.theme.css">
<script src="/plugin/colorpicker/colorPick.js"></script>

---

■ 사용법

<div class="colorPickSelector"></div>

<script type="text/javascript">
  $(document).ready(function(){
    // 테마 색상 선택
    $(".colorPickSelector").colorPick({
      'left' : '16.5px',
      'bottom' : '-16.5938px',
      'initialColor': '#3498db',
      'allowRecent': true,
      'recentMax': 5,
      'allowCustomColor': false,
      'palette': [
        "#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db"
        , "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50"
        , "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c"
        , "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"
      ],
      'onColorSelected': function() {
      	this.element.css({'backgroundColor': this.color, 'color': this.color});
      }
    });
  });
</script>

---

■ 라이브러리 파일 공유

Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js.zip

0.01MB