插件 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">

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了