1

请建议我在 Kendo UI mobile 上进行以下查询

1）创建了一个带有抽屉菜单的剑道移动html页面，在浏览器中测试时工作正常。请在下面找到代码

    <!DOCTYPE html>
    <!-- profile.html-->
    <html>
    <head>
    <title>Personal Details</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendo.default.min.css" rel="stylesheet" />
    <link href="css/custom.css" rel="stylesheet" />
    <link href="css/responsive.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
    <div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Personal Details"> 
        <ul data-role="listview" class="pdetails">
            <li data-target="" class="detail-lbl">Name</li>
            <li data-target="" class="detail-value">Tan Run Yan</li>
        </ul>
        <ul data-role="listview" class="pdetails">
            <li data-target="" class="detail-lbl">Personnal Number</li>
            <li data-target="" class="detail-value">S123456</li>
        </ul>
        <ul data-role="listview" class="pdetails">
            <li data-target="" class="detail-lbl">Subsidiary</li>
            <li data-target="" class="detail-value">Lorem Ipsum is Simple</li>
        </ul>
        <ul data-role="listview" class="pdetails">
            <li data-target="" class="detail-lbl">Department</li>
            <li data-target="" class="detail-value">Wisi enim ad minim veniam</li>
        </ul>
        <ul data-role="listview" class="pdetails">
            <li data-target="" class="detail-lbl">Division</li>
            <li data-target="" class="detail-value">Accumsan et iutso</li>
        </ul>
        <ul data-role="listview" class="pdetails">
            <li data-target="" class="detail-lbl">Branch</li>
            <li data-target="" class="detail-value">Dynamics</li>
        </ul>
    </div>

<div data-role="drawer" id="my-drawer">
    <ul data-role="listview" data-type="group">
        <li>Welcome Tan Run Yan
            <ul>
                <li data-icon="personal_details"><a href="#drawer-home" data-transition="none">Personal Details</a></li>
                <li data-icon="new_claims"><a href="#add_claim.html" data-transition="none">Add New Claim</a></li>
                <li data-icon="view_claims"><a href="#drawer-drafts" data-transition="none">View Claims</a></li>
                <li data-icon="help"><a href="#drawer-sent" data-transition="none">Help</a></li>
                <li data-icon="logout"><a href="#drawer-deleted" data-transition="none">Logout</a></li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="layout" data-id="drawer-layout">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
            <span data-role="view-title"></span>
        </div>
    </header>
</div>

<script>
    // reset global drawer instance, for demo purposes
    kendo.mobile.ui.Drawer.current = null;
</script>

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script>
new kendo.mobile.Application();
</script>
</body>
</html>

2) 当我尝试使用 jquery 在 index.html 中加载 html 页面时

$(document).ready(function() {
    $("#wrapper").load("profile.html");
});

抽屉菜单没有显示，我也失去了一些 CSS 样式。

3) Index.html 供您参考

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendo.default.min.css" rel="stylesheet" />
    <link href="css/custom.css" rel="stylesheet" />
    <link href="css/responsive.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/apps.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script>
        new kendo.mobile.Application();
        // reset global drawer instance, for demo purposes
        kendo.mobile.ui.Drawer.current = null;
    </script>
</head>
<body>
<div id="wrapper"></div>    
</body>
</html>

注意：在加载 profile.html 时，我删除了 doctype、head、link、script 等。因为它已经包含在 index.html 文件中。

4

1 回答 1

1

您应该将这样的内容放在一个div中，并将 data-layout 属性设置为“drawer-layout”，以包装您的 profile.html 页面的内容：

<div data-role="view" id="drawer-profile" data-layout="drawer-layout">
    content from your profile page...
</div>
于 2014-07-10T23:38:13.097 回答