Pick-a-color

洋yangyang 2016-05-30

展开全文

文章目录

特点
为你的用户
为你
使用方法
编写CSS使用默认的Bootstrap设置
完整的代码
方法
可选参数
详细介绍
浏览器测试
IE不支持
移动浏览器不支持
相关链接

Pick-a-Color是一个非常简单，并且使用超简单的jQuey插件，基于Bootstrap前端开发主题，这个插件兼容移动端的选择效果，能够在手机上实现和PC电脑上相同的功能。

特点

为你的用户

灵活的文本输入

支持 HEX, RGB, HSL, HSV, HSVA, 和颜色名称输入，感谢 Brian Grinstead’s amazing Tiny Color.

颜色保存

保存最近使用的16个颜色，颜色值保存在HTML5本地储存或Cookie中。

基本的调色板

易于使用的预设色彩，可以很方便的减轻明度和亮度。

先进的调色板

让用户操作颜色饱和度、频谱和色调，以获得任何颜色。

为你

可供测试

测试在 Chrome (Mac/PC/iOS), Safari (Mac/iOS), IE 8+, Firefox (Mac/PC) 和 Opera (Mac/PC)等浏览器中。

没有语法冲突

匿名JavaScript功能和命名空间的CSS不会弄乱你的代码。

简单的初始化

只要三行HTML代码和一行JavaScript代码。

超简单

你没有写你自己的颜色选择器。

使用方法

通过 Bower 安装这个插件

bower install pick-a-color

编写CSS使用默认的Bootstrap设置

1、下载插件并且引入插件文件

添加CSS和JS在/build目录中的CSS和JS文件夹，在您的文件中引入他们：

基于 Bootstrap 3使用Pick-a-Color 1.2.3，在 <head> 标签中：

<link rel="stylesheet" href="css/bootstrap-3.0.0.min.css">
<link rel="stylesheet" href="css/pick-a-color-1.2.3.min.css">

在文档结束位置，</body>标签之前：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/tinycolor-0.9.14.min.js"></script>
<script src="js/pick-a-color-1.2.3.min.js"></script>

基于 Bootstrap 2, 使用 Pick-a-Color 1.1.8，在 <head> 标签中：

<link rel="stylesheet" href="css/bootstrap-2.2.2.min.css">
<link rel="stylesheet" href="css/pick-a-color-1.1.8.min.css">

在文档结束位置，</body>标签之前：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/tinycolor-0.9.14.min.js"></script>
<script src="js/pick-a-color-1.1.8.min.js"></script>

2、编写您的HTML代码：

<input type="text" value="YOUR-DEFAULT" name="YOUR-NAME" class="pick-a-color form-control">

你的独特的标识的颜色选择器代替your-name（例如 “border-color” or “background-color”）和默认的颜色你想在颜色选择器显示your-default。例如，你可能看起来像这样：

<input type="text" value="000" name="border-color" class="pick-a-color form-control">

注意

如果你不提供一个name的属性，将添加的模式”pick-a-color-int.”
你可以改变你的input的样式名称，但一定要符合它在JavaScript中的下一步，要知道，类的“pick-color”将被添加无论。

3、这个地方在DOM准备好你的JavaScript。确保类选择器匹配DIV类（S），你想要一个pick-a-color：

$(".pick-a-color").pickAColor();

4、优化IE和移动的支持，我建议你添加这些标签<head>：

<meta http-equiv="x-ua-compatible" content="IE=10">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

你有一个颜色选择器！你甚至可能会有几个！

完整的代码

这里是如何使用简单的HTML页面可能pick-a-color实例看：

<!doctype html>
<html>
 <head>        
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="IE=10">      
  <link rel="stylesheet" href="css/bootstrap-2.2.2.min.css">
  <link rel="stylesheet" href="css/pick-a-color-1.1.5.min.css">          
 </head>
 <body>

  <input type="text" value="222" name="border-color" class="pick-a-color form-control">
  <input type="text" value="aaa" name="font-color" class="pick-a-color form-control">
  <input type="text" value="551033" name="highlight-color" class="pick-a-color form-control">
  <input type="text" value="eee" name="contrast-color" class="pick-a-color form-control">
  <input type="text" class="pick-a-color form-control">
    
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="js/tinycolor-0.9.14.min.js"></script>
  <script src="js/pick-a-color-1.1.5.js"></script>    

  <script type="text/javascript">

   $(document).ready(function () {
    $(".pick-a-color").pickAColor();
   });

  </script>
</body>
</html>

方法

每次一个用户选择一个新的颜色（或输入一个手动），将有一个改变事件的输入字段，下面的示例代码从一个pick-a-color与ID初始化访问新的颜色 border-color 和类 pick-a-color：

$("#border-color input").on("change", function () {
  console.log($(this).val());
});

可选参数

如果你想改变任何pick-a-color的选项，指定您的首选设置这样的：

$(".pick-a-color").pickAColor({
  showSpectrum            : true,
  showSavedColors         : true,
  saveColorsPerElement    : false,
  fadeMenuToggle          : true,
  showHexInput            : true,
  showBasicColors         : true,
  allowBlank              : false,
  inlineDropdown          : false
});

详细介绍

浏览器测试

我测试 Pick-a-Color 在下面的浏览器中：

Google Chrome 24.0.1312.57 – 32.0.1700.107 (Mac OSX, Windows 7, Windows XP, iOS 6.0.2)
Safari 6.0.2 – 6.1.0 (Mac OSX and iOS)
Internet Explorer 10 (Windows 7)
Internet Explorer 9 (Windows 7)
Internet Explorer 8 (Windows XP)
Firefox 18.0.1 – 26.0 (Mac OSX and Windows 7)
Opera 12.13 – 12.14 (Mac OSX and Windows 7)

在这些浏览器中的小问题记录在案 here，唯一的主要平台，我还没有能够测试，但安卓。我正努力工作。

IE不支持

我强烈推荐使用 X-UA-COMPATIBLE 标签在你的网页中，确保Internet Explorer 8和更高的使用自己的“浏览器模式”而不是切换到浏览器模式的前一个版本。它像这样工作的：

<meta http-equiv="x-ua-compatible" content="IE=10">

移动浏览器不支持

你必须使用你的HTML的 <head> 视口标签的内容将显示在正确的尺寸在移动浏览器。它像这样的作品：

<meta name="viewport" content="width=device-width, initial-scale=1.0">