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

我們寫一個(gè)代碼

<%--創(chuàng)建選項(xiàng)卡容器--%><div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true,border:true,plain:false,tabPosition:'top'"><%--選項(xiàng)卡面板--%><div title="第一個(gè)" style="padding:20px;display:none;"><%--linkbutton組件效果--%><a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">測試linkbutton按鈕</a></div><%--選項(xiàng)卡面板--%><div title="第二個(gè)" 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è)置這個(gè)div為選項(xiàng)卡，里面有幾個(gè)內(nèi)部的div，那么就有幾個(gè)選項(xiàng)卡，只要寫了上面的代碼，那么我們在頁面就可以看到

因?yàn)槔锩鎸懥藘蓚€(gè)內(nèi)部的div，那么就可以看到兩個(gè)選項(xiàng)卡

每一個(gè)標(biāo)簽卡里面的屬性配置，那么就可以使用api里面的

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

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

[1] 功能需求

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

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

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

[3] 示例代碼

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

<%--聲明樹狀的ul容器--%><ul id="myTree" class="easyui-tree"><%--聲明一級菜單--%><li><span>超市購物網(wǎng)站</span><%--聲明二級菜單細(xì)信息--%><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)建選項(xiàng)卡的代碼

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

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

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

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

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

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

我們利用js

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

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

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

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

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

以上就是思路

總結(jié)

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

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