jQuery easyui tabsコンポーネントを拡張し、id(またはカスタム属性)に基づいてtabラベルを操作する

2132 ワード

easyuiは軽量級のバックグラウンド管理システムのフレームワークで、各種コンポーネントがあり、使用が簡単で便利で、現在は無料版のLicenseがあります.
しかし、tabsコンポーネントなどの卵が痛い場所もあります.このコンポーネントのデフォルトはtabのtitleまたはindexに基づいてのみ操作できます.左側のナビゲーションメニューの異なるメニューの下に同じ名前のサブメニューがある場合があります.
では、idや他のカスタム属性に基づいて選択してもらえませんか?答えは肯定的だ!
easyuiの無料版のコードは混同されているが、私たちが心を込めて見る限り、すべては浮雲だ.
次のコードは、tabsコンポーネントの拡張または書き換え方法の例を示します(使用時に、以下のコードをeasyui tabs操作を行う前に置くと1.4バージョンに基づいています).
(function(){//  easyui tabs     ,        id       ;  :          ,     ,                  
	var _methods = $.fn.tabs.methods;
	var _exists = _methods.exists;//     
	var _getTab = _methods.getTab;//     
	$.extend($.fn.tabs.methods, {
		getTab : function(jq, which) {//  getTab  ,    id  tab(  :               ,      id)
			if(!which) return null;
			var tabs = jq.data('tabs').tabs;
			for (var i = 0; i < tabs.length; i++) {
				var tab = tabs[i];
				if (tab.panel("options").id==which) {
					return tab;
				}
			}
			return _getTab(jq, which);//    id    ,   easyui   getTab    
		},
		exists : function(jq, which) {//  exists  ,  id  
			return this.getTab(jq,which)!=null;//      getTab  
		},
	});
})()

書き換えると、tabごとに異なるtitleを取ることを考慮することなく、一意のidに従ってtabを操作することができます.
また、easyuiのtabsラベルのクローズコードは、個人的には論理が厳密ではないと思います(純粋に個人的な見方です)、ソースコードと改善は以下の通りです.
function _334(_335,_336){
var opts=$.data(_335,"tabs").options;
var tabs=$.data(_335,"tabs").tabs;
var _337=$.data(_335,"tabs").selectHis;
if(!_338(_335,_336)){
return;
}
var tab=_339(_335,_336);
var _33a=tab.panel("options").title;
var _33b=_333(_335,tab);
if(opts.onBeforeClose.call(_335,_33a,_33b)==false){
return;
}
var tab=_339(_335,_336,true);
tab.panel("options").tab.remove();
tab.panel("destroy");
opts.onClose.call(_335,_33a,_33b);
_307(_335);
_337.splice(_33b,1);//TODO       :       tab    index  title  (            tab       ),        。
/*for(var i=0;i<_337.length if="" _337.splice="" i--="" var="" _33c="_337.pop();" _32a=""/>