(五) kendo UI view除表单外的常用组件

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

section组件用法

<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="#home">Home</a>
        </div>
    </footer>
</section>

button 组件用法

<button data-bind="click: disableInput">Disable</button>
<a class="button selected-button" data-role="button" href="#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;
}

buttongroup

<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>

listview组件用法

<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="../../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;    
}
=====================================================

dropdownlist组件用法

<li>
   <label>行业类别
        <select id="dropdown">
           <option value="First Option">First Option</option>
           <option value="Second Option">Second Option</option>
           <option value="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();
?>

event/click/mouseover组件

====================click事件==============================
<a href="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>