如何使用图标更改创建快速扩展到 Keno UI window

Question

我似乎无法弄清楚为什么 kendo 不起作用。我正在尝试在 kendo window 上创建一个自定义按钮，以将 window 扩展到 75%，然后返回到 34%。

查看

@(Html.Kendo().Window()
    .Name("stockLineWindow").HtmlAttributes(new { @class = "windows" })
    .Title("Stock")
    .Draggable()
    .Resizable(resizable => resizable.Enabled(true))
    .Visible(false)
    .Scrollable(false)
    .Actions(actions => actions.Minimize().Maximize().Custom("arrow-chevron-right"))
)

JAVASCRIPT

var stkWrapper = $("#stockLineWindow").data("kendoWindow");

var expand = stkWrapper.wrapper.find(".k-i-arrow-chevron-right");
expand.click(function (e) {
            stkWrapper.setOptions({
                width: "75%"
            });
            $(this).removeClass("k-i-arrow-chevron-right");
            $(this).addClass("k-i-arrow-chevron-left");
        e.preventDefault();
    });


var contract = stkWrapper.wrapper.find(".k-i-arrow-chevron-left");
expand.click(function (e) {
    stkWrapper.setOptions({
        width: "34%"
    });
    $(this).removeClass("k-i-arrow-chevron-left");
    $(this).addClass("k-i-arrow-chevron-right");
    e.preventDefault();
});

这里发生了两件事：

当 window 打开时，我可以运行展开。但是 DOM 在 setOption 后重置并继续显示“>”而不是更改 class。

展开后它永远不会缩回，即使我将 javascript 更改为：

 var stkWrapper = $("#stockLineWindow").data("kendoWindow");

 var expand = stkWrapper.wrapper.find(".k-i-arrow-chevron-right");
 expand.click(function (e) {
     if (stkWrapper.options.width <= "75%") {
        stkWrapper.setOptions({
        width: "75%"
    });
    e.preventDefault();
} else {
    stkWrapper.setOptions({
        width: "34%"
    });

}
e.preventDefault();
});

它发生一次，再也不会发生。除非我重新加载 window。我想要做的只是 Kendo window 上的一个简单的展开和收缩按钮。我不确定这是怎么做到的。

Answer 1

试试这个代码：

$(wnd.wrapper).on("click", ".expand-button", function() {
    let $btn = $(this),
        wnd = $("#wnd").data("kendoWindow"),
        width = "31%";

    if ($btn.hasClass("k-i-arrow-chevron-right")) {
        width = "75%";
    }

    wnd.setOptions({
        width: width
    });

    if (width == "75%") {
        $(wnd.wrapper).find(".expand-button")
            .removeClass("k-i-arrow-chevron-right")
            .addClass("k-i-arrow-chevron-left");
    }
});

Demo

关于 setOptions() 方法的一件有趣的事情是它再次重新创建了整个 window，包括按钮。所以在 setOptions 执行后， $btn 变量引用被破坏，你必须再次找到按钮。这就是为什么我只在新宽度为 75% 时才 if 更改图标，否则图标将再次创建为初始状态。

如何使用图标更改创建快速扩展到 Keno UI window

How to create a quick expand to a Keno UI window with icon changes

javascript

jquery

telerik

kendo-ui