jQuery EasyUI菜單與按鈕詳解

2019-11-20 09:30:11

字體：大中小

來源：轉載

供稿：網友

EasyUI 簡介

easyui是一種基于jQuery的用戶界面插件集合。

easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。

使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。

easyui是個完美支持HTML5網頁的完整框架。

easyui節省您網頁開發的時間和規模。

easyui很簡單但功能強大的。

代碼如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>5、easyui 菜單與按鈕</title><link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css"><link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css"><script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script><script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script><script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script><script src="../../../js/crud/bus_pubuser.js"></script><script>$(function(){$(document).bind('contextmenu',function(e){$('#mm').menu('show', {left : e.pageY,top : e.pageX});return false;});});</script><script>$(function(){$(".dsbtn").linkbutton('disable');});</script></head><body><!--開始 創建簡單的菜單--><!--菜單默認是不顯示的 需要在javascript中調用顯示--><div id="mm" class="easyui-menu" style="width: 150px;height: 120px;"><div>新建</div><div><span>打開</span><div style="width:150px;height: 120px;"><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><!--結束 創建簡單的菜單--><!--開始 創建鏈接按鈕（Link Button）--><!--鏈接按鈕（Link Button）實則是使用 <a> 元素來創建的。所以實際上一個鏈接按鈕（Link Button）就是一個顯示為按鈕樣式的<a> 元素--><div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc"><a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a><a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a><a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a><a href="#" class="easyui-linkbutton">text button</a><a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a></div><!--加上屬性plain="true"其實就是去除按鈕樣式如圖--><div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc"><a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a><a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a><a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a><a href="#" class="easyui-linkbutton" plain="true">text button</a><a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a></div><!--如果要禁用按鈕只需要執行$(selector).linkbutton('disable');--><div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc"><a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-cancel">Cancel</a><a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-reload">Refresh</a><a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-search">Query</a><a href="#" class="easyui-linkbutton dsbtn">text button</a><a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-print">Print</a></div><!--結束 創建鏈接按鈕（Link Button）--><!--開始 創建菜單按鈕（Menu Button）--><div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc"><a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a> <a href="#" iconCls="icon-help" class="easyui-menubutton" menu="#mm2">help</a></div><div id="mm" style="width:150px;height: 180px;" menuAlign="left"> <div data-options="iconCls:'icon-undo'">Undo</div> <div data-options="iconCls:'icon-redo'">Redo</div> <div class="menu-sep"></div> <div>Cut</div> <div>Copy</div> <div>Paste</div> <div class="menu-sep"></div> <div data-options="iconCls:'icon-remove'">Delete</div> <div>Select All</div> </div> <div id="mm2" class="menu-bottom" style="position: absolute; width:100px;height:100px;"><div>Help</div><div>Update</div><div>About</div></div><!--結束 創建菜單按鈕（Menu Button）--></body><html>