Question

我正在尝试剑道kendoColorPicker 改变事件。
当改变颜色并点击应用按钮时它的工作。（改变字体颜色）。
但我想设置是否单击取消按钮然后设置默认字体颜色任何想法如何完成。
这很简单。

<div id="example" class="k-content">
            <label for="hsv-picker">Font:</label>
                <input type="color" id="picker" value="#000000" data-role="colorpicker">
     <script>
        kendo.init($("#example"));
        $("#picker").each(function(){
            var colorPicker = $(this).data("kendoColorPicker");

            colorPicker.bind({
                change: function(e) {
                $("#example").css("color",e.value);
                    console.log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
                }
            });
        });
    </script>
</div>

提前感谢。

Answer 1

默认情况下，取消按钮会将颜色恢复为之前的值，因此我不确定您是否需要控制取消按钮点击。您只需将选择器的初始值设置为所需的默认值即可。

但是，您需要使用close事件。这是一个例子。

$('#hsv-picker').kendoColorPicker({
    select: function (e) {
        log("Select in picker #" + this.element.attr("id") + " :: " + e.value);
    },
    change: function (e) {
        log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
    },
    open: function () {
        log("Open in picker #" + this.element.attr("id"));
    },
    close: function (e) {
        log("Close in picker #" + this.element.attr("id"));
    }
});

无论是否发生变化，都会在控件关闭时关闭。要仅捕获取消点击，您必须设置委托点击事件或在open，change和close事件之间使用一些标记。以下是处理委托点击事件的示例。

$('body').on('click', '.k-controls button.cancel', function(){
    alert('Cancel clicked');
});

<强> Here's a fiddle

如何在剑道颜色选择器上创建取消按钮的功能

1 个答案: