すべてのWebデザイナーが知っておくべき10のjQueryスニペットがとても役立ちそうな感じがしたのでご紹介します。どれも簡単なコードで非常に実用的なことが書かれているのでjQueryを扱っている方は一度目を通しておくとよさそうですね。
[ads_center]
実用的で役立つコード集
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 スライド
- シンプルなアコーディング
- リストをストライプ模様
といったものがあるので興味がある人は一度チェックしてみてはいかがでしょうか。
