【Rails】Colorpickerslider의 사용법
개발 환경
Rails 5.2.4.1
루비 2.4.0
전제
devise 도입됨
user에 color 열 추가
참고 URL
색상 지정이 자유자재! 컬러 피커를 출현시키는 jQuery 플러그인 "Bootstrap Color Picker Sliders"
Bootstrap Color Picker Sliders
정리한 경위
자체 서비스에서 Gantt 차트를 만들 때,
자신의 색을 붙이는 것으로 알기 쉽게 하려고 했습니다.
사용법
소스 다운로드 ↓
Github 부터
파일 다운로드
라이브러리 로드
jQuery, Bootstrap, tinyColor에 의존하기 때문에 먼저로드
(여기 생략)
표시 방법
index.haml...
= f.text_field :color, id: 'hsvflat', autofocus: true, autocomplete: 'color'
js 초기화
index.haml<script>
$("#hsvflat").ColorPickerSliders({
color: "#F44336",
placement: 'right',
sliders: false,
swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#000000', '#FFFFFF'],
hsvpanel: false
});
</script>
이런 느낌이 될거야
Reference
이 문제에 관하여(【Rails】Colorpickerslider의 사용법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hayulu/items/271ac4e4cd1e375d04e0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
소스 다운로드 ↓
Github 부터
파일 다운로드
라이브러리 로드
jQuery, Bootstrap, tinyColor에 의존하기 때문에 먼저로드
(여기 생략)
표시 방법
index.haml
...
= f.text_field :color, id: 'hsvflat', autofocus: true, autocomplete: 'color'
js 초기화
index.haml
<script>
$("#hsvflat").ColorPickerSliders({
color: "#F44336",
placement: 'right',
sliders: false,
swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#000000', '#FFFFFF'],
hsvpanel: false
});
</script>
이런 느낌이 될거야
Reference
이 문제에 관하여(【Rails】Colorpickerslider의 사용법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hayulu/items/271ac4e4cd1e375d04e0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(【Rails】Colorpickerslider의 사용법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hayulu/items/271ac4e4cd1e375d04e0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
