在Bootstrap Tour中臨時禁用'Next'按鈕

我使用Bootstrap Tour來建立一個相當嚴格的巡視，用戶在當前步驟花費3秒後才能進入下一步。在Bootstrap Tour中臨時禁用'Next'按鈕

爲了做到這一點，我給「下一步」按鈕，一個id nextBtn在遊覽模板，並希望我可以啓用/禁用它是這樣的：

var tour = new Tour ({ 
    name: "my-tour", 
    template: "...", 
    onNext: function(tour) { 
     $("#nextBtn").prop("disabled", true); 
    }), 
    onShow: function(tour) { 
     window.setTimeout(next, 3000); 
    }); 

function next() { 
    $("#nextBtn").prop("disabled", false); 
}

然而，這是不工作。這裏應該採取什麼正確的方法？

來源

2013-09-24 MLister

錯字'$（「＃nextBtn）'改變'$（」＃nextBtn「）'你忘了關引號 –

@TusharGupta， – MLister

「不工作」是什麼意思？該按鈕沒有被禁用嗎？它沒有被重新啓用嗎？它是否不顯示您期待的跳舞的hippopoatamus gif？ – Becuzz

有一些錯別字，但主要的問題是，你必須使用正確的選擇器來訪問「下一步」按鈕，它不是#nextBtn，但它是一個類嵌套$(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]")。

在onShow和onNext事件的酥料餅不accessibile因爲自舉破壞並重新創建它，正確的事件是onShown：

函數來示出各個步驟之後執行權。

代碼：

var timer; 
var tour = new Tour({ 
    onShown: function (tour) { 
     $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").prop("disabled", true); 
     timer=window.setTimeout(next, 3000); 
    } 
}) 

function next() {  
    $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").prop("disabled", false); 
    window.clearTimeout(timer); 
} 

tour.addStep({ 
    element: "#one", 
    title: "Step 1", 
    content: "Content for step 1" 
}) 

tour.addStep({ 
    element: "#two", 
    title: "Step 2", 
    content: "Content for step 2" 
}) 

tour.addStep({ 
    element: "#three", 
    title: "Step 3", 
    content: "Content for step 3" 
}) 

tour.start()

演示：http://jsfiddle.net/IrvinDominin/3YY7Y/

來源

2013-09-24 16:21:00

問題不在於t他的ID選擇，因爲我明確設置了模板中'下一步'按鈕的ID。檢查每個步驟生成的html清楚地顯示'next'按鈕具有所需的id。問題在於，出於某種原因，在調用'onShown'回調和準備選擇'next'按鈕之間存在延遲。所以如果我做了這樣的事情：'window.setTimeout（disableNext，200）;''onShown''內部（'disableNext'內部，我們做'$（「＃btn_id」）。prop（「disabled」，true）;' ），它將禁用按鈕（延遲0.2秒後）。我不確定這是否是bootstrap-tour中的錯誤。 – MLister

您不會發布templare，所以我使用了默認值;對於這個事件你必須使用onShown在答案中詳細說明。 –

在Bootstrap Tour中臨時禁用'Next'按鈕

回答

相關問題