【EasyUI篇】Menu選單元件
阿新 • • 發佈：2018-12-10
微信公眾號： 關注可瞭解更多的教程。問題或建議，請公眾號留言;[如果你覺得Md2All對你有幫助，歡迎讚賞]
14.Menu選單元件
JSP檔案
<%-- Created by IntelliJ IDEA. User: ooyhao Date: 2018/7/29 0029 Time: 9:21 --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Menu</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/Menu.js"></script> <style rel="stylesheet" type="text/css"> </style> </head> <body> <button id="btn1">右擊顯示選單</button> <br><br><br><br><br><br><br><br> <button id="btn2">點選顯示選單</button> <button id="btn3">點選關閉選單</button> <button id="btn4">點選銷燬選單</button> <button id="btn5">獲得DOM指定選單項</button> <button id="btn6">點選修改文字</button> <br><br> <button id="btn7">點選修改圖示</button> <button id="btn8">通過名稱獲得指定節點</button> <button id="btn9">新增一個子項</button> <button id="btn10">移除一個子項</button> <button id="btn11">禁用一個選單</button> <button id="btn12">啟用一個選單</button> <div id="box" class="easyui-menu" style="width:120px;"> <div id="new">新建</div> <%--禁用選單項--%> <%--data-options="disabled:true,"--%> <div > <span>開啟</span> <div style="width: 150px;"> <div>Word</div> <div>Excel</div> <div>Powerpoint</div> </div> </div> <div data-options="iconCls:'icon-save'">儲存</div> <div class="menu-sep"></div><%--分割線--%> <div>退出</div> </div> </body> </html>
JS檔案
$(function () { //禁用系統自帶的右擊選單 // e.preventDefault(); $("#box").menu({ left:100, top:100, minWidth:200, //當滑鼠離開選單區域是隱藏，預設為true， hideOnUnhover:true, //---------- 事件列表 --------------- onShow:function () { // alert("顯示時觸發"); }, onHide:function () { // alert("隱藏時觸發"); }, onClick:function (item) { // alert("點選時觸發:"+item.text); } }); //返回屬性物件 console.log($('#box').menu('options')); //顯示選單 $("#btn1").on('contextmenu',function (e) { //禁用系統自帶的右擊選單 e.preventDefault(); $("#box").menu('show',{ // left:e.pageX, // top:e.pageY, }); }); $("#btn2").click(function () { $('#box').menu('show',{ left:0, top:0, }); }); $("#btn3").click(function () { $('#box').menu('hide'); }); $("#btn4").click(function () { $('#box').menu('destroy'); }); $("#btn5").click(function () { console.log($('#box').menu('getItem',$("#new"))); }); $("#btn6").click(function () { $('#box').menu('setText',{ target: "#new", text:"請新建哦", }); }); $("#btn7").click(function () { $('#box').menu('setIcon',{ target: "#new", iconCls:"icon-add", }); }); $("#btn8").click(function () { console.log($('#box').menu('findItem','新建')); }); $("#btn9").click(function () { $('#box').menu('appendItem',{ id:'cut', text:'剪下', iconCls:'icon-cut', onclick:function () { alert("點選事件"); } }); }); $("#btn10").click(function () { $('#box').menu('removeItem','#cut'); }); $("#btn11").click(function () { $('#box').menu('disableItem','#cut'); }); $("#btn12").click(function () { $('#box').menu('enableItem','#cut'); }); });
效果圖
------------------------------------------------
關注小編微信公眾號獲取更多資源
