2016-06-21 14 views
-1

ブートストラップには、縦と横のクラスを持ち、画面の解像度に対して操作されるデフォルトのナビゲーションモジュールがあります(モバイルと小型の画面サイズでコンパクト/垂直になります)。ブートストラップnavbarは水平から垂直に、またはその逆も可能です。イベントトリガー

これをチェックするLink。画面を小さなサイズに変更する

これが発生したときに通知を受けたいと思います。言い換えれば、このイベントハンドラが必要なので、コードではいつ起きたのか分かります。そこには定義済みのイベント処理ルーチンがありますか、それともカスタムコードがありますか? ただ、この事のアップを追加: のjQueryやJavaScriptの両方が

編集罰金です。私は包括的な解決策を探していますが、デフォルトの幅の値が使用されていない場合でも(width:767px)

+0

コード(HTML/CSS/JS)の**動作例**を[Snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css)に投稿してください-and-html-code-snippets /)。 [mcve]と[ask]を参照してください。 – vanburen

答えて

2

あなたは、ウィンドウの幅プロパティ

$(window).resize(function() { 
    if($(window).width() < 768){ 
    //do something 
    } 
}); 

767pxで見ることができます。これは、実際に興味深い質問ですモバイル

+0

ええ、私はそれを考えました。しかし、これは、ブートストラップのデフォルトの幅を指定しているのを見ると分かります。私は幅の大きさがどんなものであれ、包括的な解決策を求めています。イベントがトリガーされます。ありがとう@ –

2

のためのブートストラップの最大幅です。ブートストラップのナビゲーションバーへのスタイルの変更はCSSで行われるため、選択肢はかなり制限されています(jQueryやJS関数のスタイルを強制的に変更するのではなく)。

理論的にはリスナーをスタイル属性の変更「スタイル」属性に変異オブザーバを使用してのサポートは、これらの日はかなり良いです。あなたの場合CanIuse Mutation Observers

SOMEDOMITEM.addEventListener('DOMAttrModified', function(e){ 
    if (e.attrName == 'style') { 
    //check how the style has changed and respond appropriately 
    } 

しかし、最も簡単な方法は、ナビゲーションバーのトリガれるブートストラップブレークポイントの横幅を確認することであること(依存しますこれをオーバーライドして768pxでトリガします)、ブレークポイントに応答するJS APIを使用します。Like Enquire JS

enquire.register("screen and (max-width: 767px)", { 
    match : function() { 
      //Do something 
    }, 
    unmatch : function() { 
      //undo something 
    } 
}); 

ブラウザの幅の変更を聞くのとは逆の利点があります。登録されたブレークポイントは、CSSと同じ形式です。

+0

どちらのアプローチも理にかなっています。しかし、私は2番目のケースでは私が実装しているときに幅を知っている必要がありますと仮定しています。特定のものにします。一方で、最初のアプローチでは、実行時に幅を取得してから、ケースをチェックする必要があります。それも具体的ではないでしょうか?私が間違っているなら、私を修正してください。両方のツールをありがとう、私はこれらの存在を知らなかった@フランク –

関連する問題