php版微信公眾平臺之微信網(wǎng)頁登陸授權示例
719
2024-01-26
EasyUI 簡介
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化，互動，JavaScript應用程序，提供必要的功能。
使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
easyui是個完美支持HTML5網(wǎng)頁的完整框架。
easyui節(jié)省您網(wǎng)頁開發(fā)的時間和規(guī)模。
easyui很簡單但功能強大的。
代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>5、easyui 菜單與按鈕</title>
<link rel="stylesheet" type="text/css" >
<link rel="stylesheet" type="text/css" >
<link rel="stylesheet" type="text/css" >
<script src="http://www.gimoo.net/ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="http://www.gimoo.net/ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="http://www.gimoo.net/ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="http://www.gimoo.net/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>
<開始 創(chuàng)建簡單的菜單-->
<菜單默認是不顯示的 需要在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>
<結束 創(chuàng)建簡單的菜單-->
<開始 創(chuàng)建鏈接按鈕（Link Button）-->
<鏈接按鈕（Link Button）實則是使用 <a> 元素來創(chuàng)建的。
所以實際上一個鏈接按鈕（Link Button）就是一個顯示為按鈕樣式的<a> 元素-->
<div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc">
<a class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
<a class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>
<a class="easyui-linkbutton" iconCls="icon-search">Query</a>
<a class="easyui-linkbutton">text button</a>
<a class="easyui-linkbutton" iconCls="icon-print">Print</a>
</div>
<加上屬性plain="true"其實就是去除按鈕樣式如圖-->
<div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc">
<a class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>
<a class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>
<a class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>
<a class="easyui-linkbutton" plain="true">text button</a>
<a class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
</div>
<如果要禁用按鈕只需要執(zhí)行$(selector).linkbutton('disable');-->
<div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc">
<a class="easyui-linkbutton dsbtn" iconCls="icon-cancel">Cancel</a>
<a class="easyui-linkbutton dsbtn" iconCls="icon-reload">Refresh</a>
<a class="easyui-linkbutton dsbtn" iconCls="icon-search">Query</a>
<a class="easyui-linkbutton dsbtn">text button</a>
<a class="easyui-linkbutton dsbtn" iconCls="icon-print">Print</a>
</div>
<結束 創(chuàng)建鏈接按鈕（Link Button）-->
<開始 創(chuàng)建菜單按鈕（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 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>
<結束 創(chuàng)建菜單按鈕（Menu Button）-->
</body>
<html>
問題1：右鍵點擊按鈕出現(xiàn)菜單，但是并沒有屏蔽window自帶的右鍵菜單，去除<開始 創(chuàng)建鏈接按鈕（Link Button）-->之后的代碼，屏蔽了window自帶右鍵菜單，但是并沒有在點擊的時候的邊上，而是在最頂部；
問題2：如果沒有設置height屬性，并不自動識別高度，如下圖：
問題3：如下圖，菜單按鈕會顯示在上方，而不是顯示在下方，而且也存在不設置高度的話，不會自定識別高度
這些問題，是easyui框架本身的bug么，還是設置屬性出現(xiàn)問題，使用的easyui版本是1.4.5
以上所述是小編給大家介紹的jQuery EasyUI菜單與按鈕詳解，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對綠夏網(wǎng)網(wǎng)站的支持！
