项目

立即下载Kendo UI for jQuery

 Items代表AppBar的内容，items配置接受将在AppBar小部件中呈现的对象集合起来。有两种类型的项目可供开发人员选择：

内容项

有两种方法可以将模板与 Content Items一起使用：

您可以使用contentItem公开的template选项来消费和呈现HTML。
也可以为配置提供一个评估过的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轻松地将内容项彼此分开。

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