jquery-easyui中轻松建立下拉菜单

easyui中建立下拉菜单很简单，定义菜单栏和菜单的MARKUP，然后用jQuery让其运转起来。

先看一个例子的效果图：

现在来看菜单栏怎么定义：

	<div style="background:#EDF4E6;padding:5px;width:300px;border:1px solid #ccc;">
		<a href="javascript:void(0)" id="sb1" icon="icon-edit" onclick="javascript:alert('edit')">Edit</a>
		<a href="javascript:void(0)" id="sb2" icon="icon-ok" onclick="javascript:alert('ok')">Ok</a>
		<a href="javascript:void(0)" id="mb3" icon="icon-help">Help</a>
	</div>

这栏的markup再简单不过了，再来看看菜单的定义：

	<div id="mm1" style="width:150px;">
		<div icon="icon-undo">Undo</div>
		<div icon="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>工具栏</span>
			<div style="width:150px;">
				<div>地址</div>
				<div>链接</div>
				<div>导航工具栏</div>
				<div>书签工具栏</div>
				<div class="menu-sep"></div>
				<div>新建工具栏...</div>
			</div>
		</div>
		<div icon="icon-remove">Delete</div>
		<div>Select All</div>
	</div>
	<div id="mm2" style="width:100px;">
		<div icon="icon-ok">Ok</div>
		<div icon="icon-cancel">Cancel</div>
	</div>
	<div id="mm3" style="width:150px;">
		<div>Help3</div>
		<div class="menu-sep"></div>
		<div>About3</div>
	</div>

这里定义了三个菜单，都是HTML MARKUP，一看就明白。

最后执行菜单的建立语句：

$('#sb1').splitbutton({menu:'#mm1'});
$('#sb2').splitbutton({menu:'#mm2'});
$('#mb3').menubutton({menu:'#mm3'});

这里建立了二种BUTTON，分别称为MenuButton和SplitButton，将其和菜单联系起来。

需要编写的JS语句就这三行。

评论

2 楼 kjj 2010-01-24  

很漂亮,希望发展成一套优秀的jq插件

1 楼 tianlinzx 2010-01-21  

感觉楼主的东西做的很不错，关注你的 jquery-easyui 套件很久了。
现在唯一的遗憾就是 datagrid中 CRUD的例子还没有，就是说如何做添加，编辑，功能。
如果能给那样的例子，我会向我们经理推荐，在下一个项目中使用jquery-easyui。