Kendo Ui Mobile ModalView

我在我的aspx頁面中使用kendo ui Mobile ModalView，但是我無法獲得所需的輸出。單擊按鈕時它顯示相同的頁面。我是Kendo ui的新手。請任何人幫助我。請參考kendo ui移動模態視圖，並建議我如何在我的項目中使用它。Kendo Ui Mobile ModalView

My code is 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="CSS/kendo.common.css" rel="stylesheet" type="text/css" /> 
<%--<link href="CSS/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />--%> 
<link href="CSS/kendo.default.css" rel="stylesheet" type="text/css" /> 
<link href="CSS/kendo.mobile.all.css" rel="stylesheet" type="text/css" /> 
<link href="CSS/Example.css" rel="stylesheet" type="text/css" /> 

<script src="Js/jquery1.7.1.min.js" type="text/javascript"></script> 

<script src="CSS/kendo.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function closeModalViewLogin() { 
    $("#modalview-login").data("kendoModalView").open(); 
} 
</script> 


<script type="text/javascript"> 
var app = new kendo.mobile.Application(document.body); 
</script> 
</head> 

<body> 


<form id="form1" runat="server"> 
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera"> 
<img src="../../content/mobile/modalview/lens.png" class="camera-image" /><br /> 
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open- 
button">Login</a> 
</div> 


<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;"> 
<div data-role="header"> 
    <div data-role="navbar"> 
     <span>Login</span> 
     <a data-click="closeModalViewLogin" data-role="button" data- 
align="right">Cancel</a> 
    </div> 
</div> 

<ul data-role="listview" data-style="inset"> 
    <li><label for="username">Username:</label> <input type="text" id="username" /> 


</li> 
    <li><label for="password">Password:</label> <input type="password" id="password" /> 
</li> 
</ul> 
<a data-click="closeModalViewLogin" id="modalview-login-button" type="button" data- 
role="button">Login</a> 
<a data-click="closeModalViewLogin" id="modalview-reg-button" type="button" data- 
role="button">Register</a> 
</div> 
</form> 
</body>

來源

2012-11-06 user1799611

如果你看一下你作爲出發點@http://demos.kendoui.com/mobile/modalview/index.html代碼的例子 - 你會發現腳本標記的那個位置，以劍道框架調用位於body標籤的底部，如果你將它們放置在代碼示例中所示的身體上方，在那個階段沒有任何東西可以執行腳本。您需要將它們移動到正確的位置。或者使用jQuery ready命令並從那裏調用Kendo腳本。

$(document).ready(function() { 
    $("p").text("The DOM is now loaded and can be manipulated."); 
});

來源

2012-11-06 09:29:35 Vojtiik

此外，您可以初始化窗體上的移動應用程序，而不是正文，因爲Views應該是應用程序元素的直接後代。

來源

2012-11-07 05:56:28 Bundyo

更改密碼按要求

<html> 
<head runat="server"> 
    <title>Model view sample</title> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.mobile.min.js"></script> 
    <link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" /> 

    <script type="text/javascript"> 
     function closeModalViewLogin() { 
      $("#modalview-login").data("kendoModalView").open(); 
     } 
    </script> 
</head> 

<body> 

    <div data-role="view" id="modalview-camera" data-title="HTML5 Camera"> 
     <a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a> 

     <div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;"> 
      <div data-role="header"> 
       <div data-role="navbar"> 
        <span>Login</span> 
        <a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a> 
       </div> 
      </div> 

      <ul data-role="listview" data-style="inset"> 
       <li> 
        <label for="username">Username:</label> 
        <input type="text" id="username" /> 


       </li> 
       <li> 
        <label for="password">Password:</label> 
        <input type="password" id="password" /> 
       </li> 
      </ul> 
      <a data-click="closeModalViewLogin" id="modalview-login-button" data-role="button">Login</a> 
      <a data-click="closeModalViewLogin" id="modalview-reg-button" data-role="button">Register</a> 
     </div> 
    </div> 


    <script type="text/javascript"> 
     var app = new kendo.mobile.Application(document.body); 
    </script> 
</body> 
</html>

這工作得很好。

注

1：模型視圖應該總是<div data-role="view" ...>...</div>

2內使用：Intialize劍術移動應用程序文檔後準備（即無功應用=新kendo.mobile.Application（文件。 body））

來源

2013-03-20 11:13:11 Muthu

根據演示，你錯了關於你的第一個音符，模態視圖不在

http://demos.kendoui.com/mobile/modalview/index.html – Dean

Kendo Ui Mobile ModalView

回答

相關問題