EasyUI初体验--右键弹框

时间：2024-12-21 23:33:14

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

相关文章