basicContext.js-为您的web应用添加强大的上下文(支持右键)菜单

helloweba.com 作者:月光光 时间:2017-01-14 13:12 标签: 菜单  右键 

basicContext.js是一款功能强大的纯Js上下文菜单插件。该js上下文菜单插件可以制作左键菜单,右键菜单,可以自定义菜单的位置。它支持所有的现代浏览器,包括移动端也表现非凡,它还可以和jquery结合使用,非常方便。

basicContext.js-为您的web应用添加强大的上下文(支持右键)菜单

安装

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

bower install basicContext
npm install basiccontext  

使用方法

在页面head标签中引入样式文件basicContext.min.css和主题样式文件default.min.css,以及在body的底部引入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="js/basicContext.min.js" type="text/javascript"></script>

在body中加入按钮或链接:

<button type="button" class="btn btn-primary click">鼠标左键点击我</button>
<button type="button" class="btn btn-success context">鼠标右键点击我</button>
<button type="button" class="btn btn-info touchend">Touch me! (移动端手机有效)</button>

纯js调用

纯js这样调用:

var onClick = function(e) {
    var clicked = function() { alert('Item clicked!') }

    var 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);

}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.click').addEventListener('click', onClick);
    document.querySelector('.context').addEventListener('contextmenu', onClick);
    document.querySelector('.touchend').addEventListener('touchend', onClick);

})

作为jquery插件使用

如果你的项目中使用了jQuery库,那也可以这样调用:

var onClick = function(e) {

    var clicked = function() { alert('Item clicked!') }

    var 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)

  }

  $(document).ready(function() {

    $('.click').on('click', onClick)
    $('.context').on('contextmenu', onClick)
    $('.touchend').on('touchend', onClick)

  })

更多详情,可以参阅basicContext.js的github地址:https://github.com/electerious/basicContext

声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接:http://www.helloweba.com/view-blog-404.html
顶部 反馈 二维码 底部
扫一扫

扫描二维码用手机看文章