阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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');
      
      目录
      目录