轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮-前端开发

下面是 “轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮”的完整攻略：

下面是 “轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮”的完整攻略：

创建菜单

EasyUI提供了$menu()方法可以创建一个菜单组件。下面是一个示例：

$('#menu').menu({
    onClick:function(item){
        alert(item.name);
    }
});

在上面的代码中，选择器 "$('#menu')" 用于选择要创建菜单的元素。menu() 方法中传入了一个 onClick() 回调函数，该函数在菜单项单击时被调用，并且将当前菜单项作为参数传递。该函数弹出一个提示框，显示了当前菜单项的名称。此外，还可以根据需求添加更多的配置选项，如菜单项的样式、位置等。

创建按钮

EasyUI提供了一个$linkbutton() 方法可以创建按钮元素。下面是一个示例：

$('#btn').linkbutton({
    text:'保存',
    icons: [{
        iconCls:'icon-save'
    }],
    onClick:function(){
        alert('已保存');
    }
});

在上面的代码中，选择器 "$('#btn')"用于选择要创建按钮的元素。linkbutton() 方法中传入了一些配置选项，如按钮的文本、图标等，并且设置了一个 onClick() 回调函数，该函数在按钮单击时被调用，并且弹出一个提示框，显示了“已保存”的信息。可以自由添加或删除按钮样式的配置选项，根据需求进行定制。

示例说明

下面是一个具体的示例，演示如何使用EasyUI创建菜单和按钮，以实现一个简单的页面导航和功能按钮：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI创建菜单与按钮示例</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(){
            $('#menu').menu({
                onClick:function(item){
                    $('#content').html('您点击了 ' + item.name + ' 菜单！');
                }
            });

            $('#btnSave').linkbutton({
                text:'保存',
                iconCls:'icon-save',
                onClick:function(){
                    alert('已保存');
                }
            });

            $('#btnReset').linkbutton({
                text:'重置',
                iconCls:'icon-reload',
                onClick:function(){
                    alert('已重置');
                }
            });
        });
    </script>
</head>
<body>
<div class="easyui-panel" title="EasyUI创建菜单与按钮示例" style="width:400px;height:300px;padding:10px;">
    <div id="menu" style="width:100px;">
        <div data-options="iconCls:'icon-home'">首页</div>
        <div data-options="iconCls:'icon-search'">查询</div>
        <div data-options="iconCls:'icon-exit'">退出</div>
    </div>
    <br/>
    <div>
        <a href="#" id="btnSave"></a>
        <a href="#" id="btnReset"></a>
    </div>
    <br/>
    <div id="content"></div>
</div>
</body>
</html>