在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. Windows Phone 8初学者开发—第20部分：录制Wav音频文件

    原文 Windows Phone 8初学者开发—第20部分:录制Wav音频文件 原文地址:http://channel9.msdn.com/Series/Windows-Phone-8-Develop ...

  2. USACO 2005 January Gold The Wedding Juicer

    题目 题目链接,我只在poj上找到了题目,usaco居然上不去. 大意就是说有一些\(1\times 1\times 1\)的小方块堆在一起,问最多能装多少水. 我们在一次测试中出了这题,由于我写水题 ...

  3. Android-onInterceptTouchEvent()和onTouchEvent()总结

    老实说,这两个小东东实在是太麻烦了,很不好懂,我自己那api文档都头晕,在网上找到很多资料,才知道是怎么回事,这里总结一下,记住这个原则就会很清楚了: 1.onInterceptTouchEvent( ...

  4. C++能在三个地方创造对象，而Delphi只有一个地方

    C++能在堆栈.堆.资料区创造对象. 但是Delphi只能在堆上创造对象

  5. Hystrix 使用与分析

    转载请注明出处哈:http://hot66hot.iteye.com/admin/blogs/2155036 一:为什么需要Hystrix? 在大中型分布式系统中,通常系统很多依赖(HTTP,hess ...

  6. 关于Get和Post

    get和post 简介: Get和post是表单提交数据的两种基本方式,get请求数据通过域名后缀url传送,用户可见,不安全,post请求数据通过在请求报文正文里传输,相对比较安全. get是通过u ...

  7. linux命令:ftp

    1. 登录: ftp IP_ADDR    : 根据提示输入USER_NAME    PASS_WORD 或: ftp -i -n IP_ADDR    user  USER_NAME    PASS ...

  8. js数组基础整理

    首页: 主要整理了一下数组中常用的一些基础知识,代码都是自己手敲,有不对的地方希望能指出,目前只有4篇,后续会不断的增加这一板块. 由于少于100字不能发所以把一些最基本的创建数组也写上. // 创建 ...

  9. MFC超链接静态类的使用

    源代码:http://download.csdn.net/detail/nuptboyzhb/4197151 CHyperLink类,是由CStatic类派生出来,重载了CStatic类的如下函数: ...

  10. hadoop学习；hadoop伪分布搭建

    先前已经做了准备工作安装jdk什么的,以下開始ssh免password登陆.这里我们用的是PieTTY工具,当然你也能够直接在linux下直接操作 ssh(secure shell),运行命令 ssh ...