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 スライド
  • シンプルなアコーディング
  • リストをストライプ模様

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

Naverシンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」前のページ

ドットナビゲーションスタイルの色んなパターンについて次のページドットナビゲーションスタイル

関連記事

  1. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  3. no-image

    JavaScript

    セクション間をスムーズにスクロールできる「Scroll Control」

    Scroll Controlはセクション間をスムーズにスクロールできる…

  4. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

  5. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

  6. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP