1. 引入必要的文件: 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>
2. 创建菜单按钮: 使用 menubutton 函数创建菜单按钮。
<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-save'">File</a>
在上述代码中,menu 用于指定与按钮关联的菜单,iconCls 用于设置按钮图标。
3. 创建菜单: 使用 menu 函数创建菜单。
<div id="mm" class="easyui-menu" style="width:120px;">
<div data-options="iconCls:'icon-add'" onclick="addData()">Add</div>
<div data-options="iconCls:'icon-remove'" onclick="removeData()">Remove</div>
</div>
4. 初始化菜单按钮和菜单: 使用 menubutton 和 menu 函数初始化菜单按钮和菜单。
<script>
$(function(){
$('.easyui-menubutton').menubutton();
$('#mm').menu();
});
function addData(){
alert('Add data clicked!');
// 在这里添加具体的添加数据操作逻辑
}
function removeData(){
alert('Remove data clicked!');
// 在这里添加具体的删除数据操作逻辑
}
</script>
在上述代码中,menubutton 函数用于初始化菜单按钮,menu 函数用于初始化菜单。点击菜单按钮时,与之关联的菜单会弹出。
这是一个简单的例子,你可以根据实际需求和业务逻辑进行更复杂的定制。根据需要,你还可以使用不同的 EasyUI 主题、调整按钮样式、设置其他属性等。
转载请注明出处:http://www.zyzy.cn/article/detail/13094/jQuery EasyUI