使用方法
本插件是基于
jQuery UI，所以應(yīng)該先行下載jQuery UI,當(dāng)然
jQuery也必不可少
引入和初始化
引入js文件
1
2
3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
注意：jquery ui 和 jquery 插件應(yīng)該放在此調(diào)色板之前 ，被墻的用戶請(qǐng)使用其他cdn
引入css文件
1
2
<link rel="stylesheet" type="text/css" >
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
初始化插件
1
2
3
4
5
6
7
<script type="text/javascript">
$(document).ready(function() {
$("#mycolor").colorpicker();
});
</script>
<input style="width:100px;" id="mycolor" />
主要方法
1.設(shè)置顏色
1
2
3
$("#mycolor").colorpicker({
color: "#ffffff"
});
2.定義調(diào)色板主題樣式
1
2
3
$("#mycolor").colorpicker({
defaultPalette: 'web'
});
3.本地化調(diào)色板插件語言
1
2
3
$("#mycolor").colorpicker({
strings: "主題顏色,標(biāo)準(zhǔn)顏色,web顏色,主題顏色,返回調(diào)色板,歷史記錄, 沒有歷史記錄."
});
4.隱藏調(diào)色板
1
$("#mycolor").colorpicker("hidePalette");
5.調(diào)色板選中顏色后觸發(fā)的事件
1
2
3
$("#mycolor").on("change.color", function(event, color){
$('#title').css('background-color', color);
});
6.鼠標(biāo)移動(dòng)到顏色后觸發(fā)的事件
1
2
3
$("#mycolor").on("mouseover.color", function(event, color){
$('#title').css('background-color', color);
});
7.獲取選中顏色和改變選中顏色
1
2
3
var colorValue = $("#mycolor").colorpicker("val");
$("#mycolor").colorpicker("val", "#d0d0d0");
https://github.com/evoluteur/colorpicker
