插件 jQuery.Iris 中文 API 文档

🌙
手机阅读
本文目录结构

插件 jQuery.Iris 中文 API 文档

一个(非常棒的)颜色选择器

依赖

Iris 依赖于 jQuery 1.7 及更高版本 draggable 以及 slider jQuery UI 组件。(然后那些假设 jQuery UI core,widget 和 mouse 组件。只需使用 jQuery UI 下载构建器,它将整理你的依赖项)

只需使用 jQuery 和 jQuery UI 的最新版本,你就会变得金色。

基本设置

下载 repo 上的 zip 或克隆它或拉它或任何你最舒服的。目录中有缩小版或完整版 dist。-basic 版本不捆绑 Color.js 依赖项,然后您必须单独包含它。

然后执行以下操作:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="path/to/iris.min.js"></script>
<script src="path/to/my/javascript.js"></script>

请注意,上面的示例只是一个示例。自行决定。例如,您可能不需要所有 jQuery UI,并且您可能需要某种系统来连接 / 管理脚本。

用法

Iris 易于使用,只需将其分配给 input 元素即可。说你有:

<input type="text" id='color-picker' value="#bada55" />

现在,假设您有一个类似 path/to/my/javascript.js 上面的 JavaScript 文件,请写下以下内容:

jQuery(document).ready(function($){
    $('#color-picker').iris();
});

现在你将在该元素上有一个颜色选择器。好吧,默认情况下,它只会在您单击 / 聚焦输入元素时显示。如下所示:

选项

默认值很强大,但对于你想要使用 Iris 的情况它们也可能是错误的。Iris 在你调用它时会选择一个选项对象。就像一个更广泛的,默认显示选择器:

jQuery(document).ready(function($){
    $('#wide-load').iris({
        width: 400,
        hide: false
    });
});

生产:

好吧,聊天聊天就足够了。这是默认选项键列表,后面是它们的更多详细信息:

options = {
    color: false,
    mode: 'hsl',
    controls: {
        horiz: 's', // horizontal defaults to saturation
        vert: 'l', // vertical defaults to lightness
        strip: 'h' // right strip defaults to hue
    },
    hide: true, // hide the color picker by default
    border: true, // draw a border around the collection of UI elements
    target: false, // a DOM element / jQuery selector that the element will be appended within. Only used when called on an input.
    width: 200, // the width of the collection of UI elements
    palettes: false // show a palette of basic colors beneath the square.
}

颜色

如果 Iris 附加到 input 元素,它将首先尝试获取其 value 属性。否则,您可以提供 Color.js 支持的任何类型的颜色。(Hex,rgb 和 hsl 是很好的赌注。)

模式

Iris 可以运动各种外观。它 hsl 根据您的需要支持和’hsv’模式。

控制

虹膜像体操运动员一样灵活。您可以更改它控件的所有 3 个方向。只要确保你覆盖了所有 3 个方面 hsl 或者 hsv 您在选择模式选项。horiz’vert’分别设置方形的水平和垂直方面,而 strip 选项设置最右边的条带。

隐藏

Iris 隐藏,直到你默认调用它。设置为 false 立即显示。

边界

设置为 true 在正方形和条形控件周围显示边框。

目标

如果要将 Iris 附加到 input 元素上,您可能希望将其显示在您调用它的元素之后的其他位置。提供 DOM 元素或 jQuery 选择器。未在 input 元素上调用时将忽略此项。

宽度

组合接口应占用的宽度(以像素为单位)。因为 Iris 是使用 CSS 渐变绘制的,所以你可以制作任何尺寸。

调色板

设置为 true 显示一行常用调色板颜色。这在当前所选颜色似乎没有可用颜色的情况下特别有用。例:

$('#palette-example').iris({
    hide: false,
    palettes: true
});

或者,您可以提供一系列颜色以使用您自己的调色板颜色。

$('#palette-example2').iris({
    hide: false,
    palettes: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f']
});

回调

更改

change 当颜色改变时调用 Iris 来做东西时提供一个函数。在下面的示例中,标题将在您修改 Iris 时更改颜色。

$('#change-example').iris({
    hide: false,
    change: function(event, ui) {
        // event = standard jQuery event, produced by whichever control was changed.
        // ui = standard jQuery UI object, with a color member containing a Color.js object

        // change the headline color
        $("#headlinethatchanges").css( 'color', ui.color.toString());
    }
});

有关您可以对该对象执行的操作,请参阅 Color.js 文档 ui.color。在大多数情况下,您只需要 ui.color.toString() 生成十六进制颜色字符串。

变化的标题

方法

Iris 支持开箱即用的几种方法。

选项

像大多数基于 jQuery UI 的小部件一样,您可以获取 / 设置最终传递给 Iris 的所有选项。controls 如上所述,该选项可能有点遗憾。

$(element).iris('option', 'width'); // retrieve the current width
$(element).iris('option', 'width', 500); // set the width to 500px. Because reasons.

颜色

Iris 颜色的 get / set 方法,带有扭曲:true 在第二个参数中调用以返回关联 Color.js 对象。

$(element).iris('color'); // retrieve the current color
$(element).iris('color', true); // retrieve the Color.js object
$(element).iris('color', '#bada55'); // set the color to #bada55

节目

揭示隐藏的虹膜颜色选择器

$(element).iris('show');

隐藏

隐藏可见的虹膜颜色选择器

$(element).iris('hide');

切换

切换虹膜颜色选择器的可见性

$(element).iris('toggle');

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

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

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

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

关注我: Github / 知乎

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

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

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

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

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