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>

    效果图例如以下:

                                                              

  • 相关阅读:
    燃料
    Widgets学习
    莫比乌斯反演与杜教筛
    jade在命令行实时编译
    jade文档声明和头尾标签
    团队成员之间的对抗与互助的鼓励
    jade简介
    node入口文件分析和目录初始化
    搭建一个项目的前期准备
    判断团队适不适合使用node
  • 原文地址:https://www.cnblogs.com/yxwkf/p/4042229.html
Copyright © 2011-2022 走看看