首页
/ Farbtastic 技术文档

Farbtastic 技术文档

2024-12-20 22:15:42作者:尤辰城Agatha

1. 安装指南

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

  1. 确保您的页面已经包含了 jQuery 库。

  2. 下载 Farbtastic 插件文件 farbtastic.js

  3. 在 HTML 文件的 <head> 部分或页面的底部,包含这个 JavaScript 文件:

    <script type="text/javascript" src="farbtastic.js"></script>
    
  4. 如果您使用的是不支持 HTML5 canvas 元素的浏览器(如 Internet Explorer),则需要包含 Explorer Canvas polyfill。

2. 项目的使用说明

基本使用

  1. 在您的 HTML 中包含一个用于显示颜色选择器的 <div> 元素和一个文本输入框,并为它们设置唯一的 ID:

    <form>
      <input type="text" id="color" name="color" value="#123456" />
    </form>
    <div id="colorpicker"></div>
    
  2. 在文档的 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 文件。

登录后查看全文
热门项目推荐