李炎恢_PHP_jQuery EasyUI[018] ~ Menu(功能表)元件
李炎恢_PHP_jQuery EasyUI[018] ~ Menu(功能表)元件
參考資料: https://github.com/jash-git/jash-WebSI
GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI
My code:
$(function () {
$(document).on('contextmenu', function (e) {
e.preventDefault();
$('#box').menu('show', {
left : e.pageX,
top : e.pageY,
});
});
/*
$(document).on('contextmenu', function (e) {
e.preventDefault();
$('#box').menu('hide');
});
*/
//console.log($('#box').menu('options'));
//$('#box').menu('destroy');
//console.log($('#box').menu('getItem','#new').id);
//$('#box').menu('setText', {
// target : '#new',
// text : '新新',
//});
//$('#box').menu('setIcon', {
// target : '#new',
// iconCls : 'icon-add',
//});
//console.log($('#box').menu('findItem','退出'));
/*
$('#box').menu('appendItem', {
id : 'add',
text : '新增',
iconCls : 'icon-add',
href : '123.html',
onclick : function () {
console.log($('#box').menu('findItem','新增'));
}
});
*/
//$('#box').menu('removeItem','#new');
//$('#box').menu('disableItem','#new');
//$('#box').menu('enableItem','#new');
$('#box').menu({
/*
onShow : function () {
alert('显示时触发！');
},
onHide : function () {
alert('隐藏时触发！');
},
*/
onClick : function (item) {
alert(item.text);
}
});
});
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="../../easyui_15/jquery.min.js"></script> <script type="text/javascript" src="../../easyui_15/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../easyui_15/locale/easyui-lang-zh_TW.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/icon.css" /> </head> <body> <div id="box" class="easyui-menu" data-options="left:10,top:10,minWidth:120,hideOnUnhover:false,"> <div id="new">新建</div> <div> 打开 <div> <div>Word</div> <div>Excel</div> <div>PowerPoint</div> </div> </div> <div data-options="iconCls:'icon-save',disabled:true">保存</div> <div>退出</div> </div> </body> </html>
PDF:
執行結果:
