アイコンを変更してキノUIウィンドウにすばやく展開する方法

Question

剣道がうまくいかない理由がわかりません。ウィンドウを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. を窓iが拡張を実行することができるよ開いたとき。しかし、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の実行後に、変数参照が壊れている場合は、ボタンを再度検索する必要があります。そのため、ifは新しい幅が75%の場合にのみアイコンを変更します。そうでない場合はアイコンが再び初期状態として作成されます。