Team:NCTU Formosa/source/header-human practice

From 2014.igem.org

(Difference between revisions)
Line 78: Line 78:
     });
     });
});
});
-
//PBAB縮放顯示
+
$(function(){
-
$(document).ready(function(){
+
// 預設顯示第一個頁籤
-
$(".doo1").hide() ;
+
// 並先把 .tabs, .tabs li 及 .tab_content, .tab_content li 等元素取出
-
$(".doo2").hide() ;
+
// 同時也要取得 .tab_content 的寬
-
$(".doo3").hide() ;
+
var _default = 0,
-
$(".doo4").hide() ;
+
$block = $('#abgne-block-20120327'),
-
$(".doo5").hide() ;
+
$tabs = $block.find('.tabs'),
-
$(".doo6").hide() ;
+
$tabsLi = $tabs.find('li'),
-
$(".doo7").hide() ;
+
$tab_content = $block.find('.tab_content'),
-
$(".doo8").hide() ;
+
$tab_contentLi = $tab_content.find('li'),
-
$(".doo9").hide() ;
+
_width = $tab_content.width();
-
  $("#move1").click(function(){
+
-
  $(".doo1").toggle(500);
+
// 當滑鼠移到 .tabs li 上時要套用 .hover 樣式
-
  });
+
// 移出時要移除 .hover 樣式
-
  $("#move2").click(function(){
+
$tabsLi.hover(function(){
-
  $(".doo2").toggle(500);
+
var $this = $(this);
-
  });
+
-
  $("#move3").click(function(){
+
// 若被滑鼠移上去的 li 是目前顯示的頁籤就不做任何動作
-
  $(".doo3").toggle(500);
+
if($this.hasClass('active')) return;
-
  });
+
-
  $("#move4").click(function(){
+
$this.toggleClass('hover');
-
  $(".doo4").toggle(500);
+
}).click(function(){ // 當滑鼠點擊 .tabs li 時
-
  });
+
// 先取出被點擊及目前顯示的頁籤與索引
-
  $("#move5").click(function(){
+
var $active = $tabsLi.filter('.active').removeClass('active'),
-
  $(".doo5").toggle(500);
+
_activeIndex = $active.index(), 
-
  });
+
$this = $(this).addClass('active').removeClass('hover'),
-
  $("#move6").click(function(){
+
_index = $this.index(),
-
  $(".doo6").toggle(500);
+
isNext = _index > _activeIndex;
-
  });
+
-
  $("#move7").click(function(){
+
// 如果被點擊的頁籤就是目前已顯示的頁籤, 則不做任何動作
-
  $(".doo7").toggle(500);
+
if(_activeIndex == _index) return;
-
  });
+
-
  $("#move8").click(function(){
+
// 依索引大或小來決定移動的位置
-
  $(".doo8").toggle(500);
+
$tab_contentLi.eq(_activeIndex).stop().animate({
-
  });
+
left: isNext ? -_width : _width
-
  $("#move9").click(function(){
+
}).end().eq(_index).css('left', isNext ? _width : -_width).stop().animate({
-
  $(".doo9").toggle(500);
+
left: 0
-
  });
+
});
 +
});
 +
 +
// 先把預設要顯示的頁籤加上 .active 樣式及顯示相對應的內容
 +
$tabsLi.eq(_default).addClass('active');
 +
$tab_contentLi.eq(_default).siblings().css({
 +
left: _width
 +
});
});
});
</script>
</script>

Revision as of 15:06, 24 September 2014

Retrieved from "http://2014.igem.org/Team:NCTU_Formosa/source/header-human_practice"