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.