10のjQueryスニペット

JavaScript

Webデザイナーが知っておくべき10のjQueryスニペット

すべてのWebデザイナーが知っておくべき10のjQueryスニペットがとても役立ちそうな感じがしたのでご紹介します。どれも簡単なコードで非常に実用的なことが書かれているのでjQueryを扱っている方は一度目を通しておくとよさそうですね。

[ads_center]

実用的で役立つコード集

10のjQueryスニペット

10 jQuery snippets every designer should know | Webdesigner Depot

以下は個人的にいいなーと思ったものです。

トップへ戻るボタン

色んなサイトでよく見かける機能ですね。文章の先頭にスクロールしながら戻ってくれます。

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tag
<a class="top" href="#">Back to top</a>

画像の読み込みが失敗した時の置き換え

リンク切れなどといった画像が上手く読み込めない時に替わりの画像に置き換えてあげる処理。

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

divの高さを同じに揃える

これは覚えておきたいところ。

$('.div').css('min-height', $('.main-div').height());

こんな感じで役立つTipsがたくさんあります。これらの他にも、

  • 画像の読み込みをチェック
  • ホバー時にCSSを切り替え
  • 送信ボタンを無効
  • リンクの読み込みを停止
  • クリック時にフェード or スライド
  • シンプルなアコーディング
  • リストをストライプ模様

といったものがあるので興味がある人は一度チェックしてみてはいかがでしょうか。

関連記事

  1. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  2. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  3. jQuery Hero Slider Plugin
  4. jquery.horizonScroll.js
  5. pixelate.js
  6. jQuery TextFill

    JavaScript

    テキストをリサイズしてコンテナにフィットさせる「jQuery TextFill」

    jQuery TextFillはテキストをリサイズしてコンテナにフィッ…

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP