EasyUI初体验–右键弹框

EasyUI初体验–右键弹框

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

    在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初体验--右键弹框

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118189.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 求原根_模12的原根

    求原根_模12的原根今天学了数论。。。求原根真的好暴力设模数为p我们把p−1p−1p-1分解质因数,对于每一个2≤i≤p−12≤i≤p−12\leqi\leqp-1,判断an−1pi%pan−1pi%pa^{n-1\overp_i}\%p是否为1,如果是,那么这个数就不是原根,否则就是ACCode#include&amp;amp;amp;lt;cstdio&amp;amp;amp;gt;#include&amp;amp;amp;lt;iostre

    2022年10月27日
  • Android 短信验证码自动填充

    Android 短信验证码自动填充一、前言:这周项目做优化,为用户操作更加方便,注册、忘记密码、更换手机号、所需要的获取验证码操作,增加获取短信验证码,然后自动填写到输入框中。思路简单,主要是监听短信的广播,然后正则短信中的验证码二、具体代码:packagecom.taikongdan.app.service;importandroid.content.BroadcastReceiver;importan

  • int、long、long long取值范围

    int、long、long long取值范围unsignedint0~4294967295int-2147483648~2147483647unsignedlong0~4294967295long-2147483648~2147483647longlong的最大值:9223372036854775807longlong的最小值:-9223372036854775808unsigned…

  • java 毕设 成品_校园物品交换平台 – java|jsp类成品展示 – 计算机专业毕业设计论文成品网…

    java 毕设 成品_校园物品交换平台 – java|jsp类成品展示 – 计算机专业毕业设计论文成品网…与传统的交换方式相比,物品交换网站是另一种形态的宣传和交换通道,是传统交换方式的延伸。它除了一般的电子商务功能外,还包括产品展示,商品检索,在线交友等服务;在迎合了电子商务这个社会大前提下,每个人都可以在网上购买或者交换自己喜欢的商品,从而可以大大地节约资金、时间和资源,并起到促进整个社会和谐的作用。校园物品交换平台使用JSP,Hibernate,Structs,Spring,Html,CSS。后…

  • 双代号网络图与双代号时标网络图_双代号网络图和单代号网络图

    双代号网络图与双代号时标网络图_双代号网络图和单代号网络图一、双代号网络图1、压缩关键活动2、压缩可以压的活动3、压缩便宜的活动4、压缩后是否有优化二、双代号时标网络图1、关键途径:起点到终点没有波浪线的路径:ADH或12682、虚工作:是垂直

  • C语言内存模型详细介绍_堆栈介绍

    C语言内存模型详细介绍_堆栈介绍(命令行参数区其实就是在通过dos或shell脚本调用时传递的参数,比如:a.exe123123)上图是C语言内存模型,其实虽然说叫C语言内存模型,其实并不是叫C语言内存模型,而是C语言根据CPU处理器搭建出来的一个模型!在开始介绍这些之前,读者需要了解一些体系结构:冯诺依曼体系:把程序本身当作数据来对待,程序指令和该程序处理的数据用同样的方式储存。冯·诺依曼体系结构的要点是:计算机的数制和…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号