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

发布于 2020-04-02 10:52:52 字数 4022 浏览 1624 评论 0

Color Picker 是一款能够让我们像在 Photoshop 里面选择颜色一样在网页中选择颜色的 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.

eventNamestringThe desired event to trigger the colorpicker. Default: 'click'
colorstring or hashThe default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'
flatbooleanWhatever if the color picker is appended to the element or triggered by an event. Default false
livePreviewbooleanWhatever 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
onShowfunctionCallback function triggered when the color picker is shown
onBeforeShowfunctionCallback function triggered before the color picker is shown
onHidefunctionCallback function triggered when the color picker is hidden
onChangefunctionCallback function triggered when the color is changed
onSubmitfunctionCallback 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}).

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。