basicContext – 易于使用的上下文菜单

用法

使用 Vanilla JS
使用以下命令显示上下文菜单：

document.querySelector('.btn').addEventListener('click', function(e) {

    let items = [
        { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked },
        { title: 'Reset Login', icon: 'ion-person', fn: clicked },
        { title: 'Help', icon: 'ion-help-buoy', fn: clicked },
        { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true },
        { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false },
        { },
        { title: 'Logout', icon: 'ion-log-out', fn: clicked }
    ]

    basicContext.show(items, e)

})

使用 jQuery
basicContext 不能与正常的 jQuery 事件对象工作，但你可以很容易地绕过这个问题，使用 e.originalEvent ：

$('.btn').on('click', function(e) {

    let items = [
        { title: 'Add Sites', icon: 'ion-plus-round', fn: clicked },
        { title: 'Reset Login', icon: 'ion-person', fn: clicked },
        { title: 'Help', icon: 'ion-help-buoy', fn: clicked },
        { title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true },
        { title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false },
        { },
        { title: 'Logout', icon: 'ion-log-out', fn: clicked }
    ]

    basicContext.show(items, e.originalEvent)

})

主题

布局和主题是分离的 CSS 文件。这使得很容易设计你自己的上下文菜单或从包括的主题中进行选择。

主题名	预览	CSS文件	演示
Default theme		CSS文件	演示
Bright theme		CSS文件	演示
Dark theme		CSS文件	演示

插件

包含以下CSS文件以增强上下文菜单的外观和功能。

名称	预览	CSS文件	演示
PopIn effect		CSS文件	演示
FadeIn effect		CSS文件	演示