EasyUI导航栏。

最新推荐文章于 2022-04-07 21:18:42 发布

转载最新推荐文章于 2022-04-07 21:18:42 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/longdb/p/7581694.html

文章标签：

#javascript #ViewUI

本文展示了一个使用EasyUI框架实现的导航栏菜单配置实例，包括如何组织菜单结构及设置菜单项图标等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

    <div data-options="region:'west',split:true" title="导航栏菜单" style="width: 170px;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="系统设置1" data-options="selected:true">
                <div style="margin: 5px">
                    <ul class="tree easyui-tree" data-options="animate:true,lines:true">
                        <li data-options="iconCls:'icon-group'">
                            <span>基本设置</span>
                            <ul>
                                <li data-options="iconCls:'icon-group_add'">
                                    <span>test1</span>
                                </li>
                                <li data-options="iconCls:'icon-group_delete'">
                                    <span>test2</span>
                                </li>
                                <li data-options="iconCls:'icon-group_edit'">
                                    <span>test3</span>
                                </li>
                            </ul>
                        </li>
                        <li data-options="state:'closed',iconCls:'icon-joystick'">
                            <span>系统设置</span>
                            <ul>
                                <li data-options="iconCls:'icon-joystick_add'">
                                    <span>test4</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div title="系统设置2" style="padding: 10px;">
                content2
            </div>
            <div title="系统设置3" style="padding: 10px">
                content3
            </div>
        </div>
    </div>