Plugin - Kendo UI - Kendo UI Mobile

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="~/Plugin/kendoui/css/kendo.common.min.css" rel="stylesheet" />
        <link href="~/Plugin/kendoui/css/kendo.default.min.css" rel="stylesheet" />
        <link href="~/Plugin/kendoui/css/kendo.mobile.all.min.css" rel="stylesheet" />

        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="~/Plugin/kendoui/script/kendo.all.min.js"></script>
        <script src="~/Plugin/kendoui/script/kendo.messages.zh-CN.min.js"></script>
        <script src="~/Plugin/kendoui/script/kendo.culture.zh-CHS.min.js"></script>
    </head>

    <body>
        <section data-role="layout" data-id="default">
            <header data-role="header">
                <div data-role="navbar">
                    <a data-align="left" data-icon="arrow-w" data-role="backbutton" class="back-button"></a>
                    <span data-role="view-title"></span>
                </div>
            </header>

            <footer data-role="footer">
                <div data-role="tabstrip">
                    <a href="#home"> Home </a>
                </div>
            </footer>
        </section>

        <div data-role="layout" data-id="mobile-view" data-show="showDemoLayout">
            <header data-role="header">
                <div data-role="navbar">
                    <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                    <span data-role="view-title"></span>
                </div>
            </header>
        </div>

        <div id="home" data-role="view" data-layout="default">
            <ul data-role="listview" data-style="inset" data-type="group">
                <li>Sources
                    <ul>
                        <li><a href="#secondview">Local View</a></li>
                        <li><a href="../content/mobile/view/remoteview.html">Remote View</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div id="secondview" data-role="view" data-layout="mobile-view" data-title="测试页">
            <div style="background-color: #4caf50; padding: 10em 0; text-align: center;">
                <h2 style="color: #fff;">Hi, I'm a local view.</h2>
            </div>
        </div>

        <script>
            var app = new kendo.mobile.Application(document.body, { skin: "nova", transition: "slide"  } );</script>
    </body>
</html>

 

data-role 

"layout" : 模板元素

"view" : 视图元素

"head" : "头元素"

"footer" : "底元素"

"tabstrip" : "tab标签元素"

posted @ 2016-02-19 15:35  `Laimic  阅读(293)  评论(0)    收藏  举报