2014-02-12 82 views
2

我正在使用我正在開發的jQuery Mobile站點中的external toolbar。我初始化它像這樣:如何在頁面轉換期間禁用工具欄按鈕?

$(document).ready(function() { 
    $("[data-role='header'], [data-role='footer']").toolbar(); 
}); 

我有一對夫婦在工具欄上的按鈕,並想在頁面過渡禁用它們,這樣用戶就不能按他們多次,這似乎得到了一個框架,一個奇怪的狀態。我第一次嘗試一直監聽pagebeforeshowpageshow事件以編程方式禁用和啓用按鈕:

$(function() { 
    $("[data-role='header'], [data-role='footer']").toolbar({ 
     create: function (event, ui) { 
      $(document).on('pagebeforeshow', function() { 
       $('#page-header .ui-btn').button('disable'); 
      }); 

      $(document).on('pageshow', function() { 
       $('#page-header .ui-btn').button('enable'); 
      }); 
     } 
    }); 
}); 

我有嵌套在這樣的代碼,因爲我不想,直到工具欄上有註冊的處理程序已初始化。不過,我運行到一個單獨的問題:

Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'disable'

由於我沒有明確初始化按鈕我自己,我不知道我知道如何/在那裏我可以等待它們被初始化。

有沒有更好的方法來解決這個問題,有沒有人有任何建議,讓這個工作?

回答

2

使用.button()input鍵入按鈕,重置並提交。對於錨點或按鈕標記,您需要添加/刪除ui-state-disabled類。

$(document).on("pagecontainerbeforehide", function() { 
    $('#page-header .ui-btn').addClass('ui-state-disabled'); 
}); 

$(document).on("pagecontainershow", function() { 
    $('#page-header .ui-btn').removeClass('ui-state-disabled'); 
}); 

Demo

+0

謝謝,這個工作!但是我無法使用'pagecontainerbeforehide'或'pagecontainershow',並且沒有看到它們在[API](http://api.jquerymobile.com/category/events/)中列出。 – Brian

+1

@Brian他們是新的,沒有宣佈,但他們應該工作,只要你使用jQM 1.4。檢查這個[demo]的控制檯(http://jsfiddle.net/Palestinian/syPw4/1/)。 – Omar