使用方法 本插件是基于jQuery UI，所以应该先行下载jQuery UI,当然jQuery也必不可少 - 引入和初始化
引入js文件
1 2 3 | <script src="https://ajax./ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax./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 插件应该放在此调色板之前 ，被墙的用户请使用其他cdn
引入css文件 1 2 | <link rel="stylesheet" type="text/css" href="http://ajax./ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.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.设置颜色 1 2 3 | $("#mycolor").colorpicker({
color: "#ffffff"
});
|
2.定义调色板主题样式 1 2 3 | $("#mycolor").colorpicker({
defaultPalette: 'web'
});
|
3.本地化调色板插件语言 1 2 3 | $("#mycolor").colorpicker({
strings: "主题颜色,标准颜色,web颜色,主题颜色,返回调色板,历史记录, 没有历史记录."
});
|
4.隐藏调色板 1 | $("#mycolor").colorpicker("hidePalette");
|
5.调色板选中颜色后触发的事件 1 2 3 | $("#mycolor").on("change.color", function(event, color){
$('#title').css('background-color', color);
});
|
6.鼠标移动到颜色后触发的事件 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
|
