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