Colorpicker 基于 jQuery 的网页颜色选择器插件 - 文章教程

Colorpicker 基于 jQuery 的网页颜色选择器插件

发布于 2020-04-02 字数 4184 浏览 1414 评论 0

Color Picker 是一款能够让我们像在 Photoshop 里面选择颜色一样在网页中选择颜色的 jQuery 插件。

Colorpicker 基于 jQuery 的网页颜色选择器插件

特征

  • 在页面元素平面模式
  • 颜色选择功能强大的控件
  • 容易定制通过改变一些图像的外观
  • 可视选择器颜色变化

简单使用

$('#colorpickerHolder').ColorPicker({flat: true});

附加到一个文本字段,并使用回调函数来更新字段的值的颜色,并提交颜色设置在该领域的值。

<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>
$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
  onSubmit: function(hsb, hex, rgb, el) {
    $(el).val(hex);
    $(el).ColorPickerHide();
  },
  onBeforeShow: function () {
    $(this).ColorPickerSetColor(this.value);
  }
})
.bind('keyup', function(){
  $(this).ColorPickerSetColor(this.value);
});

使用回调的实现预览的颜色和添加颜色动画。

$('#colorSelector').ColorPicker({
  color: '#0000ff',
  onShow: function (colpkr) {
    $(colpkr).fadeIn(500);
    return false;
  },
  onHide: function (colpkr) {
    $(colpkr).fadeOut(500);
    return false;
  },
  onChange: function (hsb, hex, rgb) {
    $('#colorSelector div').css('backgroundColor', '#' + hex);
  }
});

下载地址

colorpicker.zip (89 kb): jQuery, Javscript files, CSS files, images, examples and instructions.

引入文件

Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.

<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
<script type="text/javascript" src="js/colorpicker.js"></script>

开始使用

All you have to do is to select the elements in a jQuery way and call the plugin.

$('input').ColorPicker(options);

可选参数

A hash of parameters. All parameters are optional.

eventName string The desired event to trigger the colorpicker. Default: ‘click’
color string or hash The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: ‘ff0000’
flat boolean Whatever if the color picker is appended to the element or triggered by an event. Default false
livePreview boolean Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true
onShow function Callback function triggered when the color picker is shown
onBeforeShow function Callback function triggered before the color picker is shown
onHide function Callback function triggered when the color picker is hidden
onChange function Callback function triggered when the color is changed
onSubmit function Callback function triggered when the color it is chosen

设置颜色

If you want to set a new color.

$('input').ColorPickerSetColor(color);

The ‘color’ argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0