2013年3月9日 星期六

Single Page與選單連動切換- jQuery-One-Page-Nav

最近越來越流行Single Page的網站,所以也衍生出了很多有趣的前端技術,這個外掛就是讓人可以在單頁切換選單的時候,可以跳到那個選項,或是移到某個選項也可以切換到那個選單。

外掛網址
jQuery-One-Page-Nav

他有使用另一個外掛,是用來scroll到特定位置的,所以兩隻都要引入
  1. <script src="jquery.scrollTo.js"></script>  
  2. <script src="jquery.nav.js"></script>  

然後準備類似下面的html

  1. <ul id="nav">  
  2.     <li class="current"><a href="#section-1">Section 1</a></li>  
  3.     <li><a href="#section-2">Section 2</a></li>  
  4.     <li"><a href="#section-3">Section 3</a></li>  
  5. </ul>  
  6.   
  7. <div id="section-1">  
  8.     <strong>Section 1</strong>  
  9.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  10. </div>  
  11.   
  12. <div id="section-2">  
  13.     <strong>Section 2</strong>  
  14.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  15. </div>  
  16.   
  17. <div id="section-3">  
  18.     <strong>Section 3</strong>  
  19.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  20. </div>  

參考plugin頁的範例,再調整你要的東西,就完成了
  1. $('#nav').onePageNav({   
  2.     currentClass: 'current',   
  3.     changeHash: false,   
  4.     scrollSpeed: 750,   
  5.     scrollOffset: 30,   
  6.     scrollThreshold: 0.5,   
  7.     filter: '',   
  8.     easing: 'swing',   
  9.     begin: function() {   
  10.         //I get fired when the animation is starting   
  11.     },   
  12.     end: function() {   
  13.         //I get fired when the animation is ending   
  14.     },   
  15.     scrollChange: function($currentListItem) {   
  16.         //I get fired when you enter a section and I pass the list item of the section   
  17.     }   
  18. });  

Demo

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...