easyUI工具栏（ToolBar）和按钮组（Buttons）

本文链接：https://blog.youkuaiyun.com/wuke666666/article/details/89669642

本文详细介绍了easyUI中ToolBar和Buttons的使用，通过实例展示了如何创建和操作这两个组件，包括点击事件的处理，帮助读者掌握在项目中实现交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Toolbar and Buttons - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    	<h2>Toolbar and Buttons</h2>
    	<p>The toolbar and buttons can be added to dialog.</p>
    	<div style="margin:20px 0;">
    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
    	</div>
    	<div id="dlg" class="easyui-dialog" title="Toolbar and Buttons" style="width:400px;height:200px;padding:10px"
    			data-options="
    				iconCls: 'icon-save',
    				toolbar: [{
    					text:'Add',
    					iconCls:'icon-add',
    					handler:function(){
    						alert('add')
    					}
    				},'-',{
    					text:'Save',
    					iconCls:'icon-save',
    					handler:function(){
    						alert('save')
    					}
    				}],
    				buttons: [{
    					text:'Ok',
    					iconCls:'icon-ok',
    					handler:function(){
    						alert('ok');
    					}
    				},{
    					text:'Cancel',
    					handler:function(){
    						alert('cancel');;
    					}
    				}]
    			">
    		The dialog content.
    	</div>
    	
    </body>
    </html>

效果如下：
点击Open
在这里插入图片描述