在不刷新頁面的情況下更改內容大小？

Question

我使用了ShieldUI的「標籤」，並且有一個標籤位置的屬性。當屏幕寬度> = 768px時，我想要在「左側」顯示選項卡，而在< = 768px時將它們顯示在「頂部」。我來到這裏：

var $window = $(window); 
var $pane = $('#tabsDiv'); 

function checkWidth() { 
    var windowsize = $window.width(); 
    if (windowsize < 768) { 
     $pane.shieldTabs({ 
      position: "top" 
     }); 
    } else { 
     $pane.shieldTabs({ 
      position: "left" 
     }); 
    } 
} 

checkWidth(); 

$(window).resize(checkWidth); 

但是，當我全寬，我走「移動」我需要刷新頁面來獲得我想要的東西，是有辦法做到這一點不刷新頁面？

Answer 1

我們對您的代碼有一些問題，以及Shield UI限制。讓我們來看看其中一些：

所有的

• 首先，我已經在official docs檢查，該框架並支持組件刷新，但只有for new options you'd like to add to your widgets。因此，當您嘗試更新選項卡的特定功能時（例如position），您的代碼將不起作用。這意味着最好有一個全局函數（在我們的例子中爲initTabs）來銷燬和重新創建整個標籤結構;第二，一旦你這麼做了，不要在這個全局新的內部聲明調整大小的函數，以便驅逐遞歸性問題;
• 創建一個全局變量來存儲標籤位置的狀態也是一個好主意，因爲我們現在有了局部/全局函數來處理。

退房的最後工作代碼：https://jsfiddle.net/ro0a5bhv/4/

注：見，我不得不做關於CSS屬性min-height，這是由框架切換標籤視圖時，總是設置一個解決方法。