EasyUi 树形菜单

实现效果:
EasyUi 树形菜单_第1张图片

<body class="easyui-layout">
    <div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
        <ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
            <li>
                <span>商品管理span>
                <ul>
                    <li data-options="attributes:{'url':'/rest/item-add'}">新增商品li>
                    <li data-options="attributes:{'url':'/rest/item-list'}">查询商品li>
                    <li data-options="attributes:{'url':'/rest/item-param-list'}">规格参数li>
                ul>
            li>
            <li>
                <span>网站内容管理span>
                <ul>
                    <li data-options="attributes:{'url':'/rest/content-category'}">内容分类管理li>
                    <li data-options="attributes:{'url':'/rest/content'}">内容管理li>
                ul>
            li>
         ul>
    div>
    <div data-options="region:'center',title:''">
        <div id="tabs" class="easyui-tabs">
            <div title="首页" style="padding:20px;">

            div>
        div>
    div>

首先定义一个easyui layout类型为west,然后在region中定义一个easyui tree。
然后为树节点增加点击事件
EasyUi 树形菜单_第2张图片

点击节点时创建tab标签页

你可能感兴趣的:(HTML+CSS+JS)