【jQuery】resizeメゾットのイベントについて確認してみる

jQueryでレスポンシブ対応が可能になるresizeメゾットを見てみます。

resizeメゾットとは?
正方形を作ってみる
レスポンシブデザインにする

resizeメゾットとは?

まずはresizeメゾットの文法について見てみます。

$(window).resize(function(){処理内容});

resizeメゾットはブラウザの高さや幅が変更される事を検知して、処理内容を実行します。

resizeメゾットはブラウザの状態を検知する特性上、セレクタは$(window)以外には効かないので注意しましょう。

正方形を作ってみる

実際に正方形を作る過程でresizeメゾットを使ってみます。正方形は縦横比が1:1である事から縦の指定が難しいです。widthとheightについての基本的な挙動についてはこちらをご覧ください

[HTML]

<div></div>

[CSS]

div {
  background:skyblue;
  margin:0 auto;
  width:100%;
  max-width:600px;
}

[JavaScript]

$(function(){
  $(window).resize(function(){
    var divwidth = $('div').width(); //divの幅の値を取得(変数divwidth)
    $('div').height(divwidth); //divの高さの値に変数divwidthを指定
  });
});

意味としてはこれでいいのですが、これだと最初に画面が開いた状態では反映されません。なので以下のようにしましょう。

$(function(){
  var divwidth = $('div').width();//画面開いた時の処理
  $('div').height(divwidth);画面開いた時のdiv幅を高さの値
  $(window).resize(function(){
    var divwidth = $('div').width(); //リサイズした時のdivの幅の値を取得(変数divwidth)
    $('div').height(divwidth); //リサイズ時のdivの高さの値に変数divwidthを指定
  });
});

リサイズはあくまでイベントなので、最初に書いたほうだとリサイズのイベントが発生しない限り反映されません。なので初期状態で1回divのサイズを取得しつつ、リサイズされた際にdivの値を再取得するという流れです。

サンプルはこちらでご確認ください。

レスポンシブデザインにする

HTML/CSSだけでも作れますが、コードが長くなってしまうのでjQueryでコードを書き換えて管理しやすくしてみます。サンプルはこちらから。

画面右下の画面TOPへ戻るボタンが414px以下なら『☝』、414pxより大きい場合は『TOPへ戻る』という風に書き換える事が可能です。

[JavaScript]


$(function(){
  var width = $(window).width();
  if(width <= 414){
    $('a').html('☝');
  }else {
    $('a').html('TOPへ戻る');
  }
  $(window).resize(function(){
    var width = $(window).width();
    if(width <= 414){
      $('a').html('☝');
    }else {
      $('a').html('TOPへ戻る');
    }
  });
});

まとめ

resize使うとCSSだけでは実装できない複雑な処理が出来るようになります。使い方をマスターしておきましょう。