響應式按鈕腳本和數據切換

我正在使用Bootstrap，我想要做的是用按鈕打開一個日期選擇器。但是，我想在屏幕超過992px時正常彈出日期選擇器，但如果屏幕大小低於992px，請在模式彈出窗口中打開日期選擇器。響應式按鈕腳本和數據切換

<div class="open-button" data-toggle="modal" data-target="#datepickerModal">

使用的屏幕尺寸瀏覽器打開了最初使按鈕行爲「棒」上面的代碼。如果我在一個大於992px的窗口中打開它，它會彈出，但如果我將窗口縮小到992px以下，模式打開將不起作用。如果我在992px下打開窗口，那麼如果我擴大窗口大小，模式將工作，但不彈出窗口。

我認爲解決方案可能是通過腳本根據窗口寬度切換類（以便按鈕不共享函數），但不知道如何使用數據切換屬性來實現。

感謝您的任何幫助。

來源

2015-10-05 Ron Chan

您可以使用jQuery的調整觸發如果您需要捕獲的窗口大小調整：

$(window).resize(function() { 
    if($(window).width() >= 992){ 
     $(".open-button").data("toggle","modal"); 
    }else{ 
     $(".open-button").data("toggle","nonmodal"); 
});

如果modal請檢查和非模態被設定好，因爲我不可能搞清楚，當你想有模式或不

來源

2015-10-05 16:03:06 monxas

謝謝。但我想我是這樣想出來的：

var boxW = $(window).innerWidth(); // FIND THE BROWSER WINDOW WIDTH 
    if(boxW > 992){ 
     $('#arrive-button').removeAttr('data-toggle'); 
     $('#arrive-button').removeAttr('data-target'); 
     $('#depart-button').removeAttr('data-toggle'); 
     $('#depart-button').removeAttr('data-target'); 
     $('#arrive-button').addClass('open-button'); 
     $('#depart-button').addClass('open-button'); 
    } else { // MOBILE 
     $('#arrive-button').attr('data-toggle', 'modal'); 
     $('#arrive-button').attr('data-target', '#datepickerModal'); 
     $('#depart-button').attr('data-toggle', 'modal'); 
     $('#depart-button').attr('data-target', '#datepickerModal'); 
     $('#arrive-button').removeClass('open-button'); 
     $('#depart-button').removeClass('open-button'); 
    }

不知道數據目標是否過度殺傷。不知道有關'數據切換'是屬性。咄。

來源

2015-10-05 16:47:19

響應式按鈕腳本和數據切換

回答

相關問題