javascript - KendoUI Colorpicker inline?
问题描述
I am using the jQuery version of kendoUI and trying to make a colorpicker work. I have gone through the documentation but it seems that there is no way to make the colorpicker work with a custom link. All demos I see, they have (probably the link gets converted to this button) a picker button and dropdown like this: kendo color picker
What I need is a bit different. Let's say I have the following sentence:
lorem ipsum whatever works for this demo click here lorem ipsum.
I want to open the kendo Colorpicker color dialog on clicking the "click here" link. Please note that I don't need a button anywhere in the page. Just need to show the color chooser box on clicking that link, and do something with it (I know there is an event for that. I will do it myself.) once the user chooses a color.
Anybody knows how to do this?
解决方案
I managed to make a workaround for that. It consists on creating a hidden color picker inside the text and opening it as user clicks on the link. Check it out:
<!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>
First a wrapper
div
is created after the clicked link. It contains aninput
of color type, which kendo's need to create the color picker;Then the kendo color picker is initialized over that input setting up the
change
event;ColorPicker is manually opened with
open()
method;The wrapper is hidden. It must be visible before being opened otherwise the color pallete is placed on top-left. Note that the pallete is created outside the wrapper, so hidding the wrapper doesn't affects the pallete itself.
推荐阅读
- python - Django TypeError:__str__ 返回非字符串(模型名称)
- python - 使用请求继承对象时,“十进制”类型的对象不是 JSON 可序列化错误
- r - ggsurvplot 在 Rshiny 中不起作用
- c - 使用指针存储字符串
- sql - BigQuery 中的潜在客户和分析功能
- fortran - 错误 #6451:在此上下文中需要一个虚拟参数名称
- java - 如何在运行时在方法中自动装配类
- java - 有没有办法像处理主报告一样填写子报告?(贾斯珀报告)
- windows-installer - Electron windows installer 需要在安装之间调用批处理文件,完成后继续安装
- php - 将 .env 参数替换为文件的内容