主页 » 建站笔记 » 正文

几款好用的基于jQuery的颜色选择器(jQuery调色板)

 bandian2015/03/16 16:08 5,269 ℃ 0条点评
小号字体中号字体大号字体
前几天在修改某个wordpress主题的时候,想到在后台如果有一个控制前台页面各元素颜色的功能应该是很人性化的,于是以颜色选择器作为关键词搜索了下,相关的...

前几天在修改某个wordpress主题的时候,想到在后台如果有一个控制前台页面各元素颜色的功能应该是很人性化的,于是以颜色选择器作为关键词搜索了下,相关的jquery插件很多,试用了几个,选了几个具有代表性的记在这里备份一下。

1.ColorPicker

ColorPicker是一款国人制作的基于jQuery的颜色选择器。关于它的介绍,引用作者原话:“它使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。"

js文件只有6KB,并且像作者说的,不需要css文件的支持.

2206_1

遗憾的是者在很久以前就已经不再更新了。。。

以下是调用方法:

$("#cp1").colorpicker({
    fillcolor:true
});

prettyprint ">lang-js"

演示及下载

演示地址 插件下载

2.Farbtastic

Farbtastic应该是被使用最多的一款插件了(哈哈,我猜的,因为它的界面让我有种似曾相识的感觉,估计以前见过),客观原因是Farbtastic同样非常轻巧,js+css两个文件一共才12KB。

很友好的界面,估计你看到了也会感到熟悉:

Farbtastic

调用方法:

  $(document).ready(function() {
    //$('#demo').hide();
    var f = $.farbtastic('#picker');
    var p = $('#picker').css('opacity', 0.25);
    var selected;
    $('.colorwell')
      .each(function () { f.linkTo(this); $(this).css('opacity', 0.75); })
      .focus(function() {
        if (selected) {
          $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
        }
        f.linkTo(this);
        p.css('opacity', 1);
        $(selected = this).css('opacity', 1).addClass('colorwell-selected');
      });
  });

prettyprint ">lang-js"

演示及下载

演示地址1  演示地址2  插件下载

3.Spectrum

Spectrum应该是这几个插件里面功能最复杂的一个了,看文件大小就知道,js文件76KB,css文件15KB,相对前两款来说简直就是个巨无霸般的存在啊。当然,功能嘛就不用多说了,不信你可以去看一下演示页面。

2248_1

因为我拿来是用在后台的输入框中,所以是以下面这种方法调用的:

<input type='color' name='color2' value='#3355cc' />

prettyprint ">lang-html"

演示及下载

演示地址 插件下载


由于我使用的时候仅仅只是需要在后台页面的输入框中插入一个颜色值,对插件的功能要求并不高,并且也考虑到插件的大小。所以在试用之后最终选择了界面相对要简洁友好的Farbtastic来使用,最终效果如下:

2256_2
上一篇:linux各发行版操作系统下载
下一篇:huhamhire-hosts——可自动获取hosts的科学上网工具
版权信息
本文遵循 BY-NC-SA 共享方式,永久链接:https://www.augsky.com/?p=734
转载请注明转自 » 格部落格 » 几款好用的基于jQuery的颜色选择器(jQuery调色板)

已有0条评论,欢迎点评!

骚年,现在来一发沙发就是你的。