zoukankan      html  css  js  c++  java
  • 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="120px;">
            <div onclick="javascript:alert('new')">新建</div>
            <div>
                <span>打开</span>
                <div style="150px;">
                    <div><b>Word</b></div>
                    <div>Excel</div>
                    <div>PowerPoint</div>
                    <div>
                        <span>M1</span>
                        <div style="120px;">
                            <div>sub1</div>
                            <div>sub2</div>
                            <div>
                                <span>Sub</span>
                                <div style="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="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>

    效果图例如以下:

                                                              

  • 相关阅读:
    一个iOS程序员眼中的跨域问题
    web 大规模并发访问的解决方案
    修改Capfile,在正式环境不再使用migration修改数据库
    关于 CAS 不能登录的问题
    老项目占地比较大的原因是release文件夹里有.git 目录
    capistrano3.4.0部署不能自动登录
    capistrano/blob/v3.4.0部署
    私有方法的查找方式
    开启关闭功能没有生效的原因
    找不到Settings
  • 原文地址:https://www.cnblogs.com/yxwkf/p/4042229.html
Copyright © 2011-2022 走看看