微信公众号:程序yuan
关注可了解更多的教程。问题或建议,请公众号留言;
查看--> 全套EasyUI示例目录
15.MenuButton菜单按钮组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>MenuButton</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/MenuButton.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<%--class加载方式--%>
<%-- <a href="javascript:void(0)" id="edit"
class="easyui-menubutton"
data-options="menu:'#box',iconCls:'icon-edit'">编辑</a>--%>
<a href="javascript:void(0)" id="edit">编辑</a>
<div id="box" style="width: 150px;">
<div data-options="iconCls:'icon-undo'">撤销</div>
<div data-options="iconCls:'icon-redo'">恢复</div>
<div class="menu-sep"></div>
<div>剪切</div>
<div>复制
<div>
<div>复制复制</div>
</div>
</div>
<div>粘贴</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">删除</div>
<div>全选</div>
</div>
</body>
</html>
JS文件
$(function () {
$('#edit').menubutton({
iconCls:'icon-edit',
menu:'#box',
//默认为true,
plain:false,
//鼠标滑过按钮时显示菜单的持续时间
duration:100,
//其他属性继承自LinkButton,可以参考LinkButton
// disabled:true,
});
//禁用菜单项
$('#edit').menubutton('disable');
//启用菜单项
$('#edit').menubutton('enable');
$(document).click(function () {
//返回属性对象
// console.log($('#edit').menubutton('options'));
//销毁按钮
$('#edit').menubutton('destroy');
});
});
效果图
------------------------------------------------
关注小编微信公众号获取更多资源