阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Pick a Color 中文API文档

      插件 jQuery.Pick a Color 中文API文档

      一个易于使用的Twitter Bootstrap jQuery颜色选择器

      有一些很棒的颜色选择器插件,但大多数满足技术人员和设计师的需求,提供复杂的控制,以访问可以想象的每种颜色。

      Pick-a-Color旨在方便任何人使用。该界面基于Twitter Bootstrap样式,因此几乎任何网站的样式都很可爱。

      特征

      为您的网站的用户

      灵活的文本输入:感谢Brian Grinstead令人惊叹的Tiny Color库,接受HEX,RGB,HSL,HSV,HSVA和名称。

      保存的颜色:最多可保存16种最近使用的颜色。颜色存储在localStorage或cookies中。

      高级:高级选项卡允许用户修改色调,饱和度和亮度,使他们的心愿。

      基本调色板:易于使用的预设颜色,可以减轻和变暗。

      厚实的移动风格:拖动很容易,即使在触摸设备上也是如此。

      为了你

      经测试:在Chrome(Mac / PC / iOS),Safari(Mac / iOS),IE 8 +,Firefox(Mac / PC)和Opera(Mac / PC)中测试过。

      没有冲突:匿名JavasScript函数和命名空间CSS不会搞砸你的代码。

      简单初始化:只需一行HTML和一行JavaScript。

      完成:您没有必要编写自己的颜色选择器。‘努夫说。

      如何使用

      用于默认引导程序设置的编译CSS

      对于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>
      

      将其添加到HTML中,只要您想要一个Pick-A-Color。替换YOUR-NAME为颜色选择器的唯一标识符(例如“border-color”或“background-color”),并YOUR-DEFAULT使用您希望在颜色选择器中显示的默认颜色:

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

      例如,你的看起来像这样:

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

      笔记:

      i)如果你没有提供name属性,那么将在“pick-a-color-INT”模式中添加一个属性,其中INT是(非足够的)页面上Pick-a-Color的索引,从0。

      ii)您可以更改您的课程input,但请确保在下一步中将其与您的JavaScript相匹配,并注意无论如何都会添加“pick-a-color”课程…

      在DOM准备好之后,将它添加到您的JavaScript。确保类选择器与div的类匹配:

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

      为了优化IE和移动支持,我建议您将这些标记添加到

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

      当当!你有一个颜色选择器!你甚至可能有几个!

      源自少用于自定义引导程序

      下载源代码:https://github.com/lauren/pick-a-color/archive/master.zip。

      添加src/less/pick-a-color.less到您的LESS文件夹。

      更新以下第7行和第8行中的import语句pick-a-color.less:

      @import "bootstrap-src/variables.less"; 
      @import "bootstrap-src/mixins.less";
      

      至:

      @import "PATH/TO/YOUR/variables.less"; 
      @import "PATH/TO/YOUR/mixins.less";
      

      pick-a-color.less使用自定义变量进行编译。

      返回使用已编译CSS的说明的第1步。

      示例HTML

      下面是一个使用Pick-a-Color的简单HTML页面如何显示的示例:

      <!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="a1beef" name="backgound-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">
      		<input type="text" class="pick-a-color form-control">
      
      		<script src="js/jquery-1.9.1.min.js"></script>
      		<script src="js/tinycolor-0.9.14.min.js"></script>
      		<script src="js/pick-a-color-1.1.5.min.js"></script>
      
      		<script type="text/javascript">
      
      			$(document).ready(function () {
      
      	  		$(".pick-a-color").pickAColor();
      
      			});
      
      		</script>
      
      	</body>
      </html>
      
      

      活动

      每次用户选择新颜色(或手动输入一种颜色)时,change输入字段上都会有一个事件。

      以下是使用名称初始化的Pick-a-Color访问新颜色的示例代码border-color:

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

      选项

      如果您想更改我的任何默认选项,您可以指定首选设置,如下所示:

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

      showSpectrum

      指定每种基本颜色旁边是否有光谱,允许用户使其变亮和变暗。

      showSavedColors

      指定是否存在名为“保存的颜色”的选项卡,用于跟踪用户自定义的最后16种颜色。

      显示高级

      指定是否存在名为“高级”的选项卡,允许用户修改色调,亮度和饱和度以使其心中想要任何颜色。

      saveColorsPerElement(仅适用于showSavedColors) 如果设置为false:页面上的每个Pick-a-Color将显示相同的已保存颜色集,当用户自定义颜色时,这些颜色将不断更新。

      如果设置为true:每个Pick-a-Color将获得自己的一组保存颜色,这些颜色将在用户自定义颜色时更新。使用data-attribute作为键,在页面视图中保存颜色。如果设置为true但您在初始化HTML中没有数据属性,则Pick-a-Colors的行为就像设置为false一样。

      我建议将其设置为false。想象一下,您是一个用户填写大表格来配置自定义页面:您可以找到适合您背景的完美颜色。五个字段之后,您希望将相同的颜色用于链接悬停状态。如果它在“保存的颜色”选项卡中挂出,那就太好了。

      fadeMenuToggle

      指定下拉菜单在打开和关闭时是否应淡入淡出。移动设备会覆盖此设置,其中Pick-a-Color永远不会使用淡入淡出,因为它们在移动浏览器中看起来很糟糕。

      showBasicColors

      指定下拉列表是否应显示用户可从中选择的基本颜色列表。感谢Ryan Johnson添加此功能!

      showHexInput

      指定是否显示十六进制文本输入。如果为false,则输入的输入类型为“hidden”。感谢Ryan Johnson添加此功能!

      allowBlank

      指定该字段是否可以留空。如果颜色输入不是必填字段,请使用此选项。感谢San添加此功能!

      inlineDropdown

      指定下拉列表是否应显示在桌面浏览器的输入字段下方(而不是默认值,右侧)。

      经过测试的浏览器

      我在这些浏览器中测试了Pick-a-Color:

      • 谷歌浏览器24.0.1312.57 - 32.0.1700.107(Mac OSX,Windows 7,Windows XP,iOS 6.0.2)
      • Safari 6.0.1 - 6.1.0(Mac OSX和iOS 6.0.2)
      • Internet Explorer 10(Windows 7)
      • Internet Explorer 9(Windows 7)
      • Internet Explorer 8(Windows XP)
      • Firefox 18.0.1 - 26.0(Mac OSX和Windows 7)
      • Opera 12.13 - 12.14(Mac OSX和Windows 7)

      这些浏览器中的小问题记录在这里:https://github.com/lauren/pick-a-color/issues

      我还没能测试的唯一主要平台是Android。我在做这个工作。

      有关IE支持的说明

      我强烈建议您在html中使用X-UA-COMPATIBLE标记,

      以确保Internet Explorer 8及更高版本使用自己的“浏览器模式”,而不是切换到以前版本的浏览器模式。它的工作原理如下:

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

      移动支持说明

      您必须在html中使用视口标记,

      以便在移动浏览器中以正确的大小显示内容。它的工作原理如下:

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