검도 UI - 왜 제대로 창을 열고 닫을 수 없습니까?

내 창을 여는 데 다른 방법을 시도했지만 지금까지 모든 것이 실패합니다.검도 UI - 왜 제대로 창을 열고 닫을 수 없습니까?

$('#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에서 윈도우의 내용을로드하는 기능입니다 : 버튼이 this 예에 따라이 같은 코드를 클릭 할 때

내 첫 번째 시도는 창을 엽니 다했다 이 함수는 내용을 한 번만로드하고 이미로드 된 경우에는 다시로드하지 않습니다. 제대로 작동하는지 확인하기 위해 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

몇 가지 질문 : @bbabey가 맞습니다. 'window'는 _browser_에서 사용됩니다; 일이 평행하게 일어났다는 것을 명심하셨습니까? 내 말은, 로딩을 시작 하긴하지만 시간이 좀 걸리고 언제 알지 못한다. 따라서 'onUsuariosLoad'를 호출하고 즉시 창을 열면로드 된 모든 작업을 사용할 수 없습니다. – OnaBai

검도 데모에서 실수로 이름 창을 사용하는 데 혼란을 겪었습니다. onUsuariosLoad 함수는 한 번만 내용을로드합니다. 내용이 이미로드되어 있고 다시로드되지 않으면 Kendo UI 창을 구현하기 전에이 내용을 확인했습니다. 내 질문에 언급했듯이, 내가 창을 처음 열 때, 내용이로드 된 다음 표시되지만, 창을 닫고 버튼을 클릭하여 다시 열려고하면 아무 것도 표시되지 않습니다. 의미, 창은 전혀 표시되지 않습니다. –

(첫 번째 창조에 추가 .DATA ("kendowindow"))이 시도 할 수 있습니다 첫 번째 시도로 매번 새로운 창이 생성됩니다.

출처

2013-05-20 12:52:57

그래, 내가 그 일을 끝내 었어, 어쨌든 문제에 대한 감사. –

이 창을 닫습니다 작동합니다 : 또한

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

당신이 애니메이션을 설정 들여다 할 수 있습니다 : 거짓을; 창문 열어.

나는 비슷한 문제가 있다는 것을 기억합니다.

지금까지 당신은 내가 비슷한 문제가 있었다 대신 close()의 내가 destroy()을 사용하는 것이 좋습니다

$("#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);'에 첨부됩니다. 그런 다음 버튼을 다시 클릭하면 창이 표시되지만 크기가 조정됩니다. 왜 그런 일이 발생하는지 전혀 모릅니다. –

jquery 1.8+로 업그레이드하려고했지만 아무 것도 변경하지 않았습니다 –

이 문제를 해결하는 방법에 대한 뉴스는 무엇입니까? –

파괴 메소드를 deactivate 이벤트에 바인드하고 윈도우에서 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

검도 UI - 왜 제대로 창을 열고 닫을 수 없습니까?

답변

관련 문제