本文實(shí)例為大家分享了Jquery Easyui菜單組件的實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
加載方式
菜單組件通常用于快捷菜單,在加載方式上,通過 class 或 JS 進(jìn)行設(shè)置為菜單組件。然后,再通過 JS 事件部分再響應(yīng)。
<div id="box" class="easyui-menu"> <div>新建</div> <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> <script> $(function () { //鼠標(biāo)右擊事件彈出菜單 $(document).on('contextmenu',function(e){ // 阻止系統(tǒng)默認(rèn)彈出的菜單 e.preventDefault(); // 顯示自定義的菜單 $('#box').menu('show', { left : e.pageX, top : e.pageY }); }); }); </script>菜單項(xiàng)屬性

<!--在 data-options 設(shè)置,只有兩個(gè)有效,其他的參數(shù)會(huì)菜單方法中設(shè)置菜單項(xiàng)時(shí)有效--><div data-options=" iconCls :'icon-save', disabled : true,"> 保存</div>
菜單屬性

//菜單屬性,設(shè)置在 data-options 也同樣有效$('#box').menu({ left : 100, top : 100, zIndex : 100, minwidth : 200, hideOnUnhover : true,});菜單事件

// 觸發(fā)事件$('#box').menu({ onShow : function () { alert('顯示時(shí)觸發(fā)!'); }, onHide : function () { alert('隱藏時(shí)觸發(fā)!'); }, onClick : function (item) { alert(item.text);}});菜單方法

//返回屬性對(duì)象console.log($('#box').menu('options'));//顯示菜單$('#box').menu('show', { left : e.pageX, top : e.pageY,});//隱藏菜單$('#box').menu('hide');//銷毀菜單$('#box').menu('destroy');//得到某個(gè)菜單項(xiàng)對(duì)象console.log($('#box').menu('getItem', '#new'));//設(shè)置某個(gè)菜單項(xiàng)文本$('#box').menu('setText', { target : '#new', text : '修改',});//設(shè)置某個(gè)菜單項(xiàng)圖標(biāo)$('#box').menu('setIcon', { target : '#new', iconCls : 'icon-add',});//通過文本獲取指定的菜單項(xiàng)對(duì)象console.log($('#box').menu('findItem','新建'));//追加一個(gè)頂層菜單項(xiàng)$('#box').menu('appendItem', { text : '新增', iconCls : 'icon-add', onclick : function () { alert('新增'); },});//追加一個(gè)子菜單項(xiàng)$('#box').menu('appendItem', { parent : $('#box').menu('findItem', '打開').target, text : '新增', iconCls : 'icon-add', onclick : function () { alert('新增'); },});//移出指定菜單項(xiàng)$('#box').menu('removeItem', '#new');//禁用指定菜單項(xiàng)$('#box').menu('disableItem', '#new');//啟用指定菜單項(xiàng)$('#box').menu('enableItem', '#new');//使用$.fn.menu.defaults 重寫默認(rèn)值對(duì)象。以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注