• 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>

    效果图例如以下:

                                                              

  • 相关阅读:
    Web服务器的有关概念
    备份微信中大量的公众号,备份其二维码图片
    (转载)使用SecureCRT连接Linux时,alt + .等功能键不能使用的解决办法
    Q查询
    ManyToMany参数(through,db_constraint)
    formset批量处理form表单数据
    modelform动态显示select标签的对象范围
    request对象的常用属性和方法
    Django查询orm的前一天,前一周,一个月的数据
    render的几个应用
  • 原文地址:https://www.cnblogs.com/yxwkf/p/4042229.html
Copyright © 2020-2023  润新知