Kendo UI - 爲什麼我無法正常打開和關閉窗口？

我試過不同的方法來打開我的窗口，但到目前爲止一切都失敗了。Kendo UI - 爲什麼我無法正常打開和關閉窗口？

我的第一次嘗試是在打開的窗口中點擊一個按鈕，這樣的代碼基於this例如當：

$('#btnUsuarios').click(function (e) { 
    onUsuariosLoad(); 
    var window = $('#usuariosDiv'); 
    if (!window.data('kendoWindow')) { 
     window.kendoWindow({ 
      draggable: true, 
      height: "300px", 
      modal: true, 
      resizable: false, 
      title: "Modal Window", 
      width: "65%", 
      close: hideUsuarios 
     }); 
    } else { 
     window.data('kendoWindow').open(); 
    } 
    hideHomeScreen(); 
    showUsuarios(); 

});

onUsuariosLoad是從遠程的HTML載入對窗口內容的功能，該函數確保只加載一次內容，如果它已經被加載，那麼它不會再加載它，我已經在試圖實現窗口Kendo UI小部件以確保其正常工作之前測試了該函數。

hideHomeScreen是一個隱藏打開窗口div的某些元素的函數。

showUsuarios是一個顯示窗口內容的函數。

它應該檢查是否創建了一個kendoWindow的數據，然後打開窗口，否則它應該創建它。我第一次點擊它的按鈕，但是當我關閉窗口並再次單擊按鈕時，窗口根本不顯示（我正在討論窗口小部件UI，而不是usuariosDiv的內容，我檢查過Firebug和usuariosDiv的內容仍然存在，但窗口小部件UI未顯示）。

第二次嘗試我所做的就是這樣的：

$('#btnUsuarios').click(function (e) { 
    onUsuariosLoad(); 
    $('#usuariosDiv').kendoWindow({ 
     draggable: true, 
     height: "300px", 
     modal: true, 
     resizable: false, 
     title: "Modal Window", 
     width: "65%", 
     close : hideUsuarios 
    }); 
    hideHomeScreen(); 
    showUsuarios(); 
});

這類似於第一學嘗試，但它發生了同樣的事情：它工作正常的第一次，但是當我關閉窗口它未能當我再次點擊按鈕時重新打開窗口。

我的第三次嘗試是基於例如初始化窗口，中心，距離this頁面設置按鈕點擊動作：

var win = $("#usuariosDiv").kendoWindow({ 
    draggable: true, 
    height: "300px", 
    modal: true, 
    resizable: false, 
    visible: false, 
    title: "Modal Window", 
    width: "65%", 
    close: hideUsuarios 
}).data("kendoWindow"); 
$('#btnUsuarios').click(function (e) { 
    onUsuariosLoad(); 
    var win = $("#usuariosDiv").data("kendoWindow"); 
    win.open(); 
    hideHomeScreen(); 
    showUsuarios(); 
});

這並不正確顯示的窗口，而不是顯示一個窗口指定的尺寸，它只顯示一個小點模式窗口。

對於開幕部分，當我嘗試通過窗口上的控件觸發的事件來處理問題時，我關閉窗口的問題就出現了。我不是在談論右上角的關閉按鈕，而是指我在窗口上顯示的任何按鈕。

例如，我嘗試這樣做，關閉窗口：

$('#btnBack').click(function (e) { 
    hideUsuarios(); 
    var window = $('#usuariosDiv'); 
    window.data('kendoWindow').close(); 
});

，但我得到了以下錯誤：Uncaught TypeError: Cannot call method 'close' of undefined。如果你問我爲什麼不簡單地依靠窗口上的默認關閉按鈕，那是因爲有程序，當完成時，需要關閉窗口。

這是我的看法：

<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%>" rel="stylesheet" type="text/css" /> 
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.metro.min.css")%>" rel="stylesheet" type="text/css" /> 
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script> 
    <script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script> 
    <script src="<%: Url.Content("~/Scripts/jquery.signalR-1.0.0-rc1.min.js")%>" type="text/javascript"></script> 
    <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3" type ="text/javascript" ></script> 
    <script src="<%: Url.Content("~/Scripts/index/templates.js")%>" type="text/javascript"></script> 
    <script src="<%: Url.Content("~/Scripts/index/main.js")%>" type="text/javascript"></script> 

    <style type="text/css"> 
     #verticalMenu { 
      top: 39px; 
      left: 0px; 
     } 
    </style> 

