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

安装

可以通过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

本文地址：https://www.stayed.cn/item/25

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我