js上下文菜单插件basicContext.js

所属分类:其他-独立的部件

 21008  303  查看评论 (2)
分享到微信朋友圈
X
js上下文菜单插件basicContext.js ie兼容8

basicContext.js

basicContext.js是一款功能强大的纯Js上下文菜单插件。该js上下文菜单插件可以制作左键菜单,右键菜单,可以自定义菜单的位置。它还可以和jquery结合使用,非常方便。

安装

可以通过bower或npm来安装basicContext.js插件。

bower install basicContext
npm install basiccontext

使用方法

在页面中引入样式文件basicContext.min.css,主题样式文件default.min.css和js文件basicContext.min.js。

<link rel="stylesheet" type="text/css" href="css/basicContext.min.css">
<link rel="stylesheet" type="text/css" href="css/default.min.css">
<script src="path/to/basicContext.min.js" type="text/javascript"></script>

 纯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插件使用

$('.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)

}

相关插件-独立的部件

复制剪切粘贴插件clipboard.js

clipboard.js能够实现复制剪切粘贴的功能,实例方法全。
  独立的部件
 46909  336

操作浏览器标题栏插件Title.js

Title.js是一个javascript库用来操作浏览器标题栏,没有依赖性。 这里有用法示例:添加前缀,加后缀,改变预定义的标题,招牌效果、打字机效果。
  独立的部件
 35963  281

jquery生成二维码

jquery生成二维码
  独立的部件
 41618  369

canvas实现的步骤流程插件

项目需要,找不到合适的,个人编写实现,可根据数据动态生成节点
  独立的部件
 21721  253

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    陷落美好 0
    2020/8/26 8:33:03
    古城深巷旧少年 0
    2018/2/5 17:21:23

    可以二级菜单么

    回复

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复