菜单

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> easyUI 课程表</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
	
	<script>
	$(function(){
		$(document).bind('contextmenu',function(e){
			$('#mm').menu('show', {
				left: e.pageX,
				top: e.pageY
			});
			return false;
		});
	});
	function showmenu(){
		$('#mm').menu('show', {
			left: 200,
			top: 100
		});
	}
	</script>
</head>
<body>
<div>
		Click <a href="#" onclick="showmenu()">here</a> to show the menu.
	</div>
<div id="mm" class="easyui-menu" style="width:120px;">
	<div onclick="javascript:alert('new')">New</div>
	<div>
		<span>Open</span>
		<div style="width:150px;">
			<div><b>Word</b></div>
			<div>Excel</div>
			<div>PowerPoint</div>
		</div>
	</div>
	<div icon="icon-save">Save</div>
	<div class="menu-sep"></div>
	<div>Exit</div>
</div>
</body>
</html>

效果

创建链接按钮



<div style="padding:5px;background:#fafafa;width:500px;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>
 
<div style="padding:5px;background:#fafafa;width:500px;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>
	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>
</div>

可以直接使用easyui默认的一些按钮格式,iconCls 属性是一个 icon 的 CSS class 样式，它在按钮上显示一个 icon 图片

可以通过设置, 让链接按钮失效

$(selector).linkbutton('disable');

效果

菜单按钮


<div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
	<a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit">Edit</a>
	<a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help">Help</a>
</div>
<div id="mm1" style="width:150px;">
	<div iconCls="icon-undo">Undo</div>
	<div 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 iconCls="icon-remove">Delete</div>
	<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
	<div>Help</div>
	<div>Update</div>
	<div>About</div>
</div>

不需要写js就可以使得菜单与按钮

效果

分割按钮

分割按钮（Split Button）包含一个链接按钮（Link Button）和一个菜单（Menu）。当用户点击或者鼠标悬停在向下箭头区域，将会显示一个对应的菜单。本实例演示了如何创建和使用分割按钮（Split Button）。


<div style="border:1px solid #ccc;background:#fafafa;padding:5px;width:120px;">
	<a href="#" class="easyui-splitbutton" menu="#mmm" iconCls="icon-edit">Edit</a>
	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
</div>
<div id="mmm" style="width:150px;">
	<div iconCls="icon-undo">Undo</div>
	<div 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>
		<span>Open</span>
		<div style="width:150px;">
			<div>Firefox</div>
			<div>Internet Explorer</div>
			<div class="menu-sep"></div>
			<div>Select Program...</div>
		</div>
	</div>
	<div iconCls="icon-remove">Delete</div>
	<div>Select All</div>
</div>

效果

jqueryeasyUI(6 菜单与按钮)

菜单

创建链接按钮

菜单按钮

分割按钮

猜你喜欢