使用JQuery UI滑塊進行網站導航 - 滑塊動作奇怪？

我打算製作一個小型的個人投資組合網站。我想爲它嘗試一種不同類型的導航 - 考慮到觸摸設備，使用JQuery UI滑塊而不是通常的基於按鈕的菜單似乎是一個好主意。使用JQuery UI滑塊進行網站導航 - 滑塊動作奇怪？

但是，我卡住得很快。這是我到目前爲止，基於在codrops和hongkiat發現的教程：http://www.insertdisk2.de/stackoverflow/index.html

編輯：由於最大，我得到了「錨跳」覆蓋。使用滑塊我現在可以觸發CSS轉換並導航頁面。非常感謝！

雖然滑塊仍然很奇怪 - 我計劃擁有4或5個「狀態」，但它似乎錯誤地計算了導致觸發太早或太晚的值/位置。

$（函數（）{

 //Store frequently elements in variables 
     var slider = $('#slider'), 
      tooltip = $('.tooltip'); 

     //Hide the Tooltip at first 
     tooltip.hide(); 

     //Call the Slider 
     slider.slider({ 
      //Config 
range: "min", 
step: 50, 
value: 0, 

      start: function(event,ui) { 
       tooltip.fadeIn('fast'); 
      }, 

      //Slider Event 
      slide: function(event, ui) { //When the slider is sliding 

       var value = slider.slider('value'), 
        volume = $('.test'); 

       tooltip.css('right', value).text(ui.value); //Adjust the tooltip accordingly 

       if(value <= 5) { 
        volume.css('background-color', '#000'); 
        window.location.hash = 'home'; 
       } 
       else if (value == 50) { 
        window.location.hash = 'portfolio'; 

       } 
       else { 
        window.location.hash = 'contact'; 
       }; 

      }, 

      stop: function(event,ui) { 
       tooltip.fadeOut('fast'); 
      }, 
     }); 

    }); 
</script>

我想這是任何範圍/值/步驟或者我寫的條件滑塊行爲如此「糊塗」的方式。

來源

2013-01-13 Aulbath

如果您想要滑塊複製導航按鈕的功能，您應該考慮按鈕的作用：它們會更改位置，或者更準確地說，在#之後改變片段。當您想要更改按鈕時，您已經接近解決方案了URL。

在slide事件處理程序，把

window.location.hash = 'home';

，這將改變片段標識符到家庭，並有相同的結果點擊Home - 按鈕。

來源

2013-01-13 19:07:36 mxgr

非常感謝Max，它現在確實跳到了主播，引發了所有的轉換。現在我必須弄清楚實際的滑塊有什麼問題 - 因爲它會以奇怪的方式觸發跳轉到錨點。 – Aulbath

使用JQuery UI滑塊進行網站導航 - 滑塊動作奇怪？

回答

相關問題