EasyUI Forum
May 08, 2024, 03:27:30 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How can I move tabs?  (Read 7509 times)
jimmywon
Newbie
*
Posts: 11


View Profile
« 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?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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
});
« Last Edit: March 01, 2014, 11:04:03 PM by stworthy » Logged
jimmywon
Newbie
*
Posts: 11


View Profile
« Reply #2 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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: March 01, 2014, 11:05:11 PM »

Please use the updated 'move' method definition.
Logged
jimmywon
Newbie
*
Posts: 11


View Profile
« Reply #4 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).
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #5 on: March 02, 2014, 03:19:58 AM »

Please refer to this example http://jsfiddle.net/w7q6X/
Logged
jimmywon
Newbie
*
Posts: 11


View Profile
« Reply #6 on: March 02, 2014, 07:14:08 AM »

It's worked.

Thanks a lot.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!