Kendo UI 颜色选择器在线？

Question

我正在使用 jQuery 版本的 kendoUI 并尝试使用颜色选择器。我已经完成了 documentation，但似乎没有办法让颜色选择器与自定义 link 一起工作。我看到的所有演示，它们都有（可能 link 被转换为这个按钮）一个选择器按钮和下拉菜单，如下所示： kendo color picker

我需要的有点不同。假设我有以下句子：

lorem ipsum whatever works for this demo click here lorem ipsum.

我想通过单击“单击此处”link 打开 kendo 拾色器颜色对话框。请注意，我不需要页面中任何地方的按钮。只需要在单击 link 时显示颜色选择器框，然后用它做一些事情（我知道有一个事件。我会自己做。）一旦用户选择了颜色。

有人知道怎么做吗？

Answer 1

我设法解决了这个问题。它包括在文本中创建一个隐藏的颜色选择器，并在用户单击 link 时将其打开。看看：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
  
  <style type="text/css">
    .colorpicker-container {
      display: inline-block;
    }
  </style>
</head>
<body>
  
  <p>lorem ipsum whatever works for this demo <a href='#' class='colorpicker-link'>click here</a> lorem ipsum.</p>
  
<script>
  $('.colorpicker-link').on('click', function(e) {
      let $wrapper = $('<div class="colorpicker-container"><input type="color" /></div>').insertAfter($(this)),
          colorPicker = $wrapper.find('input').kendoColorPicker({
              change: function(e) {
                  console.log(e.value);
              }
          }).data('kendoColorPicker');
    
      colorPicker.open();
      $wrapper.hide();
  });
</script>
</body>
</html>

Dojo

首先创建包装器 div 在单击 link 之后。它包含一个input的颜色类型，kendo需要创建颜色选择器；
然后 kendo 颜色选择器在设置 change 事件的输入上初始化；
ColorPicker用open()方法手动打开；
包装器已隐藏。在打开之前它必须是可见的，否则颜色 palettele 将放在左上角。请注意，调色板是在包装器外部创建的，因此隐藏包装器不会影响调色板本身。

Kendo UI 颜色选择器在线？

KendoUI Colorpicker inline?

javascript

jquery

kendo-ui