項(xiàng)目

立即下載Kendo UI for jQuery

Items代表AppBar的內(nèi)容，items配置接受將在AppBar小部件中呈現(xiàn)的對(duì)象集合起來(lái)。有兩種類型的項(xiàng)目可供開發(fā)人員選擇：

內(nèi)容項(xiàng)

有兩種方法可以將模板與 Content Items一起使用：

您可以使用contentItem公開的template選項(xiàng)來(lái)消費(fèi)和呈現(xiàn)HTML。
也可以為配置提供一個(gè)評(píng)估過(guò)的kendo.template，下面的例子展示了如何利用這兩種方法：

<div id="appbar"></div>

<script>
$("#appbar").kendoAppBar({
items: [
{ template: '<a class="k-button" href="\\#"><span class="k-icon k-i-menu"></span></a>', type: "contentItem" },
{ type: "spacer", width: "12px" },
{ template: kendo.template($("#search-template").html()), type: "contentItem" }
]
});
</script>

<script id="search-template" type="text/x-kendo-tmpl">
<span class="k-textbox k-display-flex">
<input autocomplete="off" placeholder="Search..." title="Search..." class="k-input">
<span class="k-input-icon">
<span class="k-icon k-i-search"></span>
</span>
</span>
</script>

Spacer

可以利用Spacer輕松地將內(nèi)容項(xiàng)彼此分開。

<div id="appbar"></div>

<script>
$("#appbar").kendoAppBar({
items: [
{ template: '<h3>AppBar Demo</h3>', type: "contentItem" },
{ width: 16, type: "spacer" },
{ template: '<a class="k-button" href="\\#"><span class="k-icon k-i-menu"></span></a>', type: "contentItem" }
]
});
</script>