javascript - 如何使用图标更改快速扩展到 Keno 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();
   });
   

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

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 变量引用被破坏，您必须再次找到按钮。这就是为什么我放置一个 if 仅当新宽度为 75% 时才更改图标，否则图标将再次创建为初始状态。