2010-10-29 54 views
0

我碰到一個jQuery插件嚮導來了在以下URI:根據選擇使左列移動?

http://www.techlaboratory.net/labs/SmartWizard/wizard-vertical.htm

雖然提供我的目的,我想實現一個小的事情。如果我添加5個以上的步驟,顯然不是所有步驟都可見。相反,當點擊下一個時,我試圖將選中的步驟居中。因此,舉例來說,如果我點擊第2步,左邊表示第2步的框應該居中。有人可以提出一個好方法來做到這一點?

回答

1

我做了的jsfiddle:http://jsfiddle.net/elektronikLexikon/xWmhh/
它的工作原理與此代碼:

$('.wiz-container').smartWizard(); 

var ul_height = 400; // default: 400 
var link_height = 80; // default: 80 

$("#wizard-anchor li a, .btn.next, .btn.back").click(function() { 
    if($("#wizard-anchor li").length > 5) { 
     var ul_top = $("#wizard-anchor").offset().top; 
     var current_top = $(".wiz-anc-current").offset().top-ul_top; 
     var first_top = $("#wizard-anchor li:first").offset().top; 
     var last_top = $("#wizard-anchor li:last").offset().top; 
     if((current_top > ul_height/2-link_height/2 && last_top > ul_height) || (current_top < ul_height/2+link_height/2 && first_top < 0)) { 
      $("#wizard-anchor").animate({ 
       "margin-top": 160-current_top 
      }, 700); 
     } 
    } 
}); 

遺憾的是它不只是通過點擊按鈕的工作,當你點擊一個步驟完成後在左側欄中,奇怪的事情發生。

+0

+1對我來說夠好。非常棒!!我會看看我能否修復它。非常感謝 :) – Legend 2010-10-31 23:03:28