ページを更新せずにサイズを変更するとコンテンツが変更されますか？

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）を持つことが良いことを意味します。
• 第2に、いったんこれを行うと、再帰性の問題を取り除くために、このグローバルな新しい関数の内部にサイズ変更関数を宣言しないでください。
• グローバル変数を作成して、タブ位置の状態を保存することもお勧めします。これは、ローカル/グローバル関数が処理できるようになったためです。

チェックアウト最終作業コードを：https://jsfiddle.net/ro0a5bhv/4/

注：私はタブのビューを切り替える際に、常にフレームワークによって設定されたCSSプロパティmin-height、についての回避策をしなければならなかったことを参照してください。