easyui tabs BUG

[js9528]

The version of 1.2.4 has bugs:
can not find tab by tabid,if there include some tab with same title but not same url,only one tab can show.

[ellisgl]

It's not really a bug, but "I would like this, I would like this now!" feature. =)

Being able to call via an ID instead of title would make life a lot easier. I was going to submit a patch - but I see that the code has been obscured.

[ellisgl]

Actually found the source.
Here's my hackish plugin:
/plugins/jquery.idtabs.js

Code:

/**
 * idtabs - jQuery EasyUI
 * 
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2011 ellisgl
 */
(function($)
{
    // get the left position of the tab element
    function getTabLeftPosition(container, tab)
    {
        var w = 0;
        var b = true;

        $('>div.tabs-header ul.tabs li', container).each(function()
        {
            if(this == tab)
            {
                b = false;
            }

            if(b == true)
            {
                w += $(this).outerWidth(true);
            }
        });

        return w;
    }
    
    // get the max tabs scroll width(scope)
    function getMaxScrollWidth(container)
    {
        var header    = $('>div.tabs-header', container);
        var tabsWidth = 0;    // all tabs width

        $('ul.tabs li', header).each(function()
        {
            tabsWidth += $(this).outerWidth(true);
        });

        var wrapWidth = $('.tabs-wrap', header).width();
        var padding   = parseInt($('.tabs', header).css('padding-left'));
        
        return tabsWidth - wrapWidth + padding;
    }
    
    // set the tabs scrollers to show or not,
    // dependent on the tabs count and width
    function setScrollers(container)
    {
        var header    = $('>div.tabs-header', container);
        var tabsWidth = 0;

        $('ul.tabs li', header).each(function()
        {
            tabsWidth += $(this).outerWidth(true);
        });
        
        if(tabsWidth > header.width())
        {
            $('.tabs-scroller-left', header).css('display', 'block');
            $('.tabs-scroller-right', header).css('display', 'block');
            $('.tabs-wrap', header).addClass('tabs-scrolling');
            
            if($.boxModel == true)
            {
                $('.tabs-wrap', header).css('left',2);
            }
            else
            {
                $('.tabs-wrap', header).css('left',0);
            }

            var width = header.width()
                      - $('.tabs-scroller-left', header).outerWidth()
                      - $('.tabs-scroller-right', header).outerWidth();

            $('.tabs-wrap', header).width(width);
         }
         else
         {
            $('.tabs-scroller-left', header).css('display', 'none');
            $('.tabs-scroller-right', header).css('display', 'none');
            $('.tabs-wrap', header).removeClass('tabs-scrolling').scrollLeft(0);
            $('.tabs-wrap', header).width(header.width());
            $('.tabs-wrap', header).css('left',0);
        }
    }
    
    // set size of the tabs container
    function setSize(container)
    {
        var opts   = $.data(container, 'tabs').options;
        var cc     = $(container);

        if(opts.fit == true)
        {
            var p       = cc.parent();
            opts.width  = p.width();
            opts.height = p.height();
        }

        cc.width(opts.width).height(opts.height);
        
        var header = $('>div.tabs-header', container);

        if($.boxModel == true)
        {
            var delta = header.outerWidth() - header.width();

            header.width(cc.width() - delta);
        }
        else
        {
            header.width(cc.width());
        }
        
        setScrollers(container);
        
        var panels = $('>div.tabs-panels', container);
        var height = opts.height;

        if(!isNaN(height))
        {
            if($.boxModel == true)
            {
                var delta = panels.outerHeight() - panels.height();

                panels.css('height', (height - header.outerHeight() - delta) || 'auto');
            }
            else
            {
                panels.css('height', height - header.outerHeight());
            }
        }
        else
        {
            panels.height('auto');
        }

        var width = opts.width;

        if(!isNaN(width))
        {
            if($.boxModel == true)
            {
                var delta = panels.outerWidth() - panels.width();

                panels.width(width - delta);
            }
            else
            {
                panels.width(width);
            }
        }
        else
        {
            panels.width('auto');
        }
        
        if($.parser)
        {
            $.parser.parse(container);
        }
    }
    
    /**
     * make the selected tab panel fit layout
     */
    function fitContent(container)
    {
        var tab = $('>div.tabs-header ul.tabs li.tabs-selected', container);

        if(tab.length)
        {
            var panelId = $.data(tab[0], 'tabs.tab').id;
            var panel   = $('#'+panelId);
            var panels  = $('>div.tabs-panels', container);

            if(panels.css('height').toLowerCase() != 'auto')
            {
                if($.boxModel == true)
                {
                    panel.height(panels.height() - (panel.outerHeight()-panel.height()));
                    panel.width(panels.width() - (panel.outerWidth()-panel.width()));
                }
                else
                {
                    panel.height(panels.height());
                    panel.width(panels.width());
                }
            }

            $('>div', panel).triggerHandler('_resize');
        }
    }
    
    // wrap the tabs header and body
    function wrapTabs(container)
    {
        $(container).addClass('tabs-container');
        $(container).wrapInner('<div class="tabs-panels"/>');
        $('<div class="tabs-header">'
                + '<div class="tabs-scroller-left"></div>'
                + '<div class="tabs-scroller-right"></div>'
                + '<div class="tabs-wrap">'
                + '<ul class="tabs"></ul>'
                + '</div>'
                + '</div>').prependTo(container);
        
        var header = $('>div.tabs-header', container);
        
        $('>div.tabs-panels>div', container).each(function()
        {
            if(!$(this).attr('id'))
            {
                $(this).attr('id', 'gen-tabs-panel' + $.fn.idtabs.defaults.idSeed++);
            }
            
            var options =
            {
                id       : $(this).attr('id'),
                title    : $(this).attr('title'),
                content  : null,
                href     : $(this).attr('href'),
                closable : $(this).attr('closable') == 'true',
                icon     : $(this).attr('icon'),
                selected : $(this).attr('selected') == 'true',
                cache    : $(this).attr('cache') == 'false' ? false : true
            };

            $(this).attr('title', '');
            createTab(container, options);
        });

        $('>div.tabs-panels>div', container).each(function()
        {
           if(!$(this).attr('id').match('tab_'))
           {
               //var y = $(this).attr('id').replace('tab_', '');
               $(this).attr('id', 'content_'+$(this).attr('id'));
           }
        });

        $('.tabs-scroller-left, .tabs-scroller-right', header).hover(
            function(){$(this).addClass('tabs-scroller-over');},
            function(){$(this).removeClass('tabs-scroller-over');}
        );
        $(container).bind('_resize', function(){
            var opts = $.data(container, 'tabs').options;
            if(opts.fit == true){
                setSize(container);
                fitContent(container);
            }
            return false;
        });
    }
    
    function setProperties(container)
    {
        var opts   = $.data(container, 'tabs').options;
        var header = $('>div.tabs-header', container);
        var panels = $('>div.tabs-panels', container);
        var tabs   = $('ul.tabs', header);
        
        if(opts.plain == true)
        {
            header.addClass('tabs-header-plain');
        }
        else
        {
            header.removeClass('tabs-header-plain');
        }

        if(opts.border == true)
        {
            header.removeClass('tabs-header-noborder');
            panels.removeClass('tabs-panels-noborder');
        }
        else
        {
            header.addClass('tabs-header-noborder');
            panels.addClass('tabs-panels-noborder');
        }
        
        $('li', tabs).unbind('.tabs').bind('click.tabs', function()
        {
            $('.tabs-selected', tabs).removeClass('tabs-selected');
            $(this).addClass('tabs-selected');
            $(this).blur();
            $('>div.tabs-panels>div', container).css('display', 'none');
            
            var wrap    = $('.tabs-wrap', header);
            var leftPos = getTabLeftPosition(container, this);
            var left    = leftPos - wrap.scrollLeft();
            var right   = left + $(this).outerWidth();

            if(left < 0 || right > wrap.innerWidth())
            {
                var pos = Math.min(leftPos - (wrap.width()-$(this).width()) / 2,
                                   getMaxScrollWidth(container));

                wrap.animate({scrollLeft:pos}, opts.scrollDuration);
            }

            var tabAttr = $.data(this, 'tabs.tab');
            var panel   = $('#content_' + tabAttr.id);

            panel.css('display', 'block');

            if(tabAttr.href && (!tabAttr.loaded || !tabAttr.cache))
            {
                panel.load(tabAttr.href, null, function()
                {
                    if($.parser)
                    {
                        $.parser.parse(panel);
                    }

                    opts.onLoad.apply(this, arguments);

                    tabAttr.loaded = true;
                });
            }

            fitContent(container);
            opts.onSelect.call(panel, tabAttr.id);
        });
        
        $('a.tabs-close', tabs).unbind('.tabs').bind('click.tabs', function()
        {
            var elem    = $(this).parent()[0];
            var tabAttr = $.data(elem, 'tabs.tab');
            closeTab(container, tabAttr.id);
        });

        $('.tabs-scroller-left', header).unbind('.tabs').bind('click.tabs', function()
        {
            var wrap = $('.tabs-wrap', header);
            var pos  = wrap.scrollLeft() - opts.scrollIncrement;

            wrap.animate({scrollLeft:pos}, opts.scrollDuration);
        });

        $('.tabs-scroller-right', header).unbind('.tabs').bind('click.tabs', function()
        {
            var wrap = $('.tabs-wrap', header);
            var pos  = Math.min(wrap.scrollLeft() + opts.scrollIncrement,
                                getMaxScrollWidth(container));

            wrap.animate({scrollLeft:pos}, opts.scrollDuration);
        });
    }
    
    function createTab(container, options)
    {
        var header   = $('>div.tabs-header', container);
        var tabs     = $('ul.tabs', header);
        var tab      = $('<li></li>').attr({id : 'tab_'+options.id});
        var tab_span = $('<span></span>').html(options.title);
        var tab_a    = $('<a class="tabs-inner"></a>').attr('href', 'javascript:void(0)')
                                                      .append(tab_span);

        tab.append(tab_a).appendTo(tabs);
        
        if(options.closable)
        {
            tab_span.addClass('tabs-closable');
            tab_a.after('<a href="javascript:void(0)" class="tabs-close"></a>');
        }

        if(options.icon)
        {
            tab_span.addClass('tabs-with-icon');
            tab_span.after($('<span/>').addClass('tabs-icon').addClass(options.icon));
        }

        if(options.selected)
        {
            tab.addClass('tabs-selected');
        }

        if(options.content)
        {
            $('#content_' + options.id).html(options.content);
        }
        
        $('#content_' + options.id).removeAttr('title');

        $.data(tab[0], 'tabs.tab',
        {
            id     : options.id,
            title  : options.title,
            href   : options.href,
            loaded : false,
            cache  : options.cache
        });
        //console.log($.data(tab[0], 'tabs.tab'));
    }
    
    function addTab(container, options)
    {
        options    = $.extend(
        {
            id       : null,
            title    : '',
            content  : '',
            href     : null,
            cache    : true,
            icon     : null,
            closable : false,
            selected : true,
            height   : 'auto',
            width    : 'auto'
        }, options || {});
        
        if(options.selected)
        {
            $('.tabs-header .tabs-wrap .tabs li', container).removeClass('tabs-selected');
        }

        options.id = options.id || 'gen-tabs-panel' + $.fn.idtabs.defaults.idSeed++;
        
        $('<div></div>').attr({'id'    : 'content_'+options.id,
                               'title' : options.title})
                        .height(options.height)
                        .width(options.width)
                        .appendTo($('>div.tabs-panels', container));

        createTab(container, options);
    }
    
    // close a tab with specified title
    function closeTab(container, id)
    {
        var opts     = $.data(container, 'tabs').options;
        var elem     = $('>div.tabs-header #tab_'+id, container)[0];

        if(!elem)
        {
            return;
        }
        
        var tabAttr  = $.data(elem, 'tabs.tab');
        var panel    = $('#content_' + id);
        
        if(opts.onClose.call(panel, tabAttr.title) == false)
        {
            return;
        }
        
        var selected = $(elem).hasClass('tabs-selected');

        $.removeData(elem, 'tabs.tab');
        $(elem).remove();
        panel.remove();
        setSize(container);

        if(selected)
        {
            selectTab(container);
        }
        else
        {
            var wrap = $('>div.tabs-header .tabs-wrap', container);
            var pos  = Math.min(wrap.scrollLeft(),
                                getMaxScrollWidth(container));

            wrap.animate({scrollLeft:pos}, opts.scrollDuration);
        }
    }
    
    // active the selected tab item, if no selected item then active the first item
    function selectTab(container, id)
    {
        if(id)
        {
            var elem = $('>div.tabs-header #tab_'+id, container)[0];

            if(elem)
            {
                $(elem).trigger('click');
            }
        }
        else
        {
            var tabs = $('>div.tabs-header ul.tabs', container);

            if($('.tabs-selected', tabs).length == 0)
            {
                $('li:first', tabs).trigger('click');
            }
            else
            {
                $('.tabs-selected', tabs).trigger('click');
            }
        }
    }

    function exists(container, id)
    {
        return $('>div.tabs-header #tab_'+id, container).length > 0;
    }
    
    $.fn.idtabs          = function(options, param)
    {
        if(typeof options == 'string')
        {
            switch(options)
            {
                case 'resize':
                    return this.each(function()
                    {
                        setSize(this);
                    });

                case 'add':
                    return this.each(function()
                    {
                        addTab(this, param);
                        $(this).idtabs();
                    });

                case 'close':
                    return this.each(function()
                    {
                        closeTab(this, param);
                    });

                case 'select':
                    return this.each(function()
                    {
                        selectTab(this, param);
                    });

                case 'exists':
                    return exists(this[0], param);
            }
        }

        options = options || {};

        return this.each(function()
        {
            var state = $.data(this, 'tabs');
            var opts;

            if(state)
            {
                opts          = $.extend(state.options, options);
                state.options = opts;
            }
            else
            {
                var t = $(this);
                opts  = $.extend({}, $.fn.idtabs.defaults,
                {
                    width  : (parseInt(t.css('width')) || undefined),
                    height : (parseInt(t.css('height')) || undefined),
                    fit    : (t.attr('fit') ? t.attr('fit') == 'true' : undefined),
                    border : (t.attr('border') ? t.attr('border') == 'true' : undefined),
                    plain  : (t.attr('plain') ? t.attr('plain') == 'true' : undefined)
                }, options);

                wrapTabs(this);
                $.data(this, 'tabs',
                {
                    options: opts
                });
            }

            setProperties(this);
            setSize(this);
            selectTab(this);
        });
    };
    
    $.fn.idtabs.defaults =
    {
        width           : 'auto',
        height          : 'auto',
        idSeed          : 0,
        plain           : false,
        fit             : false,
        border          : true,
        scrollIncrement : 100,
        scrollDuration  : 400,
        onLoad          : function(){},
        onSelect        : function(id){},
        onClose         : function(id){}
    };
})(jQuery);

