jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié)
需要解決的問題:
比如說 我先把行政區(qū)域的頁面打開之后,我又把產(chǎn)品類型管理的頁面打開,之后我再產(chǎn)品類型管理里添加了一條數(shù)據(jù),當(dāng)我點(diǎn)擊橫著的行政區(qū)域選項(xiàng)卡時(shí),我需要使用到產(chǎn)品類型管理崗添加的數(shù)據(jù),但是在行政區(qū)域里不存在那條數(shù)據(jù)。我就想讓這條數(shù)據(jù)顯示出來,所以我就想當(dāng)我點(diǎn)擊橫著的選項(xiàng)卡的時(shí)候,我就想讓刷新一下頁面。這時(shí)那條數(shù)據(jù)就會(huì)顯示出來。
主要是我完全不知道我點(diǎn)擊橫著的選項(xiàng)卡觸發(fā)的事件。代碼如下:
html
選項(xiàng)卡
<div data-options="region:'center',collapsible:false"> <div id="mainTabs" class="easyui-tabs" data-options="fit:true,narrow:true"> <div title="首頁" style="overflow:hidden;" data-options="iconCls:'fa fa-home'"> <div id="myclock" style="margin: 0 auto;width: 400px;" class="clock"></div> </div> </div> </div>
js
添加橫著的選項(xiàng)卡
function addTab(title, url) { if ($('#mainTabs').tabs('exists', title)) { $('#mainTabs').tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="'+ url+'" style="width:100%;height:99%;"></iframe>'; $('#mainTabs').tabs('add', { title: title, content: content, closable: true , cache:true, }); } }
點(diǎn)擊左邊選項(xiàng)卡
function clickTree(node) { if ($(this).tree('isLeaf', node.target)) { addTab(node.text, node.attributes.url); } else { $(this).tree('toggle', node.target); } }
問題算是解決了吧!
思路:主要就是點(diǎn)擊橫著的選項(xiàng)卡的時(shí)候,重新加載數(shù)據(jù)一樣。
function addTab(title, url) { if ($('#mainTabs').tabs('exists', title)) { $('#mainTabs').tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="'+ url+'" style="width:100%;height:99%;"></iframe>'; $('#mainTabs').tabs('add', { title: title, content: content, closable: true , cache:true, }); } } function clickTree(node) { if ($(this).tree('isLeaf', node.target)) { addTab(node.text, node.attributes.url); /* 獲取橫向的選項(xiàng)卡 */ var content = '<iframe scrolling="auto" frameborder="0" src="'+ node.attributes.url+'" style="width:100%;height:99%;"></iframe>'; $('#mainTabs').tabs({ onSelect: function (title) { var currTab = $('#mainTabs').tabs('getTab', title, node.attributes.url); var iframe = $(currTab.panel('options').content); var src =iframe.attr('src'); $('#mainTabs').tabs('update',{ options: { title: title, href: src } }); } }); } else { $(this).tree('toggle', node.target); } }
效果截圖:
先打開產(chǎn)品類型和基礎(chǔ)產(chǎn)品頁面
到 產(chǎn)品類型 添加數(shù)據(jù)
到基礎(chǔ)產(chǎn)品 添加數(shù)據(jù)
我想要的效果達(dá)到了!
主要代碼:
var content = '<iframe scrolling="auto" frameborder="0" src="'+ node.attributes.url+'" style="width:100%;height:99%;"></iframe>'; $('#mainTabs').tabs({ onSelect: function (title) { var currTab = $('#mainTabs').tabs('getTab', title, node.attributes.url); var iframe = $(currTab.panel('options').content); var src =iframe.attr('src'); $('#mainTabs').tabs('update',{ options: { title: title, href: src } }); } });
以上所述是小編給大家介紹的jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jqueryUI tab標(biāo)簽頁代碼分享
- jquery-easyui關(guān)閉tab自動(dòng)切換到前一個(gè)tab
- jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁/選項(xiàng)卡
- Jquery Easyui選項(xiàng)卡組件Tab使用詳解(10)
- 關(guān)于jQuery EasyUI 中刷新Tab選項(xiàng)卡后一個(gè)頁面變形的解決方法
- jQuery UI制作選項(xiàng)卡(tabs)
- jQuery EasyUI 選項(xiàng)卡面板tabs的使用實(shí)例講解
- 為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法
- Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例
- jquery ui 實(shí)現(xiàn) tab標(biāo)簽功能示例【測(cè)試可用】
相關(guān)文章
jQuery模仿阿里云購(gòu)買服務(wù)器選擇購(gòu)買時(shí)間長(zhǎng)度的代碼
jQuery仿阿里云購(gòu)買服務(wù)器選擇時(shí)間長(zhǎng)度,操作簡(jiǎn)單,只需點(diǎn)擊所要選的時(shí)間段,對(duì)實(shí)現(xiàn)代碼感興趣的朋友參考下2016-04-04jQuery如何獲取同一個(gè)類標(biāo)簽的所有值(默認(rèn)無法獲取)
jQuery總是只返回第一個(gè)類標(biāo)簽的值,所以無法達(dá)到我們的要求,那么jQuery如何獲取同一個(gè)類標(biāo)簽的所有的值,下面與大家分享方法2014-09-09jQuery實(shí)現(xiàn)的小圖列表,大圖展示效果幻燈片示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的小圖列表,大圖展示效果幻燈片,結(jié)合完整實(shí)例形式分析了jQuery圖片滑動(dòng)切換功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-10-10jQuery實(shí)現(xiàn)貪吃蛇小游戲(附源碼下載)
網(wǎng)上關(guān)于JS實(shí)現(xiàn)貪吃蛇的文章有很多,最近閑來無事,想著利用jQury來實(shí)現(xiàn)貪吃蛇小游戲,下面實(shí)現(xiàn)這篇文章主要介紹了利用jQuery實(shí)現(xiàn)貪吃蛇小游戲的方法,文中給出的是吸納思路和示例代碼,需要的朋友可以參考下。2017-03-03jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
看到了淘寶產(chǎn)品介紹中,圖片是在下拉滾動(dòng)條時(shí)加載,這是一個(gè)很不錯(cuò)的用戶體驗(yàn)。減少了頁面加載的時(shí)間了,也減輕了服務(wù)器的壓力,就查了下用JQuery..2010-02-02jQuery實(shí)現(xiàn)搜索頁面關(guān)鍵字的功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)搜索頁面關(guān)鍵字的功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02CSS+jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單
這篇文章主要介紹了CSS+jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單的代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2016-12-12jQuery實(shí)現(xiàn)移動(dòng)端懸浮拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)移動(dòng)端懸浮拖動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02jquery獲取特定name所有選中的checkbox,支持IE9標(biāo)準(zhǔn)模式
jquery獲取特定name所有選中的checkbox,支持IE9標(biāo)準(zhǔn)模式,需要的朋友可以參考一下2013-03-03