如何創建一個快速擴展到基諾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，否則該圖標會重新創建爲初始狀態。