jQuery Snippets #2

読み込み時（load）・リサイズ時（resize）・スクロール時（scroll）の処理をまとめる

読み込み時とリサイズ時に同じ処理を行いたいときには下記のように記述することでまとめることができます。

$(window).on('load resize', function() {
  // code here ...
});

また、上記に加えてスクロール時も加えたい場合は下記のように記述します。

$(window).on('load resize scroll', function() {
  // code here ...
});

ウィンドウリサイズで操作後のみ実行する

ウィンドウサイズが変更された際に何か処理を行いたい場合、特に何も考慮しない場合は下記のように記述になると思います。

$(window).on('resize', function() {
  console.log('resized!');
});

ただ、上記方法だとウィンドウサイズが変更されている間ずっと処理が実行されることになります。
それを回避したい場合は下記のようにsetTimeout()を使用した形で記述することで、ウィンドウのリサイズ後のみ処理を実行するようにできます。

var resizeTimer;
$(window).on('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    console.log('resized!');
  }, 200);
});

ゼブラストライプ

表やリストなどで見やすくしたりデザインするために取り入れることがあるゼブラストライプを実装する方法です。
最近だと:nth-childとか使えばCSSだけで実装できますが、jQueryで実装したい場合は下記のように実装できます。

サンプルではtable要素で、trの背景色にゼブラストライプを実装する場合のものになります。

$('tr:odd').css('background-color', '#ddd');

もしくは、下記のようにclassを追加して、CSSはスタイルシートを使って指定する方法があります。

$('tr:odd').addClass('odd');

上記はいずれも奇数番目のものが対象となっており、偶数番目にしたい場合は:evenを使用します。

数秒後に〇〇する

数秒後にクラスを付加するとか数秒後にフェードインするのような動きを実装する方法です。
下記サンプルは「3秒後に要素に.fooというクラスを付加」するものになります。

$('element').delay(3000).queue(function() {
  $(this).addClass('foo').dequeue();
});

もしくは下記のようにsetTimeout()を利用する形でも実装できます。

setTimeout(function() {
  $('element').addClass('foo');
}, 3000);

外部リンクにtarget="_blank"を付加する

$('a[href^=http]').attr('target', '_blank');

上記はリンク先がhttpから始まる場合にtarget="_blank"を付加するというものになりますが、更に.addClass()を併用したりすれば外部リンクだとわかりやすいアイコンを付けたりもできると思います。

もし、何かしらの理由で同じサイト内のリンクで別窓にしたくないのに絶対パスで記述しないといけない場合は、下記の記述で同ドメインのサイトは対象外にすることができます。

$('a[href^=http]').not('[href*="'+location.hostname+'"]').attr('target', '_blank');

リンク先によって異なるclassを付加する

例えばリンク先がPDFとわかりやすいようにテキストリンク横にPDFアイコンを表示させたいというときに、下記のようなjQueryでリンク先がPDFになっているa要素に任意のclassを付加することができます。 あとはそのclassを用いてCSSを調整することでアイコンを表示させることができます。

$('a[href$=pdf]').addClass('pdf');

上記サンプルはPDFでしたが、その他エクセル（.xls, .xlsx）や圧縮ファイル（.zip）などでも同様に記述することで任意のクラスを付加できます。

また、リンク先URLを指定して任意のクラスを付加することもでき、下記サンプルでは「リンク先にhttps://www.google.co.jp/が含まれている場合は.Googleというclassを付加する」というものになります。

$('a[href^="https://www.google.co.jp/"]').addClass('google');

もう少しだけ詳しく説明していたり、これをCSSのみで行う方法を以前紹介しているので、興味ある方はご覧になってみてください。

要素を順番にフェードインさせる

下記サンプルはli要素を上から順番にフェードインさせるものになります。

$('ul li').hide();
$('ul li').each(function(i) {
  $(this).delay(200 * i).fadeIn(500);
});

要素の高さを一番高いものに合わせる

下記サンプルは複数あるdiv要素の中で、一番高さがあるものに合わせる記述となります。

var maxHeight = 0;
$('div').each(function() {
  if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
});
$('div').height(maxHeight);

上で高さを揃える実装方法を紹介はしましたが、このような動きは「jquery.heightLine.js」や「jquery.matchHeight.js」といったプラグインを使ったほうがレスポンシブにも対応していて非常に便利です。

フォーカスすると表示領域が伸びる入力フィールド

検索フォームなどでたまに見かける、フォーカスすると表示領域が伸びて、外れると元のサイズに縮んでいく入力フィールドを実装する方法です。

$("input[type='text']").on('focus', function() {
  $(this).animate({'width': '300px'}, 300);
}).on('blur', function() {
  $(this).animate({'width': '200px'}, 300);
});

確認ダイアログを表示する

入力フォームなどのページで見かけることがある、ページの移動や更新をしようとした際にダイアログを表示させる方法です。
実際に使用する際は、例えばフォームなら内容が入力されていないときに表示というように条件付きで実装するのが良いと思います。

$(window).on('beforeunload', function() {
  return 'ここに表示させたい文章をいれる';
});