事件

立即下載Kendo UI for jQuery

Kendo UI ActionSheet為自定義功能提供了簡單的配置或擴展點。

open

打開ActionSheet時觸發open事件。

下面的例子演示了如何訂閱組件的open事件：

<div id="actionsheet"></div>
<button id="openActionSheetBttn">OPEN ACTION SHEET</button>
<script>
var actionsheet = $('#actionsheet').kendoActionSheet({
title:'Select item',
items:[
{
text: 'Edit Item',
iconClass: 'k-icon k-i-edit',
description: "Select to enter edit mode.",
click: onClick
},
{
text: 'Add to Favorites',
iconClass: 'k-icon k-i-heart',
click: onClick
},
{
text: 'Cancel',
iconClass: 'k-icon k-i-cancel',
group: 'bottom',
click: onClick
},
],
open: onOpen
}).data('kendoActionSheet');

function onClick(e) {
e.preventDefault();
actionsheet.close();
}

function onOpen() {
console.log("Open fired!")
// your custom logic here
}

$("#openActionSheetBttn").kendoButton({
click: function (e) {
actionsheet.open()
}
});
</script

Close

close事件在ActionSheet關閉時觸發。

下面的例子演示了如何訂閱組件的open事件：

<div id="actionsheet"></div>
<button id="openActionSheetBttn">OPEN ACTION SHEET</button>
<script>
var actionsheet = $('#actionsheet').kendoActionSheet({
title:'Select item',
items:[
{
text: 'Edit Item',
iconClass: 'k-icon k-i-edit',
description: "Select to enter edit mode.",
click: onClick
},
{
text: 'Add to Favorites',
iconClass: 'k-icon k-i-heart',
click: onClick
},
{
text: 'Cancel',
iconClass: 'k-icon k-i-cancel',
group: 'bottom',
click: onClick
},
],
close: onClose
}).data('kendoActionSheet');

function onClick(e) {
e.preventDefault();
actionsheet.close();
}

function onClose() {
console.log("Close fired!")
// your custom logic here
}

$("#openActionSheetBttn").kendoButton({
click: function (e) {
actionsheet.open()
}
});
</script