jquery右键菜单

所属分类:导航-其他导航

 60946  339  查看评论 (8)
分享到微信朋友圈
X
jquery右键菜单 ie兼容10

一个最简单的,很好看的jQuery右键菜单


特点

唯一的依赖是jQuery。

简单的API。

开箱看起来不错,不需要额外的调整。

设计的外观和行为像一个标准的Windows上下文菜单

只这么少的代码,它应该是很容易地添加自己的自定义功能。


菜单看起来像这样

style="float:none;" title="screenshot.png"/>


使用步骤

安装

包括文件jquery.contextmenu.css在页面的<head> jquery.contextmenu.js。您还需要jQuery的。建议您使用 HTML 5 DOCTYPE 以确保呈现的一致性。

<!DOCTYPE html>
<html>
  <head>
     <script src="jquery-1.6.2.min.js"></script> 
     <script src="jquery.contextmenu.js"></script> 
     <link rel="stylesheet" href="jquery.contextmenu.css">
     ... rest of your stuff ...

用法


插件引入了contextPopup()方法,到jQuery对象。

假设你有一个元素,你想绑定上下文菜单:

<div id="mythingy">hello</ DIV>

您可以连接上下文菜单是这样的:

$('#mythingy').contextPopup({
  title: 'My Popup Menu',
  items: [
    {label:'Some Item',     icon:'icons/shopping-basket.png', action:function() { alert('clicked 1') } },
    {label:'Another Thing', icon:'icons/receipt-text.png',    action:function() { alert('clicked 2') } },
    null, /* null can be used to add a separator to the menu items */
    {label:'Blah Blah',     icon:'icons/book-open-list.png',  action:function() { alert('clicked 3') } },
  ]});

Icons

图标应该是16x16像素。 我建议Fugue图标集

相关插件-其他导航

纯CSS3扇形导航

纯CSS3打造动感漂亮的扇形菜单
  其他导航
 44298  558

路径菜单path-menu

巨牛逼的用css3完成的导航!
  其他导航
 41605  406

流程图工具

简单易用的流程图设计工具
  其他导航
 61415  565

纯CSS3多级环形导航菜单(原创)

使用纯css3开发的多级环绕导航菜单,扩展方便。
  其他导航
 52837  523

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

    M 0
    2019/2/27 17:05:08
    怎样获取当前点击的dom对象呢
    回复
    ??ㄋ?ㄊ 0
    2018/11/14 14:46:23
    如何获右键取点击对像呢
        人生若只如初见0
        2019/7/22 10:59:11
        我也是这个问题。没有解决
    回复
    清?人卟ㄋの明? 0
    2017/6/20 11:01:24

    给一个div设置了右键菜单,删除选项怎么获取当前的对象啊?

        wkee1
        2018/5/30 10:16:44
        给这个元素加一个mousedown事件,event.which=3的时候为右键事件,然后再$(this).contextPopup来触发
    回复
    魔狞鸣 0
    2017/3/19 22:22:04
    当出现滚动条的时候有bug 回复
    SiriBen 0
    2017/1/11 11:01:01

    这个很不错,WEB上的确很少能见到控制右键的

    回复
    tolerious 0
    2016/9/13 13:09:54
    时光小屋 0
    2013/10/24 20:30:00
    不可不戒 0
    2013/10/17 11:47:00
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复