位置：广州松河 > 技术支持 > EasyUI 菜单按钮

EasyUI 菜单按钮

来源：网络整理时间：2023/2/14 0:03:11 共 3635 浏览

创建：
菜单按钮包含按钮和菜单两部分，当点击或者移动鼠标到按钮上的时候，显示相应的菜单。定义菜单按钮，需要定义链接按钮和菜单，像这样：

    <div style="background:#C9EDCC;padding:5px;width:200px;">

        <a href="javascript:void(0)" id="mb1" icon="icon-edit">Edit</a>

        <a href="javascript:void(0)" id="mb2" icon="icon-help">Help</a>

    </div>

    <div id="mm1" style="width:150px;">

        <div icon="icon-undo">Undo</div>

        <div icon="icon-redo">Redo</div>

        <div class="menu-sep"></div>

        <div>Cut</div>

        <div>Copy</div>

        <div>Paste</div>

        <div class="menu-sep"></div>

        <div icon="icon-remove">Delete</div>

        <div>Select All</div>

    </div>

    <div id="mm2" style="width:100px;">

        <div>Help</div>

        <div>Update</div>

        <div>About</div>

    </div>

使用下列jQuery代码：

$('#mb1').menubutton({menu:'#mm1'});

$('#mb2').menubutton({menu:'#mm2'});

现在，菜单按钮就完成了。

拆分：

拆分按钮包括链接按钮和菜单。当用户点击或者悬停在下箭头区域时显示相关菜单。这个例子是建立拆分按钮的演示：
首先，创建一个链接按钮和菜单标记：

<div style="border:1px solid #ccc;background:#ddd;padding:5px;width:120px;">

    <a href="javascript:void(0)" id="sb" icon="icon-edit">Edit</a>

    <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" icon="icon-help"></a>

</div>

<div id="mm" style="width:150px;">

    <div icon="icon-undo">Undo</div>

    <div icon="icon-redo">Redo</div>

    <div class="menu-sep"></div>

    <div>Cut</div>

    <div>Copy</div>

    <div>Paste</div>

    <div class="menu-sep"></div>

    <div>

        <span>Open</span>

        <div style="width:150px;">

            <div>Firefox</div>

            <div>Internet Explorer</div>

            <div class="menu-sep"></div>

            <div>Select Program...</div>

        </div>

    </div>

    <div icon="icon-remove">Delete</div>

    <div>Select All</div>

</div>

jQuery 代码：
$('#sb').splitbutton({menu:'#mm'});
运行后会出现：

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：EasyUI Window和Layout | ·下一条：EasyUI 链接按钮