如何使用图标更改创建快速扩展至 Kendo UI 窗口

Question

我似乎无法弄清楚为什么剑道不起作用。我正在尝试在剑道窗口上创建一个自定义按钮，以将窗口扩大到 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();
});

这里发生了两件事：

1. 当窗口打开时，我可以运行展开。但是 DOM 在 setOption 之后重置并继续显示 '>' 而不是更改类。

2. 它展开后它永远不会缩回，即使我将 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();
   });
   

它发生一次，永远不会再发生。除非我重新加载窗口。我想做的只是剑道窗口上的一个简单的扩展和收缩按钮。我不确定这是怎么做到的。

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() 方法的一个有趣之处在于它再次重新创建了整个窗口，包括按钮。所以setOptions 执行后，$btn 变量引用被破坏，你必须再次find按钮。这就是为什么我只在新宽度为75% 时才设置if 更改图标的原因，否则图标将再次创建为其初始状态。