在C/S中可能非常easy实现右键弹框，但在B/S中直到今天我才搞定，小小得瑟一下。只一个html页面，导入相关的Easy-UI类库就能搞定，Easy-UI类库下载地址

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <link href="css/easyui.css" rel="stylesheet" type="text/css" />

    <link href="css/icon.css" rel="stylesheet" type="text/css" />

    <link href="css/demo.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery.min.js" type="text/javascript"></script>

    <script src="js/jquery.easyui.min.js" type="text/javascript"></script>

</head>

<body>

    <h2>点下右键试试</h2>

    <div style="margin:20px 0;"></div>

    <div id="mm" class="easyui-menu" style="width:120px;">

        <div onclick="javascript:alert('new')">新建</div>

        <div>

            <span>打开</span>

            <div style="width:150px;">

                <div><b>Word</b></div>

                <div>Excel</div>

                <div>PowerPoint</div>

                <div>

                    <span>M1</span>

                    <div style="width:120px;">

                        <div>sub1</div>

                        <div>sub2</div>

                        <div>

                            <span>Sub</span>

                            <div style="width:80px;">

                                <div onclick="javascript:alert('sub21')">sub21</div>

                                <div>sub22</div>

                                <div>sub23</div>

                            </div>

                        </div>

                        <div>sub3</div>

                    </div>

                </div>

                <div>

                    <span>Window Demos</span>

                    <div style="width:120px;">

                        <div data-options="href:'window.html'">Window</div>

                        <div data-options="href:'dialog.html'">Dialog</div>

                        <div><a href="http://www.jeasyui.com" target="_blank">EasyUI</a></div>

                    </div>

                </div>

            </div>

        </div>

        <div data-options="iconCls:'icon-save'">保存</div>

        <div data-options="iconCls:'icon-print',disabled:true">Print</div>

        <div class="menu-sep"></div>

        <div>退出</div>

    </div>

    <script>

        $(function () {

            $(document).bind('contextmenu', function (e) {

                e.preventDefault();

                $('#mm').menu('show', {

                    left: e.pageX,

                    top: e.pageY

                });

            });

        });

    </script>

</body>

</html>

效果图例如以下：

EasyUI初体验--右键弹框的更多相关文章

  1. 【jquery+easyUI】-- $.messager.show 弹框显示

    三种基本弹框 1.提示框,一秒停留 $.messager.show({ title: '提示', msg: '修改成功!', showType: 'fade', //设置显示类型 style: { l ...

  2. easyui 初体验

    简介 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javas ...

  3. EasyUI自动消失的弹框

    $.messager.show( { title : "系统提示", msg : "请选择提供商!!!" });

  4. 制作一个简单的toast弹框

    toast弹框的作用 toast弹框顾名思义,就是为了弹出一个提示框,效果如图: 使用toast弹框可以可用户带来更好的交互体验 toast弹框的使用 Toast组件 制做出toast的样式以及出现的 ...

  5. 遮罩、警告框/弹框 - EasyUI

    1.遮罩 1.1. $.messager.progress //开启遮罩 $.messager.progress({}); 或 $.messager.progress({ title: 'Please ...

  6. easyui dialog 表单提交，弹框初始化赋值，dialog实现

    //定义弹框html<div id="delete" class="easyui-dialog" title="Delete" dat ...

  7. python窗体——pyqt初体验

    连续两周留作业要写ftp的作业,从第一周就想实现一个窗体版本的,但是时间实在太短,qt零基础选手表示压力很大,幸好又延长了一周时间,所以也就有了今天这篇文章...只是为了介绍一些速成的方法,还有初学者 ...

  8. FileTable初体验

    FileTable初体验 阅读导航 启用FILESTREAM设置 更改FILESTRAM设置 启用数据库非事务性访问级别 FileTable 在我接触FileTable之前,存储文件都是存储文件的链接 ...

  9. [转]Python爬虫框架--pyspider初体验

    标签: python爬虫pyspider 2015-09-05 10:57 9752人阅读 评论(0) 收藏 举报  分类: Python(8)  版权声明:本文为博主原创文章,未经博主允许不得转载. ...

随机推荐

  1. QVector 和vector的比较（QVector默认使用隐式共享，而且有更多的函数提供）

    QVector和vector的比较: Qvector默认使用隐式共享,可以用setSharable改变其隐式共享.使用non-const操作和函数将引起深拷贝.at()比operator[](),快, ...

  2. Linux 命令整理

    一.文件目录命令 1.建立目录:mkdir 目录名 2.删除空目录:rmdir 目录名 3.无条件删除子目录: rm -rf 目录名 4.改变当前目录:cd 目录名 (进入用户home目录:cd ~; ...

  3. Python多线程下的_strptime问题

    Python多线程下的_strptime问题 由于Python的datetime和time中的_strptime方法不支持多线程,运行时会报错: import datetimeimport threa ...

  4. 获取证书以用于 Windows Azure 网站 (WAWS)

    编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Erez Benari 撰写. 近年来,随着网络犯罪的上升,使用 SSL 保护网站逐渐成为一项备受追捧的功能,Windows A ...

  5. cocos2d-x游戏开发系列教程-中国象棋00-前言

    象棋描述 在说代码之前,我们先让象棋效果登场,以方便大家对代码的理解 欢迎界面 中国象棋程序,运行起来的第一个界面是一个欢迎界面,该欢迎界面在停留一秒后进入游戏界面 游戏主界面 新局:所有棋子归位,状 ...

  6. 11gOCP 1z0-052 :2013-09-11 MGR_ROLE role........................................................A66

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/11584537 正确答案A 实验测试 1.创建用户:SKD gyj@OCM> crea ...

  7. ActiveMQ消息队列介绍（转）

    ActiveMQ是一个开源兼容Java Message Service (JMS) 1.1面向消息的中件间. 来自Apache Software Foundation. ActiveMQ提供松耦合的应 ...

  8. JAVA中extends 与implements有啥区别？

    JAVA中extends 与implements有啥区别?1. 在类的声明中,通过关键字extends来创建一个类的子类.一个类通过关键字implements声明自己使用一个或者多个接口.extend ...

  9. python对web服务器做压力测试并做出图形直观显示

    压力测试有很多工具啊.apache的,还有jmeter, 还有loadrunner,都比较常用. 其实你自己用python写的,也足够用. 压力测试过程中要统计时间. 比如每秒的并发数,每秒的最大响应 ...

  10. AngularJS_百度百科

    AngularJS_百度百科     AngularJS    编辑     AngularJS是为克服HTML在构建应用上的不足而设计的.    目录         1简介引引        端对 ...