<div data-role="view" id="id" data-title="标题"></div>=================================================1.可以有很多个view（页）,但每次只显示一个，通过 href=http://www.mamicode.com/#id切换到当前页2.与layout不同，layout通常用于多个view里面的固定层；可以多个，但每次显示也只是一个可以在view里通过data-layout=（default layout-id）指定默认的

<div id="home" data-role="view" data-layout="default">    Hello Mobile World!</div><section data-role="layout" data-id="default">    <header data-role="header">        <div data-role="navbar">My App</div>    </header>    <footer data-role="footer">        <div data-role="tabstrip">            <a href=http://www.mamicode.com/"#home">Home</a>        </div>    </footer></section>

<button data-bind="click: disableInput">Disable</button><a class="button selected-button" data-role="button" href="http://www.mamicode.com/#button-home">搜索</a>======================================================按钮的样式.button {    margin-left: .5em;    text-align: center;}.km-root .selected-button{    color: #fff;    background-color: #f60;}.km-ios7 .selected-button{    border-color: transparent;}.button:first-of-type {    margin-left: 1em;}

<ul data-role="buttongroup" data-index="0" id="buttongroup2">    <li data-icon="toprated" style="font-size: 1em" data-bind="click:showzwsqjl">职位申请记录</li>    <li data-icon="globe" style="font-size: 1em" data-bind="click:showzwscj">职位收藏夹</li></ul><script>var viewModel2 = kendo.observable({showzwsqjl:function(){    $("#zwscj").hide();    $("#zwsqjl").show();},showzwscj:function(){    $("#zwscj").show();    $("#zwsqjl").hide();}});kendo.bind($("#buttongroup2"), viewModel2);</script><div id="zwscj" class="hide">职位收藏夹</div><div id="zwsqjl" class="hide">职位申请记录</div>

<ul data-role="listview" data-style="inset"></ul>====================================================<ul data-role="listview" data-style="inset">    <li>American Football</li>    <li>Baseball</li></ul>=====================================================<div data-role="view" id="switch-home" data-title="User Settings">    <ul data-role="listview" data-style="inset" data-type="group">        <li>Profile            <ul>                <li><h2>Eduardo <span>Saavedra</span></h2><img src=http://www.mamicode.com/"../../content/mobile/overview/eduardo.jpg" /></li>                <li>Brand Manager at Marketing Team</li>            </ul>        </li>        <li>Password            <ul>                <li>User cannot change pasword <input data-role="switch" id="email-switch" checked="checked" /></li>                <li>Password never expires <input id="wink-switch" /></li>            </ul>        </li>        <li>Newsletter Subscription            <ul>                <li>Subscribed <input id="subscription-switch" /></li>            </ul>        </li>    </ul></div>==========================样式==========================#满屏园角 {display: block;margin: 1em;height: 120px;-webkit-border-radius: 10px;border-radius: 10px;background-size: 100% auto;-webkit-background-size: 100% auto;//background: url(../../content/mobile/shared/sports-facility.jpg) no-repeat center center;    }=====================================================

<li>   <label>行业类别        <select id="dropdown">           <option value=http://www.mamicode.com/"First Option">First Option</option>           <option value=http://www.mamicode.com/"Second Option">Second Option</option>           <option value=http://www.mamicode.com/"Third Option">Third Option</option>        </select>    </label></li><script>        function initForm() {            var body = $(".km-pane");            if (kendo.ui.DropDownList) {                $("#dropdown,#dropdown2").kendoDropDownList({                    popup: { appendTo: body },                    animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") || body.hasClass("km-wp") ? "slideIn:up" : "slideIn:down" } }                });            }        }</script>=================PHP===================<?php require_once ‘../lib/Kendo/Autoload.php‘;?><?php$dropDownList = new \Kendo\UI\DropDownList(‘movies‘);$dropDownList->dataTextField(‘text‘)             ->dataValueField(‘value‘)             ->attr(‘style‘, ‘width: 250px‘)             ->dataSource(array(                array(‘text‘ => ‘The Shawshank Redemption‘, ‘value‘ => 1),                array(‘text‘ => ‘The Godfather‘, ‘value‘ => 2),                array(‘text‘ => ‘The Godfather: Part II‘, ‘value‘ => 3),                array(‘text‘ => "Il buono, il brutto, il cattivo.", ‘value‘ => 4),                array(‘text‘ => ‘Pulp Fiction‘, ‘value‘ => 5),                array(‘text‘ => "12 Angry Men", ‘value‘ => 6),                array(‘text‘ => "Schindler‘s List", ‘value‘ => 7),                array(‘text‘ => "One Flew Over the Cuckoo‘s Nest", ‘value‘ => 8),                array(‘text‘ => ‘Inception‘, ‘value‘ => 9),                array(‘text‘ => ‘The Dark Knight‘, ‘value‘ => 10)             ));echo $dropDownList->render();?>

====================click事件==============================<a href=http://www.mamicode.com/"http://example.com" data-bind="click: click">Click</span><script>var viewModel = kendo.observable({    click: function(e) {        e.preventDefault();//缺省的处理        //e.stopPropagation();//中止向上传递    }}); kendo.bind($("a"), viewModel);</script>=================<div id="view">    <span data-bind="click: showDescription">Show description</span>    <span data-bind="visible: isDescriptionShown, text: description"></span></div><script>    var viewModel = kendo.observable({        description: "Description",        isDescriptionShown: false,        showDescription: function (e) {            this.set("isDescriptionShown", true);        }    });     kendo.bind($("#view"), viewModel);</script>====================mouseover mouseout 事件==============================<div id="view">    <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show description</span>    <span data-bind="visible: isDescriptionShown, text: description"></span></div><script>    var viewModel = kendo.observable({        description: "Description",        isDescriptionShown: false,        showDescription: function (e) {            // show the span by setting isDescriptionShown to true            this.set("isDescriptionShown", true);        },        hideDescription: function (e) {            // hide the span by setting isDescriptionShown to false            this.set("isDescriptionShown", false);        }    });     kendo.bind($("#view"), viewModel);</script>