在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. C语言的system函数

     这个是与操作系统有关的函数,在linux/unix下system可以运行所有的shell命令windows下system可运行所有的windows执行文件,除DOS命令外,也可运行windwos ...

  2. Java 螺纹第三版 第三章数据同步 读书笔记

    多线程间共享数据问题 一.Synchronizedkeyword      atomic一词与"原子"无关,它以前被觉得是物质的最小的单元,不能再被拆解成更小的部分.      当 ...

  3. leetcode：Reverse Nodes in k-Group（以k为循环节反转链表）【面试算法题】

    题目: Given a linked list, reverse the nodes of a linked list k at a time and return its modified list ...

  4. javascript笔记整理（数据类型强制/隐式转换 ）

    A.数据类型强制转换 1.转换为数值类型 Number(参数) 把任何的类型转换为数值类型 A.如果是布尔值,false为0,true为1 var a=false;alert(Number(a)); ...

  5. string和byte[]的转换 (C#)

    原文 string和byte[]的转换 (C#) string类型转成byte[]: byte[] byteArray = System.Text.Encoding.Default.GetBytes  ...

  6. WebStorm开发Nodejs环境搭建，包括破解最新的WebStom11破解

    先放上链接:http://pan.baidu.com/s/1eQUJZGm 文件内包含注册码和WebStom11安装包,希望能够帮助到大家,少些周折

  7. attachEvent和addEventListener详解

    attachEvent方法可以动态的为网页内的元素添加一个事件．通常你想为某个按扭添加一个单击事件时．你都会在按扭内写上onclick=事件名称.使用attachEvent则不必这样做．你把写好的事件 ...

  8. 【Android开源项目分析】android轻量级开源缓存框架——ASimpleCache（ACache）源代码分析

    转载请注明出处:http://blog.csdn.net/zhoubin1992/article/details/46379055 ASimpleCache框架源代码链接 https://github ...

  9. 利用VS2005进行dump文件调试（17篇博客）

    前言:利用drwtsn32或NTSD进行程序崩溃处理,都可以生成可用于调试的dmp格式文件.使用VS2005打开生成的DMP文件,能很方便的找出BUG所在位置.本文将讨论以下内容: 1.  程序编译选 ...

  10. new对象数组时的内存布局

    #include <iostream> #include <limits> using namespace std; #define SAFE_DELETE(x) \ { \ ...