TaskBoard使用Kendo UI模板提供對(duì)列、卡片和彈出標(biāo)題呈現(xiàn)的完全控制。

Kendo UI for jQuery最新官方正式版下載

TaskBoard支持以下模板：

• 卡片模板
• 列模板
• 可編輯的標(biāo)題模板
• 預(yù)覽面板模板
• 預(yù)覽面板標(biāo)題模板

卡片模板

卡片模板控制卡片的呈現(xiàn)。

<script id="card-template" type="text/x-kendo-template">
#:title# #=cardMenuButton#
#:description#
</script>

<script>
$("#taskBoard").kendoTaskBoard({
template: $("#card-template").html(),
dataOrderField: "order",
dataSource: [
{ id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "red" },
{ id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "red" },
{ id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "green" },
{ id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "green" },
{ id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "blue" }
],
columns: [
{ text: "Doing", status: "doing" },
{ text: "Backlog", status: "backlog" },
{ text: "Done", status: "done" }
]
});
</script>

列模板

列模板控制列標(biāo)題的呈現(xiàn)。 在模板上下文中，按鈕字段為列的按鈕提供 HTML。

<div id="taskBoard"></div>

<script>
$("#taskBoard").kendoTaskBoard({
dataOrderField: "order",
dataSource: [
{ id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "red" },
{ id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "red" },
{ id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "green" },
{ id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "green" },
{ id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "blue" }
],
columns: [
{ text: "Doing", status: "doing" },
{ text: "Backlog", status: "backlog" },
{ text: "Done", status: "done" }
],
columnSettings: {
template: '<div class="k-taskboard-column-header-actions" style="background-color: lightgray">#=buttons#</div>' +
'<span class="k-spacer"></span>' +
'<div class="k-taskboard-column-header-text k-text-ellipsis">#:text#(#:status#)</div>'
}
});
</script>

可編輯的標(biāo)題模板

可編輯的標(biāo)題模板控制標(biāo)題的呈現(xiàn)。

<div id="taskBoard"></div>

<script>
$("#taskBoard").kendoTaskBoard({
dataOrderField: "order",
dataSource: [
{ id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "red" },
{ id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "red" },
{ id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "green" },
{ id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "green" },
{ id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "blue" }
],
columns: [
{ text: "Doing", status: "doing" },
{ text: "Backlog", status: "backlog" },
{ text: "Done", status: "done" }
],
editable: {
headerTemplate: "<div class='k-taskboard-pane-header-text'>Editing <strong>#:title#</strong></div>"
}
});
</script>

預(yù)覽面板模板

預(yù)覽面板模板控制預(yù)覽面板的呈現(xiàn)。

<div id="taskBoard"></div>

<script>
$("#taskBoard").kendoTaskBoard({
previewPane: {
template: "<p>#:description#</p><p>Category: #:category#</p>"
},
dataOrderField: "order",
dataSource: [
{ id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "red" },
{ id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "red" },
{ id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "green" },
{ id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "green" },
{ id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "blue" }
],
columns: [
{ text: "Doing", status: "doing" },
{ text: "Backlog", status: "backlog" },
{ text: "Done", status: "done" }
]
});
</script>

預(yù)覽面板標(biāo)題模板

預(yù)覽面板標(biāo)題模板控制預(yù)覽面板標(biāo)題的呈現(xiàn)。

<div id="taskBoard"></div>

<script>
$("#taskBoard").kendoTaskBoard({
previewPane: {
headerTemplate: "<div class='k-taskboard-pane-header-text'>Viewing <strong>#:title#</strong></div>"
},
dataOrderField: "order",
dataSource: [
{ id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "red" },
{ id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "red" },
{ id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "green" },
{ id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "green" },
{ id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "blue" }
],
columns: [
{ text: "Doing", status: "doing" },
{ text: "Backlog", status: "backlog" },
{ text: "Done", status: "done" }
]
});
</script>

Kendo UI for jQuery | 下載試用

Kendo UI for jQuery是完整的jQuery UI組件庫(kù)，可快速構(gòu)建出色的高性能響應(yīng)式Web應(yīng)用程序。Kendo UI for jQuery提供在短時(shí)間內(nèi)構(gòu)建現(xiàn)在Web應(yīng)用程序所需要的一切，從多個(gè)UI組件中選擇，并輕松地將它們組合起來(lái)，創(chuàng)建出酷炫響應(yīng)式的應(yīng)用程序，同時(shí)將開發(fā)時(shí)間加快了50%。