我們可以利用樹實現(xiàn)菜單的顯示，但是我們需要每點擊一個菜單在右側(cè)實現(xiàn)一個選項卡，這個就需要easyui里面的選項卡的功能

我們寫一個代碼

<%--創(chuàng)建選項卡容器--%><div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true,border:true,plain:false,tabPosition:'top'"><%--選項卡面板--%><div title="第一個" style="padding:20px;display:none;"><%--linkbutton組件效果--%><a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">測試linkbutton按鈕</a></div><%--選項卡面板--%><div title="第二個" style="padding:20px;display:none;"><%--linkbutton組件效果--%><a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">測試linkbutton按鈕</a></div></div>

最外層的div就是設(shè)置這個div為選項卡，里面有幾個內(nèi)部的div，那么就有幾個選項卡，只要寫了上面的代碼，那么我們在頁面就可以看到

因為里面寫了兩個內(nèi)部的div，那么就可以看到兩個選項卡

每一個標簽卡里面的屬性配置，那么就可以使用api里面的

以上是介紹了選項卡的實現(xiàn)

那么如何將菜單和選項卡聯(lián)動起來呢？實現(xiàn)的效果為

[1] 功能需求

點擊樹狀菜單的時候，可以在頁面的中心區(qū)域中新增一個選項卡，顯示當前
菜單的資源。如果當前菜單對應的選項卡已經(jīng)存在，則不會重新創(chuàng)建，而是
選擇已經(jīng)存在的選項卡顯示給用戶。具有子菜單的一級菜單是無需創(chuàng)建選項卡的

[2] 功能實現(xiàn)

① 給樹狀菜單的節(jié)點增加單擊事件
② 在樹節(jié)點的單擊事件中校驗當前點擊的是資源跳轉(zhuǎn)菜單還是一級菜單
③ 在樹節(jié)點的單擊事件中增加新增選項卡的邏輯
④ 判斷菜單節(jié)點的選項卡是否存在如果已經(jīng)存在，則選中，而不是創(chuàng)建

[3] 示例代碼

先是菜單的代碼，這個代碼的樣式是使用easyui的樹class=“easyui-tree”

<%--聲明樹狀的ul容器--%><ul id="myTree" class="easyui-tree"><%--聲明一級菜單--%><li><span>超市購物網(wǎng)站</span><%--聲明二級菜單細信息--%><ul><li>天貓超市</li><li>京東超市</li><li>永輝超市</li></ul></li><%--聲明一級菜單信息--%><li><span>電器購物網(wǎng)站</span><%--聲明二級菜單信息--%><ul><li>京東</li><li>蘇寧</li><li>國美</li></ul></li><%--普通一級菜單--%><li><span>淘寶網(wǎng)</span></li></ul>

以上的代碼界面效果是

之后開始創(chuàng)建選項卡的代碼

<%--創(chuàng)建選項卡容器--%><div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true,border:true,plain:false,tabPosition:'top'"></div>

以上的選項卡的只是寫了一個最外層的div，在界面是沒效果的。如果我們在里面寫幾個內(nèi)部的div，就會有效果。但是現(xiàn)在是點擊了菜單之后，里面才建立內(nèi)部的div，所以需要在菜單按鈕上面加事件。

菜單上面加事件，事件方法里面創(chuàng)建選項卡，這樣菜單和選項卡就通過事件連接起來了

/****************設(shè)置樹組件*************************/$(function () {$("#myTree").tree({onClick:function (node) {//判斷當前點擊的節(jié)點是否具有子節(jié)點console.log(node);var cs=node.children;判斷是不是一級菜單if(!cs){//判斷菜單節(jié)點的選項卡是否存在var flag=$("#tt").tabs('exists',node.text);if(flag){//選中菜單節(jié)點對用的選項卡$("#tt").tabs('select',node.text);}else{//新增選項卡$("#tt").tabs('add',{title:node.text,closable:true})}}}})})

寫了以上的代碼，就實現(xiàn)了聯(lián)動，就實現(xiàn)了效果圖

菜單的實現(xiàn)是使用的easyui的樹，UI標簽上面寫class="easyui-tree"就可以展現(xiàn)菜單形狀了，UI里面的li就是子菜單

我們利用js

$(function () {$("#myTree").tree({onClick:function (node) {

這個onClick點擊事件，node參數(shù)就是我們點擊的哪個菜單，node里面的信息就是哪個菜單的。
我們在控制臺輸出node，就可以看到，點擊不同的菜單，輸出的就不一樣。如果一級菜單下有二級菜單，輸出的node里面就有屬性chridren.。我們可以根據(jù)有沒有這個屬性判斷是不是一級菜單。

onClick:function (node) {//判斷當前點擊的節(jié)點是否具有子節(jié)點console.log(node);var cs=node.children;判斷是不是一級菜單if(!cs){

因為只有沒有子菜單的按鈕，才可以彈出選項卡，所以，只要用if判斷了沒有children，那么里面就可以寫關(guān)于選項卡的代碼了。

if(!cs){//判斷菜單節(jié)點的選項卡是否存在var flag=$("#tt").tabs('exists',node.text);if(flag){//選中菜單節(jié)點對用的選項卡$("#tt").tabs('select',node.text);}else{//新增選項卡$("#tt").tabs('add',{title:node.text,closable:true})}

以上就是思路

總結(jié)

以上是生活随笔為你收集整理的利用easyui实现 菜单节点和选项卡的联动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。