在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. jsp各部分编码的含义

    服务器JSP编码 pageEncoding 是jsp文件本身的编码, 第一阶段是jsp编译成.java,它会根据pageEncoding的设定读取jsp,(jsp文件的编码,pageEncoding是 ...

  2. BitHacks--位操作技巧

    ---------------------------------------------------------------------------------------------------- ...

  3. Linux - 输入输出流程序 代码(C)

    输入输出流程序 代码(C) 本文地址:http://blog.csdn.net/caroline_wendy 使用输入输出流,控制文件流. STDIN_FILENO,STDOUT_FILENO代表标准 ...

  4. PHP - 操作MySQL数据库

    第16章 PHP操作MySQL 学习要点: 1.PHP连接到MySQL 2.增删改查 3.其他常用函数 如果你已经具有了使用PHP.SQL和MySQL的丰富经验,现在就可以把所有这些技术组合在一起.P ...

  5. 立贴读 《CLR》

    弱弱的说,我要开始读<CLR>这本书了,怕自己不能坚持下来,特立贴监督自己,本来是大牛们涉及的区域,现在好朋友的鼓励下,勇敢的踏入,如有错误,还请各位指正.

  6. skip32

    在某些应用场景下,需要对数字进行加密,skip32无疑是一种很实用的算法,网上有python的源码(https://bitbucket.org/anuraguniyal/skip32.py/src/4 ...

  7. Cocos2dx3.1 获取当前系统时间

    以下是获代替码 原文地址:http://blog.csdn.net/qqmcy/article/details/28233565 // // Tools.h // // // Created by 杜 ...

  8. PHP学习之-数据库操作

    PHP学习之-数据库操作 1.PHP支持那些数据库 PHP通过安装相应的扩展来实现数据库操作,现代应用程序的设计离不开数据库的应用,当前主流的数据库有MsSQL,MySQL,Sybase,Db2,Or ...

  9. （升级版）Spark从入门到精通（Scala编程、案例实战、高级特性、Spark内核源码剖析、Hadoop高端）

    本课程主要讲解目前大数据领域最热门.最火爆.最有前景的技术——Spark.在本课程中,会从浅入深,基于大量案例实战,深度剖析和讲解Spark,并且会包含完全从企业真实复杂业务需求中抽取出的案例实战.课 ...

  10. css3 动画运动路径

    1.cubic-bezier贝塞尔曲线CSS3动画工具 http://www.xuanfengge.com/cubic-bezier-bezier-css3-animation-tools.html ...