0

aspx ページで kendo ui Mobile ModalView を使用していますが、必要な出力を取得できません。ボタンをクリックすると、同じページが表示されます。剣道UI初心者です。誰でも私を助けてください。kendo ui mobile modal view を参照して、私のプロジェクトでそれを使用する方法を提案してください。

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>
4

3 に答える 3

0

@ http://demos.kendoui.c​​om /mobile/modalview/index.htmlの開始点として使用したコードの例を見ると、剣道フレームワークへの呼び出しを含むスクリプト タグの位置が配置されていることがわかります。サンプルコードに示されているように body タグの下部に配置すると、その段階でスクリプトを実行するものは何もありません。それらを正しい場所に移動する必要があります。または、jQuery ready コマンドを使用して、そこから Kendo スクリプトを呼び出します。

 $(document).ready(function () {
  $("p").text("The DOM is now loaded and can be manipulated.");
});
于 2012-11-06T09:29:35.653 に答える
0

要件に従ってコードを変更する

<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: ドキュメントの準備ができたら、剣道モバイル アプリケーションを初期化します (つまり、var app = new kendo.mobile.Application(document.body))。

于 2013-03-20T11:13:11.800 に答える
0

さらに、ビューはアプリケーション要素の直接の子孫である必要があるため、本文ではなくフォームでモバイル アプリケーションを初期化できます。

于 2012-11-07T05:56:28.443 に答える