EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jimmywon on February 28, 2014, 01:27:12 AM



Title: How can I move tabs?
Post by: jimmywon on February 28, 2014, 01:27:12 AM
If I created 3 tab in tabs,
I want to move tab' position 2 to posision 1,
How to do?


Title: Re: How can I move tabs?
Post by: stworthy on March 01, 2014, 09:11:35 AM
Please extend a new method named 'move' to achieve this functionality.
Code:
<script>
$.extend($.fn.tabs.methods, {
    move: function(jq, param){
        return jq.each(function(){
            var state = $.data(this, 'tabs');
            var tabs = state.tabs;
            var index = -1;
            for(var i=0; i<tabs.length; i++){
                if (tabs[i][0] == param.tab[0]){
                    index = i;
                    break;
                }
            }
            if (index >= 0){
                var p = tabs[index];
                tabs.splice(index, 1);
                tabs.splice(param.index>index?param.index-1:param.index, 0, p);
                var tab = p.panel('options').tab;
                var to = tab.parent().children('li').eq(param.index);
                if (to.length){
                    tab.insertBefore(to);
                } else {
                    tab.appendTo(tab.parent());
                }
            }
        })
    }
});
</script>

The code below shows how to move the selected tab to the first position.
Code:
var t = $('#tt');
var selected = t.tabs('getSelected');
t.tabs('move', {
  tab: selected,
  index: 0
});


Title: Re: How can I move tabs?
Post by: jimmywon on March 01, 2014, 08:06:12 PM
Yes, It's work, Thanks a lot.

But, If I move tabs' Index 2 to tabs' Index 3 (move to right),
some problem:

click tabs' 2 title, show tabs' 3,
click tabs' 3 title, show tabs' 2.


Title: Re: How can I move tabs?
Post by: stworthy on March 01, 2014, 11:05:11 PM
Please use the updated 'move' method definition.


Title: Re: How can I move tabs?
Post by: jimmywon on March 02, 2014, 01:45:53 AM
I'm sorry.

tab can move from 3 to 2 (index smaller then selected index),

but from 2 to 3 cannot work (index greater then selected index).


Title: Re: How can I move tabs?
Post by: stworthy on March 02, 2014, 03:19:58 AM
Please refer to this example http://jsfiddle.net/w7q6X/


Title: Re: How can I move tabs?
Post by: jimmywon on March 02, 2014, 07:14:08 AM
It's worked.

Thanks a lot.