Question

请向我推荐以下有关Kendo UI mobile的查询

1）创建了带抽屉菜单的kendo移动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等.becoz它已经包含在index.html文件中。

Answer 1

你应该把这样的东西放在 div 中，数据布局属性设置为“drawer-layout”，它包含了你的profile.html页面的内容：

<div data-role="view" id="drawer-profile" data-layout="drawer-layout">
    content from your profile page...
</div>

如何在index.html中加载其他html文件 - Kendo UI Mobile？

1 个答案: