[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
Post on:2015年10月23日
sponsors
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。
Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。
jQuery Tips Everyone Should Know -GitHub
イラスト: Girls Design Materials
コードはMITライセンスで、個人でも商用でも無料で利用できます。
- ページの上に戻るボタン
- 画像のプリロード
- 画像がロードされているかチェック
- リンク切れの画像を自動修復
- ホバーのトグル
- 入力欄を使用できなくする
- aタグのクリックイベントだけを利用する
- アニメーションを簡単に設定する
- シンプルなアコーディオン
- 異なる高さのdiv要素を揃える
- 外部リンクを新しいタブ・ウインドウで開く
- テキストが無い要素は非表示にする
ページの上に戻るボタン
クリックするとページの最上部にスムーズにスクロールして戻るボタンをjQueryの「animate」と「scrollTop」メソッドを使ってシンプルに実装します。
JavaScript
|
1 2 3 4 5 |
// Back to top $('a.top').click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 800); }); |
スピードを調整したい時は、scrollTopの値（800）を変更します。
HTML
|
1 2 |
<!-- Create an anchor tag --> <a class="top" href="#">Back to top</a> |
画像のプリロード
ページ上に最初は表示されない画像（ホバーして見えるとか）が多い時は、画像をプリロードさせておくとよいです。
JavaScript
|
1 2 3 4 5 6 7 |
$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('img').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png'); |
画像がロードされているかチェック
スクリプトを実行する時に、画像が完全にロードされているか調べる必要があるかもしれません。
JavaScript
|
1 2 3 |
$('img').load(function () { console.log('image load successful'); }); |
imgタグは、idやclassに変更して利用することもできます。
リンク切れの画像を自動修復
リンク切れの画像を一つずつ修正するのは大変な作業です。とり急ぎの対応として下記のコードを使うことで、代替画像を表示させることができます。
JavaScript
|
1 2 3 |
$('img').on('error', function () { $(this).prop('src', 'img/broken.png'); }); |
リンク切れがない場合には何も影響がなく、通常の画像が表示されます。
ホバーのトグル
クリック可能な要素をホバーした際に、要素のビジュアルを変えることはよい方法です。下記のコードはホバーした際にその要素にclass（.hover）を加え、ホバーがはずれた際にclassを取り去ります。
JavaScript
|
1 2 3 4 5 |
$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }); |
さらに簡単な方法が必要なら、toggleClassを使うとよいでしょう。
|
1 2 3 |
$('.btn').hover(function () { $(this).toggleClass('hover'); }); |
入力欄を使用できなくする
フォームの入力欄や送信ボタンを一時的に使用できなくさせる必要があるかもしれません。例えば「説明を読んだ」をチェックしないと送信できないなど。そんな時は下記のコードで実現できます。
JavaScript
|
1 |
$('input[type="submit"]').prop('disabled', true); |
フォームの入力欄や送信ボタンを使用できるようにするには、下記のコードを使用します。
|
1 |
$('input[type="submit"]').prop('disabled', false); |
aタグのクリックイベントだけを利用する
aタグは通常クリックするとリンクしますが、リンク機能を無効化し、クリックイベントだけを利用するこもできます。
JavaScript
|
1 2 3 |
$('a.no-link').click(function (e) { e.preventDefault(); }); |
クリックイベントだけに利用するa要素には、「.no-link」を加えます。
アニメーションを簡単に設定する
フェードやスライドなど、アニメーションが簡単に利用できるのもjQueryの便利なとこです。下記のコードはユーザーがその要素をクリックすると、フェードやスライドのアニメーションを実行します。
JavaScript
|
1 2 3 4 5 6 7 8 |
// Fade $('.btn').click(function () { $('.element').fadeToggle('slow'); }); // Slide $('.btn').click(function () { $('.element').slideToggle('slow'); }); |
シンプルなアコーディオン
アコーディオンも数行のコードで簡単に実装できます。
JavaScript
|
1 2 3 4 5 6 7 8 9 |
// Close all panels $('#accordion').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; }); |
異なる高さのdiv要素を揃える
div要素内のコンテンツの量が異なっていても、高さを揃えます。
JavaScript
|
1 2 3 4 5 6 7 8 |
var $columns = $('.column'); var height = 0; $columns.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $columns.height(height); |
このコードは一番高い要素に高さを揃えます。
外部リンクを新しいタブ・ウインドウで開く
外部サイトへのリンクは新しいタブ・ウインドウで開き、自サイトへのリンクは同一タブ・ウインドウで開きます。
JavaScript
|
1 2 3 |
$('a[href^="http"]').attr('target','_blank'); $('a[href^="//"]').attr('target','_blank'); $('a[href^="'+window.location.origin+'"]').attr('target','_self'); |
テキストが無い要素は非表示にする
jQueryの「contains()セレクタ」を使い、要素の内容に含まれているテキストを見つけることができます。もしテキストが無いのであれば、その要素を非表示にします。
JavaScript
|
1 2 |
var search = $('#search').val(); $('div:not(:contains("'+search+'"))').hide(); |
sponsors
