jQuery插件Crayonbox Color Picker粉笔画颜色选择器
网页制作中有时需要根椐选择的颜色实现网页色彩CSS样式切换，要实现这种功能就需要制作网页颜色选择器，jQuery插件Crayonbox Color Picker粉笔画颜色选择器是一个比较简单的颜色选择工具，可以非常快速的实现颜色选择效果，可自定义颜色如(red，blue)或(#FF0000, #0000FF)等，先来看一下效果图如下：
使用说明
需要使用jQuery库文件和Crayonbox Color Picker库文件
可自定义颜色选择器CSS样式，默认将会生成一个<span></span>元素，其中类名为crayonbox，可自定义crayonbox样式，参考如下：
- <style type="text/css">
- .crayon {color: #000;
- cursor: pointer;
- border: 1px solid #333;
- float: left;
- font-family: Fixed, monospace;
- margin: 1px;
- text-align: center;
- width: 1em;
- }
- </style>
使用实例
一，包含文件部分
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.crayonbox.js"></script>
二，HTML部分(简单的文本框)
- <input type="text" id="biuuu" />
生成的颜色选择器
三，Javascript部分(调用Crayonbox Color Picker)
- $(document).ready(function()
- {
- $('#biuuu').crayonbox();
- });
由上实例可知使用jQuery插件Crayonbox Color Picker粉笔画颜色选择器非常简单，点击需要的颜色即可实现颜色选中，实现丰富的颜色切换效果。
其它使用实例
一，自定义颜色实现颜色选择器
- $('#biuuu').crayonbox({
- colors: new Array('#F00', '#0000FF')
- });
二，定制个性化颜色选择器
- $('#biuuu').crayonbox({
- colors: new Array('#777','#888','#999','#AAA','#BBB','#CCC','#DDD'),
- selected: '#999',
- crayonTag: 'button',
- clearButton: true
- });
各参数详解、
colors表示颜色数组，可自定义
selected表示默认选中颜色
crayonTag颜色标签，默认为span(实例)，如上为button
clearButton表示是否显示冲除颜色选择按钮
由上可知Crayonbox Color Picker颜色选择器使用非常简单，但jQuery插件Crayonbox Color Picker粉笔画颜色选择器却可实现丰富的效果，值得推荐。
neptune -