📌  相关文章
📜  EasyUI jQuery 菜单小部件(1)

📅  最后修改于: 2023-12-03 15:30:35.568000             🧑  作者: Mango

EasyUI jQuery 菜单小部件

EasyUI jQuery菜单小部件是一个用于创建Web应用程序的轻量级UI库，可轻松创建动态菜单，使用户界面更加美观和易于使用。

特性
  • 简单易用：易于控制菜单的方式和行为。
  • 可扩展：EasyUI jQuery菜单小部件支持无限层次的菜单。
  • 自定义样式：允许用户在不同的主题中选择自定义样式，以适应不同的用户界面。
如何使用
  1. 在HTML文件中添加EasyUI的CSS和JS文件。
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
  1. 在HTML文件中添加菜单结构。
<div id="mm" class="easyui-menu">
    <div data-options="iconCls:'icon-add',plain:true" onclick="javascript:add();">Add</div>
    <div data-options="iconCls:'icon-save',plain:true" onclick="javascript:save();">Save</div>
    <div class="menu-sep"></div>
    <div>Remove</div>
    <div>Update</div>
    <div>Help</div>
</div>
  1. 初始化菜单。
$('#mm').menu();
示例

以下是创建一个简单菜单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI Menu Demo</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#mm').menu({
                onClick:function(item){
                    alert(item.name);
                }
            });
        });
        function add() {
            alert('add');
        }
        function save() {
            alert('save');
        }
    </script>
</head>
<body>
    <div id="mm" class="easyui-menu">
        <div data-options="iconCls:'icon-add',plain:true" onclick="javascript:add();">Add</div>
        <div data-options="iconCls:'icon-save',plain:true" onclick="javascript:save();">Save</div>
        <div class="menu-sep"></div>
        <div name="remove">Remove</div>
        <div name="update">Update</div>
        <div>Help</div>
    </div>
</body>
</html>
结论

EasyUI jQuery菜单小部件可以帮助程序员轻松创建动态菜单，使用户界面更加美观和易于使用。