</head> 
<body onload="onPageLoad()"> 
    <div id="canvasDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent;"> 
     <div id="alertDiv" style="position: absolute; top: -250px; background-color: #F00; z-index: 50; opacity:1; border-top: 1px solid #FFF; border-right: 1px solid #F5F5F5; border-bottom: 1px solid #D5D5D5; border-left: 1px solid #F5F5F5"> 
      <div id="msgDiv" style="position:absolute;left:10px; right:10px; bottom: 10px; text-align: center;width: 50%; margin: 0px auto;">Alerta Sismo Detectado</div> 
      <div id="btnCloseAlert" style="position: absolute; top: 0px; right: 0"><span class="k-icon k-i-close"></span></div> 
     </div> 
     <div id="homeScreenDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: white; z-index: 10; opacity:1"> 

     </div> 
     <div id="usuariosDiv" style="position: absolute; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; opacity:0"> 

     </div> 
     <div id="sismosDiv" style="position: absolute; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; opacity:0"> 
      <div id="leftBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 190px; height: 100%; background-color: white; z-index:20"> 
       <div onclick="hideSismos()" style="position:absolute;height: 39px; width: 25%; left:0; top:0"><div style="position:absolute; top: 10px; bottom:10px;left:10px;right:10px"><span class="k-icon k-i-arrow-w"></span></div></div> 
       <div style="position:absolute;height: 39px; width: 75%; right:0; top:10px; bottom:10px; text-align:center">Sismos</div> 
       <ul id="verticalMenu" style="position: absolute; width: 99%; height: auto; display: block;" > 
        <li id="Regiones" style="height: 75px; text-align: center;">Regiones</li> 
        <li id="Clusters" style="height: 75px; text-align: center;">Clusters</li> 
        <li id="Dispositivos" style="height: 75px; top: auto; text-align: center;">Dispositivos</li> 
        <li id="Eventos" style="height: 75px; text-align: center;">Eventos</li> 
       </ul> 
      </div> 
      <div id="selectionBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:9"> 
       <div class="k-toolbar k-grid-toolbar" style="height: 34px;"> 
        <button id="btnAgregarEntry" class="k-button k-button-icontext k-add-button" onclick="swapToNewData(this)"><span class="k-icon k-add"></span>Agregar</button> 
       </div> 
       <div id="listView" style="background-color: transparent; position: absolute; top: 40px; left: 0px; right: 0px; width:auto; height:auto" ></div> 
      </div> 
      <div id="dataBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 330px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:8"> 
       <div id="dataView" style="background-color: transparent; position: absolute; top: 40px; bottom:0px; left: 0px; right: 0px; width:auto; height:auto" ></div> 
      </div> 
      <div id='myMap' style="border: thin solid black; background-color: white; position: absolute; display: block; min-height: 100%; top: 0px; left: 189px; width: 88%; z-index: 20"></div> 
     </div> 
    </div> 
</body> 
</html>

誰能幫我明白我在做什麼錯？

來源

2013-02-15 Uriel Arvizu

永遠不要命名變量'window'。 – jbabey 2013-02-15 19:06:11

幾個問題：@ jbabey是對的，'window'被_browser_使用;你是否記得事情並行發生？我的意思是，你開始加載，但它需要一段時間，你不知道什麼時候。所以如果你調用'onUsuariosLoad'並立即打開窗口，那麼你開始加載的任何東西（可能）都不可用。 – OnaBai 2013-02-15 20:59:46

我的使用名稱窗口的錯誤，被kendo演示混淆了。 onUsuariosLoad函數只加載內容一次，如果內容已經加載，那麼它不會再次加載，我在試圖實現Kendo UI窗口之前確認它。正如我在我的問題中提到的那樣，它在我第一次打開窗口時起作用，內容被加載然後顯示，但是當我關閉窗口並嘗試通過單擊按鈕再次打開時，沒有任何內容顯示，意思是，窗口根本沒有顯示。 – 2013-02-15 21:47:49

我有一個類似的問題，而不是close()我建議使用destroy()並每次創建新窗口。

來源

2013-05-20 12:52:57

是的，這就是我最終做的，謝謝你的麻煩。 – 2013-05-20 22:14:47

這應該關閉窗口：

$("#btnBack").click(function (e) { 
          $("#usuariosDiv").data("kendoWindow").close(); 
         });

你也可能要考慮設置動畫：假的;在窗戶打開。

我記得我有一些類似的問題與之相關。

至於你的第一次嘗試，你可能想試試這個（加入。數據（「kendowindow」）進入第一創作）

$("#btnUsuarios").click(function (e) { 
    onUsuariosLoad(); 
    var window = $("#usuariosDiv"); 
    if (!window.data("kendoWindow")) { 
     window.kendoWindow({ 
      draggable: true, 
      height: "300px", 
      modal: true, 
      resizable: false, 
      title: "Modal Window", 
      width: "65%", 
      close: hideUsuarios 
     }).data("kendoWindow"); 
    } else { 
     window.data("kendoWindow").open(); 
    } 
    hideHomeScreen(); 
    showUsuarios(); 

});

來源

2013-02-15 19:27:50 BlueBird

我試過了，但由於某種原因，關閉它後，下面的屬性被附加到窗口樣式'-webkit-transform：scale（0.7）;'。然後當我再次點擊按鈕時，窗口會顯示但縮放，我不知道爲什麼會發生這種情況。 – 2013-02-15 22:27:28

我試圖升級到jquery 1.8+，但它沒有改變任何東西 – 2013-02-15 22:36:15

關於如何解決這個問題的任何消息？ – 2013-02-18 17:35:46

我寧願將destroy-method綁定到停用事件，並在窗口上使用close（） - 方法。這樣，關閉動畫將被正確完成。

... 
deactivate: function() { 
    this.destroy(); 
} 
...

來源

2013-05-23 08:22:06 Lopo

insted的

win.open();

您使用下面的代碼。

$("#usuariosDiv").data("kendoWindow").open();

來源

2013-12-02 05:59:30

我意識到這是在原始帖子後很長一段時間，但在窗口關閉選項中設置了70％的比例因子。

該錯誤似乎會影響打開和關閉同一個窗口，因爲窗口在關閉時縮放到70％，但在打開時從未打開到100％。

我通過添加以下內容來解決此問題，以便在關閉時將其縮小到70％。

var emptyWindow = $(theWindowId).data("kendoWindow"); 
emptyWindow.options.animation.close.effects.zoom.properties.scale = 1;

來源

2014-01-06 13:14:00 Will

Kendo UI - 爲什麼我無法正常打開和關閉窗口？

回答

相關問題