【jQuery】デザイナーなら知っておくと便利なスニペット

フロント開発もやっちゃうデザイナーなら知っておくと便利なjQueryスニペットをご紹介します。
私もよく使うものが入ります。
参考記事はこちら。
10 jQuery snippets every designer should know

1.トップに戻る

javascript

// トップに戻る
$('a.top').click(function(){
    $(document.body).animate({scrollTop : 0},800);
    return false;
});
//html側
<a class=”top” href=”#”>Back to top</a>

こちらはよく使いますね！
.animate({scrollTop : 0},800)の数字部分を調整して、スピードを変えます。

2.画像のロードをチェック

javascript

$(‘img’).load(function() {
    //なんか処理
    console.log(‘ロードされたよ！’);
});

これもよく使います。

3.壊れた画像の処理

javascript

$('img').error(function(){
    $(this).attr('src', ‘img/broken.png’);
});

Wordpress等であれば、壊れた画像リンクチェックをしてくれるようなプラグインもありますが、
そうもいかない環境ならば、このスニペットが役立ちます。
エラーが起きた場合のNO IMAGE画像を用意してあげると、スマートですね。

4.hoverで切り替える

javascript

$(‘.btn').hover(function(){
    //hoverすると、.btnへclass付与
    $(this).addClass(‘hover’);
    }, function(){
    //外すとclassを削除
    $(this).removeClass(‘hover’);
    }
);

元記事だと、.hoverで書いてます。
私はjQuery1.7以降を使いますので、むしろ.onを使うこっちの書き方をする事の方が多いです。

javascript

$('.btn').on({
    'mouseenter':function(){
        $(this).addClass(‘hover’);
    },
    'mouseleave':function(){
    $(this).removeClass(‘hover’);
    }
});

5.inputを無効にする

javascript

$('input[type="submit"]').attr("disabled", true);

例えば、入力フォームの送信前にsubmitボタンを無効にしておきたい場合などのスニペットです。
有効に戻す場合には、以下を設定します。

javascript

$('input[type="submit"]').removeAttr("disabled”);

6.リンククリック時の動作をキャンセル

javascript

$(‘a.no-link').click(function(e){
    e.preventDefault();
});

あんまり良い例ではないですが…
例えばリンクタグを、何かのイベントトリガーにしたい（どこかのCSSを書き換える、何かDOMを追加する）などといった場合、
リンクのデフォルト挙動をOFFにしたい時があります。
そんな時に使えるスニペットです。
個人的には、イベントトリガーにはリンクタグはあまり使いません。

7.クリックすると消える/現れる

javascript

// フェードイン、フェードアウトする
$( “.btn" ).click(function() {
    $( “.element" ).fadeToggle("slow");
});
// スライドで消える、現れる
$( “.btn" ).click(function() {
    $( “.element" ).slideToggle("slow");
});

これもUIの処理等でよく使いますね。
覚えておいて損はないスニペットです。

8.シンプルなアコーディオンメニュー

javascript

// 最初にメニューは閉じておく
$('#accordion').find(‘.content').hide();
// アコーディオン部分
$('#accordion').find(‘.accordion-header').click(function(){
    var next = $(this).next();
    next.slideToggle('fast’);
    $(‘.content’).not(next).slideUp('fast’);
    return false;
});

これも書くことが多いものだと思います。

9.2つのブロックの高さを合わせる

javascript

//divをmain-divの高さに合わせます
$(‘.div').css('min-height', $(‘.main-div').height());

昔、こんな記事も書きました。
【FloatしたDivの高さをあわせるスクリプト】
上記は、飽くまでカラムが隣り合っている場合です。
このスニペットの方は、例えば下記のようなhtmlで、main-divよりdivの高さが小さくなってしまったような場合に使用します。
あ、当然ですが.divとかアホなclassは使わないでください…。

html

<div class="main-div">
    <div class="div">ここのカラムが中身が短いよ</div>
    <div class="div">こっちのカラムは中身が長いよ</div>
</div>

10.いつでも縞々の色分けにする

javascript

//一行だけです
$('li:odd').css('background', '#E8E8E8’);

CSSで書けばいいじゃない！
でも、CSSだけで対応しきれない時がありますね。
例えばリストをjQueryを使ってデータ順に並べ替えたりした時がそうです。
処理のついでに書いてあげれば良いと思います。