[ellisgl]

jquery.parser.js

Code:

(function($){
	$.parser = {
		auto: true,
		plugins:['linkbutton','menu','menubutton','splitbutton','layout',
				 'tree','window','dialog','datagrid',
				 'combobox','combotree','numberbox','validatebox',
				 'calendar','datebox','panel','tabs','idtabs','accordion'
		],
		parse: function(context){
			if ($.parser.auto){
				for(var i=0; i<$.parser.plugins.length; i++){
					(function(){
						var name = $.parser.plugins[i];
						var r = $('.easyui-' + name, context);
						if (r.length){
							if (r[name]){
								r[name]();
							} else if (window.easyloader){
								easyloader.load(name, function(){
									r[name]();
								})
							}
						}
					})();
				}
			}
		}
	};
	$(function(){
		$.parser.parse();
	});
})(jQuery);

[ellisgl]

easyloader.js

Code:

/**
 * easyloader - jQuery EasyUI
 * 
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2010 stworthy [ stworthy@gmail.com ] 
 * 
 */
(function(){
	var modules = {
		draggable:{
			js:'jquery.draggable.js'
		},
		droppable:{
			js:'jquery.droppable.js'
		},
		resizable:{
			js:'jquery.resizable.js'
		},
		linkbutton:{
			js:'jquery.linkbutton.js',
			css:'linkbutton.css'
		},
		pagination:{
			js:'jquery.pagination.js',
			css:'pagination.css',
			dependencies:['linkbutton']
		},
		datagrid:{
			js:'jquery.datagrid.js',
			css:'datagrid.css',
			dependencies:['panel','resizable','linkbutton','pagination']
		},
		treegrid:{
			js:'jquery.treegrid.js',
			css:'tree.css',
			dependencies:['datagrid']
		},
		panel: {
			js:'jquery.panel.js',
			css:'panel.css'
		},
		window:{
			js:'jquery.window.js',
			css:'window.css',
			dependencies:['resizable','draggable','panel']
		},
		dialog:{
			js:'jquery.dialog.js',
			css:'dialog.css',
			dependencies:['linkbutton','window']
		},
		messager:{
			js:'jquery.messager.js',
			css:'messager.css',
			dependencies:['linkbutton','window']
		},
		layout:{
			js:'jquery.layout.js',
			css:'layout.css',
			dependencies:['resizable','panel']
		},
		form:{
			js:'jquery.form.js'
		},
		menu:{
			js:'jquery.menu.js',
			css:'menu.css'
		},
		tabs:{
			js:'jquery.tabs.js',
			css:'tabs.css',
			dependencies:['panel','linkbutton']
		},
		idtabs:{
			js:'jquery.idtabs.js',
			css:'tabs.css',
			dependencies:['panel','linkbutton']
		},
		splitbutton:{
			js:'jquery.splitbutton.js',
			css:'splitbutton.css',
			dependencies:['linkbutton','menu']
		},
		menubutton:{
			js:'jquery.menubutton.js',
			css:'menubutton.css',
			dependencies:['linkbutton','menu']
		},
		accordion:{
			js:'jquery.accordion.js',
			css:'accordion.css',
			dependencies:['panel']
		},
		calendar:{
			js:'jquery.calendar.js',
			css:'calendar.css'
		},
		combo:{
			js:'jquery.combo.js',
			css:'combo.css',
			dependencies:['panel','validatebox']
		},
		combobox:{
			js:'jquery.combobox.js',
			css:'combobox.css',
			dependencies:['combo']
		},
		combotree:{
			js:'jquery.combotree.js',
			dependencies:['combo','tree']
		},
		combogrid:{
			js:'jquery.combogrid.js',
			dependencies:['combo','datagrid']
		},
		validatebox:{
			js:'jquery.validatebox.js',
			css:'validatebox.css'
		},
		numberbox:{
			js:'jquery.numberbox.js',
			dependencies:['validatebox']
		},
		spinner:{
			js:'jquery.spinner.js',
			css:'spinner.css',
			dependencies:['validatebox']
		},
		numberspinner:{
			js:'jquery.numberspinner.js',
			dependencies:['spinner','numberbox']
		},
		timespinner:{
			js:'jquery.timespinner.js',
			dependencies:['spinner']
		},
		tree:{
			js:'jquery.tree.js',
			css:'tree.css',
			dependencies:['draggable','droppable']
		},
		datebox:{
			js:'jquery.datebox.js',
			css:'datebox.css',
			dependencies:['calendar','validatebox']
		},
		parser:{
			js:'jquery.parser.js'
		}
	};
	
	var locales = {
		'af':'easyui-lang-af.js',
		'bg':'easyui-lang-bg.js',
		'ca':'easyui-lang-ca.js',
		'cs':'easyui-lang-cs.js',
		'da':'easyui-lang-da.js',
		'de':'easyui-lang-de.js',
		'en':'easyui-lang-en.js',
		'fr':'easyui-lang-fr.js',
		'nl':'easyui-lang-nl.js',
		'zh_CN':'easyui-lang-zh_CN.js',
		'zh_TW':'easyui-lang-zh_TW.js'
	};
	
	var queues = {};
	
	function loadJs(url, callback){
		var done = false;
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.language = 'javascript';
		script.src = url;
		script.onload = script.onreadystatechange = function(){
			if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')){
				done = true;
				script.onload = script.onreadystatechange = null;
				if (callback){
					callback.call(script);
				}
			}
		}
		document.getElementsByTagName("head")[0].appendChild(script);
	}
	
	function runJs(url, callback){
		loadJs(url, function(){
			document.getElementsByTagName("head")[0].removeChild(this);
			if (callback){
				callback();
			}
		});
	}
	
	function loadCss(url, callback){
		var link = document.createElement('link');
		link.rel = 'stylesheet';
		link.type = 'text/css';
		link.media = 'screen';
		link.href = url;
		document.getElementsByTagName('head')[0].appendChild(link);
		if (callback){
			callback.call(link);
		}
	}
	
	function loadSingle(name, callback){
		queues[name] = 'loading';
		
		var module = modules[name];
		var jsStatus = 'loading';
		var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded';
		
		if (easyloader.css && module['css']){
			if (/^http/i.test(module['css'])){
				var url = module['css'];
			} else {
				var url = easyloader.base + 'themes/' + easyloader.theme + '/' + module['css'];
			}
			loadCss(url, function(){
				cssStatus = 'loaded';
				if (jsStatus == 'loaded' && cssStatus == 'loaded'){
					finish();
				}
			});
		}
		
		if (/^http/i.test(module['js'])){
			var url = module['js'];
		} else {
			var url = easyloader.base + 'plugins/' + module['js'];
		}
		loadJs(url, function(){
			jsStatus = 'loaded';
			if (jsStatus == 'loaded' && cssStatus == 'loaded'){
				finish();
			}
		});
		
		function finish(){
			queues[name] = 'loaded';
			easyloader.onProgress(name);
			if (callback){
				callback();
			}
		}
	}
	
	function loadModule(name, callback){
		var mm = [];
		var doLoad = false;
		
		if (typeof name == 'string'){
			add(name);
		} else {
			for(var i=0; i<name.length; i++){
				add(name[i]);
			}
		}
		
		function add(name){
			if (!modules[name]) return;
			var d = modules[name]['dependencies'];
			if (d){
				for(var i=0; i<d.length; i++){
					add(d[i]);
				}
			}
			mm.push(name);
		}
		
		function finish(){
			if (callback){
				callback();
			}
			easyloader.onLoad(name);
		}
		
		var time = 0;
		function loadMm(){
			if (mm.length){
				var m = mm[0];	// the first module
				if (!queues[m]){
					doLoad = true;
					loadSingle(m, function(){
						mm.shift();
						loadMm();
					});
				} else if (queues[m] == 'loaded'){
					mm.shift();
					loadMm();
				} else {
					if (time < easyloader.timeout){
						time += 10;
						setTimeout(arguments.callee, 10);
					}
				}
			} else {
				if (easyloader.locale && doLoad == true && locales[easyloader.locale]){
					var url = easyloader.base + 'locale/' + locales[easyloader.locale];
					runJs(url, function(){
						finish();
					});
				} else {
					finish();
				}
			}
		}
		
		loadMm();
	}
	
	easyloader = {
		modules:modules,
		locales:locales,
		
		base:'.',
		theme:'default',
		css:true,
		locale:null,
		timeout:2000,
	
		load: function(name, callback){
			if (/\.css$/i.test(name)){
				if (/^http/i.test(name)){
					loadCss(name, callback);
				} else {
					loadCss(easyloader.base + name, callback);
				}
			} else if (/\.js$/i.test(name)){
				if (/^http/i.test(name)){
					loadJs(name, callback);
				} else {
					loadJs(easyloader.base + name, callback);
				}
			} else {
				loadModule(name, callback);
			}
		},
		
		onProgress: function(name){},
		onLoad: function(name){}
	};

	var scripts = document.getElementsByTagName('script');
	for(var i=0; i<scripts.length; i++){
		var src = scripts[i].src;
		if (!src) continue;
		var m = src.match(/easyloader\.js(\W|$)/i);
		if (m){
			easyloader.base = src.substring(0, m.index);
		}
	}

	window.using = easyloader.load;
	
	if (window.jQuery){
		jQuery(function(){
			easyloader.load('parser', function(){
				jQuery.parser.parse();
			});
		});
	}
	
})();

[js9528]

where can I download it?

[js9528]

iconCls does not work

[ellisgl]

oops should be icon not iconCls

[ellisgl]

No place for download - just cut and paste the parts into their respected files.

[js9528]

thanks a lot 

[eggbert]

Where did you find the source code?

The source on the download page is minified.

[ellisgl]

http://code.google.com/p/jquery-easyui/source/browse/#svn%2Ftrunk%2Fsrc

[js9528]

it can only display well in ie Compatible mode.