git.roojs.org Git - roojs1/blob - examples/bootstrap/dashboard3.slidetest.js

   1
   2
   3 dashboard3.slidetest = function (tbb)
   4 {
   5
   6
   7     this.tba =  Roo.bootstrap.NavGroup.get(tbb.navId).getActive();
   8     this.tbb = tbb;
   9     if (!this.tba) {
  10         alert("could not get active tab");
  11         return;
  12     }
  13     if (this.tba.tabId == this.tbb.tabId) {
  14         return; // same tab...
  15     }
  16
  17
  18     this.el = tba.el;
  19     this.nel = tbb.el;
  20
  21     // we can work out the direction based on the sequence..
  22     this.pel = this.el.findParent('.tab-content', 3, true);
  23     var cn = this.pel.select('.tab-pane',true);
  24     this.dir = cn.indexOf(this.nel) -  cn.indexOf(this.el);
  25
  26
  27     this.slide();
  28 }
  29 Roo.apply(dashboard3.slidetest.prototype, {
  30     el : false,
  31     dir : 1,
  32     nel : false, // next el.
  33     pel : false, // parent el.
  34
  35
  36     slide: function() {
  37
  38         // first tabcontent - needs overflow hidden..
  39
  40
  41         this.pel.setStyle('overflow', 'hidden');
  42         var obox = this.pel.getBox(true,true);
  43
  44
  45         var box = this.el.getBox();
  46         Roo.log([obox,box]);
  47         this.el.setStyle({
  48             position: 'absolute',
  49             left : obox.x+ 'px',
  50             top : 0,
  51             width : box.width + 'px',
  52             height: box.height+ 'px',
  53
  54         });
  55         // need to fix the left/right....
  56
  57         var nbox = this.nel.getBox();
  58         // if dir = 1 - then put on right..
  59
  60         var start = this.dir > 0 ? (box.width + obox.x + 50 ) : (-1 * (box.width + 50)) + obox.x;
  61
  62         var end = this.dir > 0 ? -1 * (box.width + 50 ) : (box.width + obox.x + 50 );
  63
  64         this.nel.setStyle({
  65             position: 'absolute',
  66             left : start + 'px',
  67             top : 0,
  68             width : box.width + 'px',
  69             height: nbox.height+ 'px',
  70         });
  71         this.nel.addClass('active');
  72
  73         // now we need to animate the both boxes moving from box.width + obox.x + 50 --> obox.x
  74         var _t = this;
  75         this.nel.animate({
  76             left : {
  77                 from : start,
  78                 to : obox.x
  79             }
  80         }, 0.5,function() { _t.completeSlide(); }, 'easeOut', 'run');
  81
  82         this.el.animate({
  83             left : {
  84                 from : obox.x ,
  85                 to : end
  86             }
  87         }, 0.5, false, 'easeOut', 'run');
  88
  89
  90
  91     },
  92     completeSlide : function()
  93     {
  94         // remove styles + classes.. that we have added..
  95         this.nel.removeClass('active');
  96         this.pel.setStyle('overflow', '');
  97
  98         // reset the styles
  99           this.nel.setStyle({
 100             position: '',
 101             left : '',
 102             top : '',
 103             width :'',
 104             height: ''
 105           });
 106
 107
 108
 109           this.el.setStyle({
 110             position: '',
 111             left : '',
 112             top : '',
 113             width :'',
 114             height: ''
 115         });
 116         // apply the data..
 117         this.tba.setActive(false);
 118         this.tbb.setActive(true);
 119
 120     }
 121
 122
 123 });