Farbtastic 技术文档

2024-12-20 13:24:51作者：尤辰城Agatha

1. 安装指南

为了使用 Farbtastic 插件，您需要遵循以下步骤：

确保您的页面已经包含了 jQuery 库。
下载 Farbtastic 插件文件 farbtastic.js。
在 HTML 文件的 <head> 部分或页面的底部，包含这个 JavaScript 文件：
```
<script type="text/javascript" src="farbtastic.js"></script>
```
如果您使用的是不支持 HTML5 canvas 元素的浏览器（如 Internet Explorer），则需要包含 Explorer Canvas polyfill。

2. 项目的使用说明

基本使用

在您的 HTML 中包含一个用于显示颜色选择器的 <div> 元素和一个文本输入框，并为它们设置唯一的 ID：
```
<form>
  <input type="text" id="color" name="color" value="#123456" />
</form>
<div id="colorpicker"></div>
```
在文档的 ready() 事件中初始化颜色选择器，并将其与文本输入框相连接：
```
$(document).ready(function() {
  $('#colorpicker').farbtastic('#color');
});
```

高级使用

jQuery 方法

使用 $(...).farbtastic() 可以在选定的对象中创建颜色选择器。callback 是可选的，可以是：

DOM 节点、jQuery 对象或 jQuery 选择器：颜色选择器将同步选中元素的值（对于表单元素）和颜色。
函数：每次用户选择不同的颜色时，这个函数将被调用。

对象方法

$.farbtastic(placeholder) 与使用 $(placeholder).farbtastic() 相同，但它返回的是一个 Farbtastic 对象而不是 jQuery 对象。这允许您使用下面的 Farbtastic 方法和属性。注意，每个占位符只有一个 Farbtastic 对象。如果使用相同的占位符两次调用 $.farbtastic(placeholder)，每次都会得到相同的对象。

可选的回调参数的行为与 jQuery 方法中的相同。

选项

$(...).farbtastic(options) 或 $.farbtastic(placeholder, options) 允许您传递除了回调之外的其他选项。可能的选项包括：

callback: 如前所述的回调。
height: 小部件的高度。
width: 小部件的宽度。

例如：$(...).farbtastic({ callback: '#color2', width: 150 })。

方法

.linkTo(callback)：允许您设置一个新的回调。任何现有的回调将被移除。
.setColor(string)：将选择器的颜色设置为给定的十六进制颜色。
.setColor([h, s, l])：将选择器的颜色设置为规范化的 HSL 颜色（0..1 的比例）。

属性

.linked：此选择器链接到的元素（jQuery 对象）或回调函数。
.color：当前的十六进制颜色表示。
.hsl：当前的规范化 HSL 颜色。

3. 项目 API 使用文档

请参考上文中的“高级使用”部分，其中详细介绍了如何使用 Farbtastic 提供的 API 方法。

4. 项目安装方式

项目的安装方式已在“安装指南”部分进行了说明。请按照给定步骤下载并包含必要的 JavaScript 文件。

登录后查看全文