事件

立即下载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