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

   1
   2
   3 dashboard3.slidetest = function (el,dir)
   4 {
   5     this.el = el;
   6     this.dir = dir;
   7     this.slide();
   8 }
   9 Roo.apply(dashboard3.slidetest.prototype, {
  10     el : false,
  11     dir : 1,
  12     nel : false, // next el.
  13     pel : false, // parent el.
  14
  15
  16     slide: function() {
  17
  18         // first tabcontent - needs overflow hidden..
  19
  20         this.pel = this.el.findParent('.tab-content', 3, true);
  21         this.pel.setStyle('overflow', 'hidden');
  22         var obox = this.pel.getBox(true,true);
  23
  24
  25         var box = this.el.getBox();
  26         Roo.log([obox,box]);
  27         this.el.setStyle({
  28             position: 'absolute',
  29             left : obox.x+ 'px',
  30             top : 0,
  31             width : box.width + 'px',
  32             height: box.height+ 'px',
  33
  34         });
  35         // need to fix the left/right....
  36         var panes = this.pel.select('.tab-pane',true);
  37         var ix = panes.indexOf(this.el);
  38
  39         // dir = 1...
  40
  41         this.nel = panes.item(ix+1);
  42         var nbox = this.nel.getBox();
  43
  44         this.nel.setStyle({
  45             position: 'absolute',
  46             left : (box.width + obox.x + 50 ) + 'px',
  47             top : 0,
  48             width : box.width + 'px',
  49             height: nbox.height+ 'px',
  50         });
  51         this.nel.addClass('active');
  52
  53         // now we need to animate the both boxes moving from box.width + obox.x + 50 --> obox.x
  54         var _t = this;
  55         this.nel.animate({
  56             left : {
  57                 from : (box.width + obox.x + 50 ),
  58                 to : obox.x
  59             }
  60         }, 0.5,function() { _t.completeSlide(); }, 'easeOut', 'run');
  61
  62         this.el.animate({
  63             left : {
  64                 from : obox.x ,
  65                 to : -1 * (box.width + 50 )
  66             }
  67         }, 0.5, false, 'easeOut', 'run');
  68
  69
  70
  71     },
  72     completeSlide : function()
  73     {
  74
  75           this.pel.setStyle('overflow', '');
  76           this.nel.setStyle({
  77             position: 'relative',
  78             left : '',
  79             top : '',
  80             width :'',
  81             height: ''
  82           });
  83           this.el.setStyle({
  84             position: 'relative',
  85             left : '',
  86             top : '',
  87             width :'',
  88             height: ''
  89           });
  90
  91
  92     }
  93
  94
  95 });