jQuery MiniColors 颜色选择器技术文档

1. 安装指南

通过 NPM 安装

要安装 jQuery MiniColors 颜色选择器，请使用以下命令：

npm install --save @claviska/jquery-minicolors

注意： 在 NPM 上存在另一个未命名空间的版本，该版本已过时且不受支持。请确保使用官方的 NPM 版本以获得最新的更新和支持。

2. 项目的使用说明

引入文件

在您的 HTML 文件中，首先需要引入 jQuery 和 MiniColors 的 CSS 及 JS 文件：

<link rel="stylesheet" href="path/to/jquery.minicolors.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.minicolors.min.js"></script>

初始化插件

在页面加载完成后，您可以通过以下方式初始化 MiniColors 插件：

$(document).ready(function() {
    $('.color-picker').minicolors();
});

其中，color-picker 是您希望应用颜色选择器的输入框的类名或 ID。

示例代码

以下是一个简单的示例，展示如何在输入框中使用 MiniColors 插件：

<input type="text" class="color-picker" value="#ff6161">

3. 项目 API 使用文档

配置选项

MiniColors 提供了多种配置选项，您可以通过这些选项自定义颜色选择器的行为和外观。以下是一些常用的选项：

• defaultValue: 默认颜色值。
• letterCase: 颜色值的大小写形式，可以是 'uppercase' 或 'lowercase'。
• position: 颜色选择器弹出窗口的位置，可以是 'bottom left', 'top left', 'bottom right', 'top right' 等。
• theme: 颜色选择器的主题，可以是 'default', 'bootstrap', 'foundation' 等。

示例：

$('.color-picker').minicolors({
    defaultValue: '#3498db',
    letterCase: 'uppercase',
    position: 'top left',
    theme: 'bootstrap'
});

方法

MiniColors 还提供了一些方法，用于在运行时控制颜色选择器的行为：

• destroy(): 销毁颜色选择器实例。
• hide(): 隐藏颜色选择器弹出窗口。
• show(): 显示颜色选择器弹出窗口。
• value(): 获取或设置颜色选择器的当前值。

示例：

// 隐藏颜色选择器
$('.color-picker').minicolors('hide');

// 获取当前颜色值
var currentColor = $('.color-picker').minicolors('value');

4. 项目安装方式

通过 NPM 安装

如前所述，您可以通过 NPM 安装 jQuery MiniColors：

npm install --save @claviska/jquery-minicolors

手动下载

您也可以从项目的 GitHub 仓库手动下载源代码，并将其包含在您的项目中。下载后，将 jquery.minicolors.css 和 jquery.minicolors.min.js 文件引入到您的 HTML 中即可。

<link rel="stylesheet" href="path/to/jquery.minicolors.css">
<script src="path/to/jquery.minicolors.min.js"></script>

通过以上步骤，您可以成功安装并使用 jQuery MiniColors 颜色选择器插件。