basicContext 是一个易于使用的上下文菜单 jQuery 插件,可制作左键菜单、右键菜单和触摸菜单。CommonJS和AMD支持,布局和主题 CSS 分离,当上下文菜单的高度大于浏览器的高度时可滚动,适用于所有现代浏览器。

用法

使用 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文件 演示