如何创建一个快速扩展到基诺UI窗口的图标变化

Question

我似乎无法弄清楚为什么剑道无法正常工作。我试图在kendo窗口上创建一个自定义按钮，将窗口扩大到75％，然后再回到34％。

VIEW

@(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"); 
    } 
}); 

有关 setOptions()方法

Demo

一个有趣的事情是，它再重新创建整个窗口，包括按钮。所以在执行setOptions之后，$btn变量引用被破坏，你必须再次找到这个按钮。这就是为什么我只有在新宽度为75%的情况下才更改图标if，否则该图标会重新创建为初始状态。