少しのコードで実装可能な20のjQuery小技集
素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！
jQueryの基本的な使い方
まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます。
<script type="text/javascript" src="js/jquery.js"></script>
そしてJavaScriptのコードを書いていきます。<head> 内に書く場合はこんな感じです。
<script type="text/javascript">
$(function(){
// ここにコードを書いていく。
});
</script>
詳しい記述の仕方は「jquery [DokuWiki]」が参考になります。それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと合わせてみてみてください！
※IE6～8, Firefox, Safari, Chromeで動作確認済
jQuery小技集 目次
- マウスオーバーで画像を変更
- 外部リンクを別タブで開く
- ページトップへスクロールする
- Div全体をクリックできるようにする
- テーブルの偶数・奇数の行の色を変える
- リンク切れ画像を差し替える
- CSSハックを使わずブラウザーごとにCSSを変更
- 画像のプリローダー
- IE6以下ユーザーにメッセージを表示
- Divを消す
- フォーカスしているフォームのラベルにクラスをつける
- フォームにテキストを入れておき、フォーカスで消す（文字色も変更）
- 入力文字数をカウント
- ラジオボタンとチェックボックスを装飾する
- スライドパネル
- アコーディオン
- ツールチップ
- プリントダイアログを表示
- Twitter最新のTweetを表示
- 効果音を入れる
1. マウスオーバーで画像を変更
多くのサイトで使われている画像のマウスオーバー時の効果。CSSスプライトを使う事もできますが、画像を変える場合はこちらのコードがとっても便利！画像名の最後に、通常時の画像には「_off」を、マウスオーバー時の画像には「_on」を付けて保存するだけ！
jQuery
$(function(){
$('a img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
}
});
});
HTML
<a href="#">
<img src="images/btn_sample_off.jpg" width="196" height="47" />
</a>
» サンプルを見る
2. 外部リンクを別タブで開く
http:// で始まるリンク先に、自動的に target="_blank" を追加します。
jQuery
$(function(){
$("a[href^='http://']").attr("target","_blank");
});
HTML
<a href="http://google.com">Google検索</a>
» サンプルを見る
3. ページトップへスクロールする
今開いているページ上部へスルスルッとジャンプします。よく見かける小技ですね！このサンプルでは #wrapper のDivにジャンプするように設定しているので、コンテナーのIDもしくはクラスが違う場合はリンク先を変更してください。
jQuery
$(function(){
$("#toTop a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})
});
HTML
<p id="toTop"><a href="#wrapper">ページトップへ</a></p>
» サンプルを見る
4. Div全体をクリックできるようにする
Div全体をクリックし、Div内にあるリンク先へとびます。特にスマートフォン用Webサイトにはおすすめです！
jQuery
$(function(){
$(".sampleBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
HTML
<div class="sampleBox">
このDiv全体をクリックするとリンク先へジャンプします。
スマートフォン用サイトにも最適！！
このDiv全体をクリックするとリンク先へジャンプします。
スマートフォン用サイトにも最適！！
このDiv全体をクリックするとリンク先へジャンプします。
スマートフォン用サイトにも最適！！
<a href="http://webcreatorbox.com">Webクリエイターボックスへ</a>
</div>
CSS
.sampleBox{background: #ffc;padding:10px;cursor: pointer}
» サンプルを見る
5. テーブルの偶数・奇数の行の色を変える
長いテーブルの場合、どこの行を見ているかわかりにくくなるので、うっすらと背景に色をつけて読みやすくしましょう。
jQuery
$(function(){
$("tr:odd").addClass("odd");
});
HTML
<table>
<tr>
<td>こんな感じで</td>
<td>奇数の行に</td>
</tr>
<tr>
<td>色が</td>
<td>つきます。</td>
</tr>
<tr>
<td>こんな感じで</td>
<td>奇数の行に</td>
</tr>
<tr>
<td>色が</td>
<td>つきます。</td>
</tr>
</table>
CSS
table{background: #666}
tr{background: #fff}
td{padding: 5px}
.odd{background: #ddd }
» サンプルを見る
6. リンク切れ画像を差し替える
URLを間違えていたり画像が消えていたりしたときに別の画像を代わりに表示させます。
jQuery
$(function () {
$('img').error(function(){
$(this).attr({src:'images/missing.jpg',alt:'画像が見つかりません'});
});
});
HTML
<img src="sample.jpg" width="300" height="200" alt="サンプル画像" />
» サンプルを見る
7. CSSハックを使わずブラウザーごとにCSSを変更
ブラウザーを判別してCSSを変更します。変更するCSSが複数あるなら、ブラウザー毎にクラスを変えると楽ですね。
jQuery
$(function () {
// IE（IE7以上）
if ($.browser.msie && $.browser.version > 6 ) $(".browserBox").css("background", "#ff99cc" );
// IE（IE6以下）
if ($.browser.msie && $.browser.version <= 6 ) $(".browserBox").css("background", "#ffff99" );
// Firefox
if ($.browser.mozilla ) $(".browserBox").css("background", "#c8ffd0" );
// Safari
if( $.browser.webkit ) $(".browserBox").css("background", "#b1e1ff" );
});
HTML
<div class="browserBox">
<p>
背景色をブラウザー毎に変えています。IE7以上だとピンク、IE6以下だと黄色、
Firefoxだと緑、Safari, Chromeだと青。
</p>
</div>
» サンプルを見る
8. 画像のプリローダー
ページコンテンツを全て読み込んでから画像を順番に読み込んでいきます。読込中はローディングgif画像を表示し、ひとつひとつフワッと表示させていきます。ギャラリーサイトにおすすめ。
jQuery
$(function () {
$('.imgBox img').hide();//ページ上の画像を隠す
});
var i = 0;
var int=0;
$(window).bind("load", function() {//ページコンテンツのロードが完了後、機能させる
var int = setInterval("doThis(i)",500);//フェードするスピード
});
function doThis() {
var images = $('img').length;//画像の数を数える
if (i >= images) {// ループ
clearInterval(int);//最後の画像までいくとループ終了
}
$('img:hidden').eq(0).fadeIn(500);//一つずつ表示する
i++;
}
HTML
<div class="imgBox">
<img height="226" width="300" src="images/beach.jpg">
<img height="226" width="300" src="images/sunset.jpg">
</div>
CSS
.imgBox{background:url(images/loading.gif) 50% 50% no-repeat;}
» サンプルを見る
9. IE6以下ユーザーにメッセージを表示
IE6以下のブラウザーでみると、ページ上部にメッセージが表示されます。
jQuery
$(function () {
if ( $.browser.msie && $.browser.version <= 6 ) {
$('body').prepend('<div class="error">あなたは旧式ブラウザをご利用中です。このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</div>');
}
});
CSS
.error{background:#ff6699;padding: 20px;text-align:center;}
» サンプルを見る
10. Divを消す
指定したボタンをクリックすると、そのボタンのあるDiv全体が消えます。上記IE6ユーザーへのメッセージと合わせて使ってみるといいかも。
jQuery
$(function () {
$(".deleteBox .delete").click(function(){
$(this).parents(".deleteBox").animate({ opacity: "hide" }, "slow");
});
});
HTML
<div class="deleteBox">
<p>エラーメッセージ表示時に便利かもしれません。</p>
<p class="delete">[ 閉じる ]</p>
</div>
CSS
.deleteBox{border: #ccc 1px solid; padding: 10px}
.deleteBox .delete{cursor: pointer; color: #3cf; margin-top:10px;}
» サンプルを見る
11. フォーカスしているフォームのラベルにクラスをつける
フォーム入力時に、今どの項目を選択しているのかがわかりやすくなります。
jQuery
$(function () {
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
});
$("form :input").blur(function() {
$("label[for='" + this.id + "']").removeClass("labelfocus");
});
});
HTML
<form action="#">
<label for="name">お名前</label>
<input type="text" id="name" />
<label for="spanail">メールアドレス</label>
<input type="text" id="spanail" />
</form>
CSS
.labelfocus{color:#f39 }
» サンプルを見る
12. フォームにテキストを入れておき、フォーカスで消す（文字色も変更）
フォーカスしていない時は控えめな色、フォーカスしたらそこに入力していることがわかるように色を変えます。
jQuery
$(function(){
$(".focus").focus(function(){
if(this.value == "キーワードを入力"){
$(this).val("").css("color","#f39");
}
});
$(".focus").blur(function(){
if(this.value == ""){
$(this).val("キーワードを入力").css("color","#969696");
}
});
});
HTML
<input type="text" class="focus" value="キーワードを入力" />
CSS
.focus{color: #969696}
» サンプルを見る
13. 入力文字数をカウント
テキストエリア内の入力文字数を数えていき、指定した文字数になると数字の色を変えます。
jQuery
$(function () {
$("textarea").keyup(function(){
var counter = $(this).val().length;
$("#countUp").text(counter);
if(counter == 0){
$("#countUp").text("0");
}
if(counter >= 10){
$("#countUp").css("color","red");
} else{$("#countUp").css("color","#666");}
});
});
HTML
<textarea cols="30" rows="10"></textarea> <p id="countUp">0</p>
» サンプルを見る
14. ラジオボタンとチェックボックスを装飾する
過去記事「CSS3とjQueryでフォームを美しく装飾する方法」でも紹介した技です。チェックボックス、ラジオボタンの上に画像をかぶせて装飾しています。
jQuery
$(function(){ $(".checkbox").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}else{
$(this).next("label").removeClass("LabelSelected");
}
});
$(".radio").change(function(){
if($(this).is(":checked")){
$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
$(this).next("label").addClass("RadioSelected");
}
});
});
HTML
<!-- チェックボックス --><div>
<input id="CheckBox1" type="checkbox" class="checkbox"/>
<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Checkbox 1</label>
<input id="CheckBox2" type="checkbox" class="checkbox"/>
<label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">Checkbox 2</label>
</div>
<!-- ラジオボタン -->
<div>
<input id="Radio1" type="radio" class="radio" name="group1" >
<label id="Label1" for="Radio1" class="radiolabel">Radio 1</label>
<input id="Radio2" type="radio" class="radio" name="group1"/>
<label id="Label2" for="Radio2" class="radiolabel">Radio 2</label>
<input id="Radio3" type="radio" class="radio" name="group1"/>
<label id="Label3" for="Radio3" class="radiolabel">Radio 3</label>
</div>
CSS
.checkbox,.radio{ z-index: -1;
position: absolute;
}
.CheckBoxLabelClass{
background: #fff url("images/checkbox.png") no-repeat 2px 0;
margin-right:20px;
padding-left:22px;
}
.radiolabel{
background: #fff url("images/radio.png") no-repeat 2px 0;
margin-right:20px;
padding-left:22px;
}
.LabelSelected,.RadioSelected{
background-position: 2px bottom;
}
» サンプルを見る
15. スライドパネル
ボタンを押すと指定したコンテンツがスルスルッと現れます。ページが長くなった時に使うとスッキリ見えます。
jQuery
$(function(){
$(".open").click(function(){
$("#slideBox").slideToggle("slow");
});
});
HTML
<p class="open">ボタン</p>
<div id="slideBox">
もう一度ボタンをクリックすると閉じます。個人的に使う機会の多いスライドパネル。
ぜひお試しアレ。もう一度ボタンをクリックすると閉じます。個人的に使う機会の多いスライドパネル。
ぜひお試しアレ。
</div>
CSS
.open{
background: #fc6;
color: #fff;
cursor: pointer;
width:45px;
padding: 10px
}
#slideBox{
padding: 10px;
border: 1px #ccc solid;
display:none;
}
» サンプルを見る
16. アコーディオン
上記スライドパネルの同じような動きですね。メニュー・サブメニューなんかに使えそうです。
jQuery
$(function() {
$('#accordion dd').hide();
$('#accordion dt a').click(function(){
$('#accordion dd').slideUp();
$(this).parent().next().slideDown();
return false;
});
});
HTML
<dl id="accordion">
<dt><a href="">カテゴリー１</a></dt>
<dd><a href="#">サブカテゴリー１</a>｜<a href="#">サブカテゴリー２</a>｜<a href="#">サブカテゴリー３</a></dd>
<dt><a href="">カテゴリー２</a></dt>
<dd><a href="#">サブカテゴリー１</a>｜<a href="#">サブカテゴリー２</a>｜<a href="#">サブカテゴリー３</a></dd>
<dt><a href="">カテゴリー３</a></dt>
<dd><a href="#">サブカテゴリー１</a>｜<a href="#">サブカテゴリー２</a>｜<a href="#">サブカテゴリー３</a></dd>
<dt><a href="">カテゴリー４</a></dt>
<dd><a href="#">サブカテゴリー１</a>｜<a href="#">サブカテゴリー２</a>｜<a href="#">サブカテゴリー３</a></dd>
<dt><a href="">カテゴリー５</a></dt>
<dd><a href="#">サブカテゴリー１</a>｜<a href="#">サブカテゴリー２</a>｜<a href="#">サブカテゴリー３</a></dd>
</dl>
CSS
#accordion{
border: 1px #ccc solid;
border-top:none;
width:450px;
}
#accordion dt{
background: #ddd;
padding: 10px;
border-top: 1px #ccc solid;
}
#accordion dt a{color: #000; text-decoration:none;display:block;}
#accordion dd{padding: 10px}
» サンプルを見る
17. ツールチップ
シンプルなツールチップです。より使いやすいサイトにするためには必須機能かもしれませんね。
jQuery
$(function(){
$(".tooltip a").hover(function() {
$(this).next("span").animate({opacity: "show", top: "-75"}, "slow");}, function() {
$(this).next("span").animate({opacity: "hide", top: "-85"}, "fast");
});
});
HTML
<ul class="tooltip">
<li>
<a href="http://www.webcreatorbox.com">Webクリエイターボックス</a>
<span>Webクリエイターボックスホームへ戻ります。</span>
</li>
<li>
<a href="http://facebook.com/webcreatorbox.fb">Facebookファンページ</a>
<span>Facebookアカウントをお持ちの方はぜひ「いいね！」</span>
</li>
<li>
<a href="http://twitter.com/webcreatorbox">Twitter</a>
<span>Twitterで毎日Webに関する情報をお届けしています。</span>
</li>
</ul>
CSS
.tooltip {margin: 100px 0 0;list-style: none}
.tooltip li {
margin: 0 10px;
float: left;
position: relative;
text-align:center;
}
.tooltip a {
padding: 14px 10px;
display: block;
text-decoration: none;
font-weight: bold;
width:200px;
}
.tooltip li span {
background: #ffc;
border: 1px solid #fc6;
height: 45px;
position: absolute;
top: -85px;
left: 0;
text-align: center;
padding: 20px 12px 10px;
z-index: 2;
display: none;
}
» サンプルを見る
18. プリントダイアログを表示
.print というクラスがついたリンクをクリックするとプリントダイアログがポップアップするようになります。
jQuery
$(function(){
$('a.print').click(function(){
window.print();
return false;
});
});
HTML
<p><a href="#" class="print">このページを印刷する</a></p>
» サンプルを見る
19. Twitter最新のTweetを表示
Twitterの最も新しいつぶやきを表示させます。下記コードの webcreatorbox の部分を自分のTwitterアカウント名に変更してください。
jQuery
$.getJSON("http://twitter.com/statuses/user_timeline/webcreatorbox.json?callback=?", function(data) {
$("#twitter").html(data[0].text);
});
HTML
<p id="twitter"></p>
追記：リンクを生成する
Tweet内にURLがあった場合、自動でリンクを生成するには、上記 $("#twitter").html(data[0].text); を以下に変更します。
$.getJSON("http://twitter.com/statuses/user_timeline/webcreatorbox.json?callback=?", function(data) {
jQuery("#twitter").append($('<p>').html(data[i].text.replace(/(http://[^s]+)b/g, '<a href="$1">$1</a>')));
});
» サンプルを見る
20. 効果音を入れる
リンクをクリック・マウスオーバーした時に効果音を鳴らします。あまり使わないかもしれませんが、以前依頼があったのでメモ。効果音は短いものを選ばないと、効果音が鳴る前にリンク先にとんでしまいます。
jQuery
$(function(){
// クリック
$('a.click').click(function(){
$('embed').remove();
$('body').append('<embed src="click.wav" autostart="true" hidden="true" loop="false">');
});
});
$(function(){
// マウスオーバー
$('a.hover').mouseover(function(){
$('embed').remove();
$('body').append('<embed src="hover.wav" autostart="true" hidden="true" loop="false">');
});
});
HTML
<p><a href="#" class="click">クリックすると効果音がなります</a></p> <p><a href="#" class="hover">マウスオーバーすると効果音がなります</a></p>
» サンプルを見る
プラグインを使わなくても意外といろんな事ができちゃいますね！上記はすべて基本的なコードなので、いろいろカスタマイズしてみてください！
参考サイト：
Pingback: 20110121 | 昼ネタ
Pingback: [jQuery]少しのコードで実装可能な20のjQuery小技集が紹介されています。 | isTKS
Pingback: another side of view » Blog Archive » 少しのコードで実装可能な20のjQuery小技集
Pingback: 1月24日のおすすめ記事
Pingback: テキストサイトが輝いていたあの時… | ニュース99
Pingback: ピクサーの「脚本の書き方講座」が… | ニュース99
Pingback: freewebdev.jp
Pingback: jQueryで簡単に使えるTips | WebTipsBox
Pingback: 明日のために生きたふり
Pingback: 2011年1月にツイートしたお勧め記事など319ツイート（多すぎてすみません） | stid blog
Pingback: Weekly Digest for February 4th | BiscuitJam Blog
Pingback: links for 2011-02-12 « Webデザインのリンク集 Webデザインポータルサイト S5-Style
Pingback: jQuery小技集 from webクリエイターボックス — underconstruction
Pingback: 改めてjQueryを勉強してみる① | M
Pingback: jQueryのページ内スクロールがうまく行かない時の意外な落とし穴 | ウェビメモ
Pingback: スクロールしてもついてくる！ブログにソーシャルボックスをつけよう。 | ウェビメモ
Pingback: ボタン画像のロールオーバーのサンプル | 記録用手帳
Pingback: jQuery サンプルメモ | Bamboo lath 日々の記録
Pingback: What’s jQuery ?? | Web漬
Pingback: jQuery 01-01: jQueryの取得と参考サイト | Design Drill Diary
Pingback: Meet Again. » Blog Archive » ページトップへ。
Pingback: 仕事以外に色々試せるブログ作ると知識とノウハウ身に付くのが速い — ウェブディレクターの仕事術
Pingback: 横浜市都筑区ホームページ制作/EnhanceOfficeのブログEnhanceBlog - WEBクリエーターボックス様｜少しのコードで実装可能な20のjQuery小技集
Pingback: [jQuery]シンプルなTips | nuir noire
Pingback: Architecture Project
Pingback: mania-ku
Pingback: [K] [web]いまさらながらページトップに固定できるヘッドメニューを実装してみた (サンプルコードあり)
Pingback: 【jQuery】WordPress Popular Postsで項目全体をクリックさせる方法 | きになるnet
Pingback: 脱デフォルトでブログのPVアップにつながるWordPressの設定・プラグインまとめ*frasm
Pingback: jQuery | win201302blog
Pingback: 画像をマウスオーバーで切替えするには、JQueryを使うといいよ！ | 食わず嫌い記
Pingback: まるでiPhoneみたい！スクロール機能付きなんでもバーをブログトップに設置してみました
Pingback: WordPressテーマ自作戦記 最終章「減らしに減らしたWordPressプラグインほかいろいろと大紹介！」
Pingback: jQueryプラグインまとめ集 | win201302blog