Asp.net 剑道Ui移动ModalView
我在我的aspx页面中使用kendo ui Mobile ModalView,但我无法获得所需的输出。单击按钮,它将显示相同的页面。我是剑道ui的新手。请任何人帮助我。请参考剑道ui移动模态视图,并建议我如何在我的项目中使用它Asp.net 剑道Ui移动ModalView,asp.net,kendo-ui,Asp.net,Kendo Ui,我在我的aspx页面中使用kendo ui Mobile ModalView,但我无法获得所需的输出。单击按钮,它将显示相同的页面。我是剑道ui的新手。请任何人帮助我。请参考剑道ui移动模态视图,并建议我如何在我的项目中使用它 My code is <head runat="server"> <title>Untitled Page</title> <link href="CSS/kendo.common.css" rel="stylesheet" ty
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>
我的代码是
无标题页
函数closeModalViewLogin(){
$(“#modalview login”).data(“kendoModalView”).open();
}
var app=new kendo.mobile.Application(document.body);
登录
取消
- 用户名:
- 密码:
登录
登记
如果您查看用作起点的代码示例@-您将发现调用剑道框架的脚本标记的位置位于主体标记的底部,如果您将它们放置在主体上方,如示例代码所示,则在该阶段没有任何可执行脚本的内容。您需要将它们移动到正确的位置。或者使用jqueryready命令并从那里调用剑道脚本
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
此外,您可以在表单上而不是正文上初始化移动应用程序,因为视图应该是应用程序元素的直接后代。根据要求更改代码。
<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>
模型视图示例
函数closeModalViewLogin(){
$(“#modalview login”).data(“kendoModalView”).open();
}
登录
取消
-
用户名:
-
密码:
登录
登记
var app=new kendo.mobile.Application(document.body);
这个很好用
注意
1:模型视图应始终在内使用..
2:文档准备就绪后初始化剑道移动应用程序
(即var app=new kendo.mobile.Application(document.body))根据演示,您对第一个音符的理解是错误的,模态视图不在