Jquery Easyui選項(xiàng)卡組件Tab使用詳解(10)
本文實(shí)例為大家分享了Jquery Easyui選項(xiàng)卡組件的實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
加載方式
Class加載
<div class="easyui-tabs" style="width: 400px;height: 250px"> <div title="Tab1" data-options="closable:true"> tab1 </div> <div title="Tab2" data-options="closable:true"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true"> tab3 </div> </div>
JS調(diào)用加載
<div id="box" style="width: 400px;height: 250px"> <div title="Tab1" data-options="closable:true"> tab1 </div> <div title="Tab2" data-options="closable:true"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true"> tab3 </div> </div> <script> $(function () { $('#box').tabs({ // 選項(xiàng)卡容器寬度 width : 500, // 項(xiàng)卡容器高度 height: 400, // 是否不顯示控制面板背景。 plain : false, // 選項(xiàng)卡是否將鋪滿它所在的容器 fit : false, // 是否顯示選項(xiàng)卡容器邊框 border : true, // 選項(xiàng)卡滾動(dòng)條每次滾動(dòng)的像素值 scrollIncrement : 200, // 每次滾動(dòng)動(dòng)畫持續(xù)的時(shí)間 scrollDuration : 400, // 工具欄添加在選項(xiàng)卡面板頭的左側(cè)或右側(cè) tools:[{ iconCls : 'icon-add', handler : function () { alert('添加!'); }, }], // 工具欄位置 toolPosition : 'left', // 選項(xiàng)卡位置 tabPosition : 'left', // 選項(xiàng)卡標(biāo)題寬度,在 tabPosition 屬性設(shè)置為'left'或'right'的時(shí)候才有效 headerWidth : 300, // 標(biāo)簽條的寬度 tabWidth : 250, // 標(biāo)簽條的高度 tabHeight : 25, // 初始化選中一個(gè) tab 頁, 從0開始 selected : 2, // 是否顯示 tab 頁標(biāo)題 showHeader: true }) ; }); </script>
屬性列表
事件列表
$(function () { $('#box').tabs({ // 在 ajax 選項(xiàng)卡面板加載完遠(yuǎn)程數(shù)據(jù)的時(shí)候觸發(fā)。 onLoad : function (pannel) { alert(panel); }, // 用戶在選擇一個(gè)選項(xiàng)卡面板的時(shí)候觸發(fā) onSelect : function (title,index) { alert(title + '|' + index); }, // 用戶在取消選擇一個(gè)選項(xiàng)卡面板的時(shí)候觸發(fā)。 // (選擇另一個(gè)時(shí),先觸發(fā)上一個(gè)的此方法,再觸發(fā)下一個(gè)的onSelect方法) onUnselect : function (title, index) { alert(title + '|' + index); }, // 在選項(xiàng)卡面板關(guān)閉的時(shí)候觸發(fā),返回false 取消關(guān)閉操作 onBeforeClose : function (title, index) { alert(title + '|' + index); return false; }, // 在關(guān)閉一個(gè)選項(xiàng)卡面板的時(shí)候觸發(fā) onClose : function (title, index) { alert(title + '|' + index); }, // 在添加一個(gè)新選項(xiàng)卡面板的時(shí)候觸發(fā) onAdd : function (title, index) { alert(title + '|' + index); }, // 在更新一個(gè)選項(xiàng)卡面板的時(shí)候觸發(fā) onUpdate : function (title, index) { alert(title + '|' + index); }, // 在右鍵點(diǎn)擊一個(gè)選項(xiàng)卡面板的時(shí)候觸發(fā) onContextMenu : function (e, title, index) { alert(e + '|' + title + '|' + index); } }) ; });
方法列表
//返回屬性對象 console.log($('#box').tabs('options')); //返回所有選項(xiàng)卡面板 console.log($('#box').tabs('tabs')); //新增一個(gè)選項(xiàng)卡 $('#box').tabs('add', { title : '新面板', selected : false, }); //選擇指定下標(biāo)的選項(xiàng)卡 $('#box').tabs('select', 1); //取消選擇指定下標(biāo)的選項(xiàng)卡 $('#box').tabs('select', 0); //關(guān)閉指定下標(biāo)的選項(xiàng)卡 $('#box').tabs('close', 1); //重新調(diào)整面板布局和大小 $('#box').tabs('resize'); //指定下標(biāo)的選項(xiàng)卡是否存在 console.log($('#box').tabs('exists', 4)); //獲取指定下標(biāo)的選項(xiàng)卡 console.log($('#box').tabs('getTab', 1)); //獲取指定面板的索引 console.log($('#box').tabs('getTabIndex','#tab2')); //獲取被選定的選項(xiàng)卡 console.log($('#box').tabs('getSelected')); //顯示選項(xiàng)卡標(biāo)題 $('#box').tabs('showHeader'); //隱藏選項(xiàng)卡標(biāo)題 $('#box').tabs('hideHeader'); //更新一個(gè)選項(xiàng)卡 $('#box').tabs('update', { tab : $('#tab2'), options : { Title : '新標(biāo)題', } }); //禁用指定下標(biāo)或標(biāo)題的選項(xiàng)卡 $('#box').tabs('disableTab', 1); $('#box').tabs('disableTab', 'Tab2'); //啟用指定下標(biāo)或標(biāo)題的選項(xiàng)卡 $('#box').tabs('enableTab', 1); $('#box').tabs('enableTab', 'Tab2'); //滾動(dòng)選項(xiàng)卡標(biāo)題,正值向左,負(fù)值向右 $('#box').tabs('scrollBy', 100); //可以使用$.fn.tabs.defaults 重寫默認(rèn)值對象。 $.fn.tabs.defaults.border = false;
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jqueryUI tab標(biāo)簽頁代碼分享
- jquery-easyui關(guān)閉tab自動(dòng)切換到前一個(gè)tab
- jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁/選項(xiàng)卡
- jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié)
- 關(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)簽功能示例【測試可用】
相關(guān)文章
jQuery學(xué)習(xí)筆記之Helloworld
剛學(xué)習(xí)jQuery,覺得有的東西確實(shí)有必要寫下來,加深下記憶,本文純屬給自己寫的,希望大家不要見笑。2010-12-12基于jquery實(shí)現(xiàn)的可以編輯選擇的下拉框的代碼
主要是通過CSS樣式表中clip來實(shí)現(xiàn)的。兼容IE6-8,谷歌,火狐等。2010-11-11當(dāng)鼠標(biāo)移動(dòng)時(shí)出現(xiàn)特效的JQuery代碼
當(dāng)鼠標(biāo)移動(dòng)時(shí)出現(xiàn)特效,在某些情況下還是比較實(shí)現(xiàn)的,下面為大家介紹下通過JQuery是如何實(shí)現(xiàn)的,具體如下,感興趣的朋友可以參考下2013-11-11使用jQuery加載html頁面到指定的div實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘Query加載html頁面到指定的div實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07jquery動(dòng)態(tài)加載select下拉框示例代碼
動(dòng)態(tài)加載select下拉框的實(shí)現(xiàn)方法有很多,在接下來的文章中為大家介紹下jquery是如何實(shí)現(xiàn)的2013-12-12解決jquery submit()提交表單提示:f[s] is not a&nb
jquery submit()無法提交表單 報(bào)錯(cuò):f[s] is not a function,很是疑惑搜集整理了一些解決方法,感興趣的朋友可以了解下啊,希望本文對你有所幫助2013-01-01jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能完整實(shí)例
這篇文章主要介紹了jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)及頁面元素屬性變換的相關(guān)技巧,需要的朋友可以參考下2015-10-10