簡単に実装できるjQueryのスクリプト5選

イロイロとプラグインやらナンやら巷に溢れていますが、「そんな高機能はいらない」「もっとシンプルなのがいい」って思ってるあなたへ。今回はシンプルで簡単に実装でき、よく使いそうなjQueryのスクリプトをまとめて紹介します。まあ独断と偏見によりますが。それではどうぞ。

準備

今回のスクリプトは全てjQueryを必要としますので、まずはそちらの導入から始めます。

必要なファイル

設定

HTMLヘッダー内でjquery.jsを読み込む。

<script src="jquery.js" type="text/javascript"></script>

準備が出来ましたら、どうぞスクリプト達と戯れて下さい。

1.画像のロールオーバー

野に咲く花のように巷に溢れているスクリプトだと思います。単純かつ効果的。無くても大丈夫だけど無いとなんだか寂しい。そんな時こそ彼の健気なココロを知るのです。そんな素敵な存在です。

Demo

HTML

ロールオーバーを設定するimg要素にclass="rollover"を記述。

<ul>
	<li><a href="#"><img src="sample1.gif" class="rollover"></a></li>
	<li><a href="#"><img src="sample2.gif" class="rollover"></a></li>
	<li><a href="#"><img src="sample3.gif" class="rollover"></a></li>
</ul>

JavaScript

以下のスクリプトを記述。5行目をHTMLに合わせて変更。

(function($){

	// 関数実行
	$(function(){
		$('img.rollover').rollover();	//実行したい要素を指定
	});

	$.fn.rollover = function(a_opt){

		var o = $.extend({
			strOv: '_ov'	// ロールオーバー画像の接尾詞
		}, a_opt);

		$(this).each(function(){

			var self = $(this);

			// 画像置換関数
			var imgChanger = function (a_elm, a_str1, a_str2){
				a_elm.attr('src', self.attr('src').replace(new RegExp('^(\.+)' + a_str1 + '(\\.[a-z]+)$'), '$1' + a_str2 + '$2'));
			}

			// ホバーイベント
			self.mouseover(function(){
				imgChanger(self, '', o.strOv);
			})
			.mouseout(function(){
				imgChanger(self, o.strOv, '');
			})
			.each(function(){	// プリロード設定
				imgChanger($('<img>'), '', o.strOv);
			});

		});

	}

})(jQuery);

※2012/10/25 上記スクリプトの記述を変更しました。

※2011/6/23 上記スクリプトの記述を変更しました。

その他

ロールオーバー用画像(形式はなんでもOK)を用意し、ロールオーバー前の画像ファイル名の最後に_ovを追加する。その画像をロールオーバー前の画像と同じフォルダに入れる。

(例)ロールオーバー前の画像がsample.gifならsample_ov.gifというファイル名にする。

参考サイト

2.スムーズスクロール

気づけばいつの間にか瞬間移動。早いことは良いことさ、このネット世界では。でも奴らは望むんだもっと自然な動きを。だから俺が必要なんだよ。って感じできっと彼は世の中に出てきたんでしょう。

Demo

HTML

基本的にhrefの値が#で始まる場合はスクリプトが動作します。但し、href="#"の様に#のみの場合は動作しません。またページの先頭に戻る場合はclass="page-top"で動作します。

<a href="#link">#で始まれば動作。但し#のみだと動作しない。</a>
<a class="page-top" href="#">ページの先頭に戻る</a>

JavaScript

以下のスクリプトを記述。11行目を仕様に合わせて変更。

(function($){

	// 関数実行
	$(function(){
		smoothScroll();
	});

	// クリックイベンント
	function smoothScroll(){

		var spd = 300;	//スクロール速度

		function scroller(a_pos){
			$(!(!document.uniqueID && !window.opera && !window.globalStorage && window.localStorage) ?
			document.compatMode == "BackCompat" ? "body" : "html" :
			"html,body")
			.animate({scrollTop: a_pos}, spd);
		}

		// ページのトップへ戻る場合
		$('a.page-top').on('click', function(){
			scroller(0);
			return false;
		});

		// それ以外のページ内リンクの場合
		$('a[href*=#]:not(a[href=#])').on('click', function(){
			var _strId = this.href.substring(this.href.indexOf("#"), this.href.length);
			var _pos = $(_strId).offset().top;
			scroller(_pos);
			return false;
		});
	}

})(jQuery);

※2012/10/25 上記スクリプトの記述を変更しました。

※2011/11/26 上記スクリプトの記述を変更しました。

※2011/6/23 上記スクリプトの記述を変更しました。

参考サイト

3.カラムの高さを揃える

デザイン段階ではそろっていたじゃないか。なんて言われても。。。そんなアナタの味方です。

Demo

HTML

以下の様にclass="heightJustify"を指定した要素の子要素が全て最大の高さをもつ要素に揃えられる。親要素、子要素ともに要素は何でもよい。

<div class="height-flat-1">
	<div>テキストテキストテキスト</div>
	<div>テキストテキストテキスト</div>
	<div>テキストテキストテキスト</div>
</div>
<div class="height-flat-2">
	<div>テキストテキストテキスト</div>
	<div>テキストテキストテキスト</div>
	<div>テキストテキストテキスト</div>
</div>

※2012/10/25 複数行でも対応出来るように上記HTMLの記述を変更しました。

JavaScript

以下のスクリプトを記述。5、6行目をHTMLに合わせて変更。

(function($){

	// 関数実行
	$(function(){
		$('div.height-flat-1').heightFlat();	//実行する要素を指定
		$('div.height-flat-2').heightFlat();	//実行する要素を指定
	});

	$.fn.heightFlat = function(){

		var strId = 'height-flat-check';

		// フォントサイズ変更確認用要素が無ければ実行
		if(!$('#' + strId).size()){

			// フォントサイズ変更確認用要素生成
			$('body').append('<div id="' + strId + '">f</div>');
			var elmCheck = $('#' + strId);
			elmCheck.css({visibility: 'hidden', position: 'absolute'});
			var h = elmCheck.height();

			// フォントサイズ変更確認関数
			function heightChecker(){
				var _hNow = elmCheck.height();
				if(h != _hNow){
					flatten();
					h = _hNow;
				}
			}

			// フォントサイズ変更確認関数を一定時間おきに実行
			setInterval(heightChecker, 1000);

		}

		var elmBox = $(this).children();
		var highest = 0;

		// 高さを揃える関数
		function flatten(){

			// 最大の高さの取得
			elmBox.each(function(){
				var _h = $(this).height();
				if(_h > highest){
					highest = _h;
				}
			});

			// 高さを設定
			elmBox.height(highest);

		}

		// 高さを揃える関数実行
		flatten();

	}

})(jQuery);

※2012/10/25 複数行でも対応出来るように上記スクリプトの記述を変更しました。

※2011/6/23 上記スクリプトの記述を変更しました。

参考サイト

4.ツールチップ

title属性を設定するとツールチップがでますよね。あれです。そうあれ。あれを自分好みにデザインしたいと密かに思っている方に。

Demo

HTML

以下の様にtitle属性をもつ要素があればその要素に対してスクリプトが動作する。

<a title="title属性の値がツールチップに表示される">テキスト</a>

CSS

以下の様にdiv#toolchipに好きな様にスタイルを指定。以下サンプルはデモと同じスタイルです。

div#toolchip {
	max-width: 300px;
	background-color: #333;
	padding: 5px;
	opacity: 0.8;
	filter: alpha(opacity=80); /*IE用アルファチャンネル*/
	color: #fff;
}
* html div#toolchip { /*IE6用にmax-widthを指定*/
	width:expression(document.body.clientWidth < 2? "0px" : document.body.clientWidth > 302? "300px" : "auto");
}

※2012/10/25 上記スクリプトの記述を変更しました。

※2011/6/23 上記スクリプトの記述を変更しました。

JavaScript

以下のスクリプトを記述。13~15行目を仕様に合わせて変更。

(function($){

	// 関数実行
	$(function(){
		$('body *[title]').toolChip();
	});

	$.fn.toolChip = function(){

		// body内のtitle属性をもつ要素への処理
		$(this).each(function(){

			var spd = 500;	//表示速度
			var posY = 0;	//ツールチップの縦位置
			var posX = 15;	//ツールチップの横位置
			var self = $(this);
			var strId = 'toolchip';
			var strTitle = self.attr('title');
			var elm;

			// ホバーイベント
			self.hover(
				function(a_e){
					self.attr('title', '');
					$('body').append('<div id=' + strId + '>' + strTitle + '</div>');
					elm = $('#' + strId);
					elm.hide().css({
						position: 'absolute',
						top: a_e.pageY + posY,
						left: a_e.pageX + posX
					})
					.not(':animated').fadeIn(spd);
				},
				function(){
					self.attr('title', strTitle);
					elm.remove();
				}
			);

			// マウスムーヴイベント
			self.mousemove(function(e){
				elm.css({
					top: e.pageY + posY,
					left: e.pageX + posX
				});
			});

		});

	}

})(jQuery);

※2012/10/25 上記スクリプトの記述を変更しました。

※2011/6/23 上記スクリプトの記述を変更しました。

参考サイト

5.アコーディオンメニュー

世の中ではアコーディオンメニューなんて呼ばれてるこの子ですが、ほんとうはもっといい名前が欲しかっんじゃなかろうか?ん~。やっぱりこれがベストかな。

Demo

HTML

以下の様にid="accordionMenu"指定した要素の2つ下の子孫要素の一つめをクリックすと、クリックした次の要素が開閉します。つまり要素は何でもいいです。だだ、大抵は以下の様にリストの入れ子を使うと思いますが。

<ul id="accordionMenu">
	<li><span>メニュー1</span><ul>
		<li><a href="#">メニュー1-1</a></li>
		<li><a href="#">メニュー1-2</a></li>
		<li><a href="#">メニュー1-3</a></li>
	</ul></li>
	<li><span>メニュー2</span><ul>
		<li><a href="#">メニュー2-1</a></li>
		<li><a href="#">メニュー2-2</a></li>
		<li><a href="#">メニュー2-3</a></li>
	</ul></li>
	<li><span>メニュー3</span><ul>
		<li><a href="#">メニュー3-1</a></li>
		<li><a href="#">メニュー3-2</a></li>
		<li><a href="#">メニュー3-3</a></li>
	</ul></li>
</ul>

JavaScript

以下のスクリプトを記述。5、11、12行目をHTMLや仕様に合わせて変更。

(function($){

	// 関数実行
	$(function(){
		$('#accordionmenu').accordionMenu();	//実行する要素を指定
	});

	$.fn.accordionMenu = function(a_opt){

		var o = $.extend({
			spd: 500,	// アニメーション速度設定
			dspInit: 1	// 初期表示(0なら全部閉じる、HTML内の表示順で数値を入力)
		}, a_opt);

		var elm = $(this).find('ul');	// スライド要素設定

		// 初期表示設定
		if(o.dspInit){
			elm.not(':eq(' + (o.dspInit - 1) + ')').hide();
		}
		else {
			elm.hide();
		}

		// クリック関数
		$(this).delegate('> li', 'click', function(){
			var self = $(this);
			var _elmChild = self.children('ul');
			var _idx = self.index();
			if(_elmChild.css('display') == 'none'){
				elm.not(':eq(' + _idx + ')').children('ul').slideUp(o.spd);
				_elmChild.slideDown(o.spd);
				return false;
			}
			else if(_elmChild.css('display') != 'none'){
				_elmChild.slideUp(o.spd);
			}
		});
	}

})(jQuery);

※2012/10/25 上記スクリプトの記述を変更しました。

参考サイト

あとがき

いかがでしたか。タイトルに「簡単に実装できる」とは書きましたが、そんなスクリプトなら世の中にいくらでもあります。ちゃんとプラグインとして配布しているものもありますし。ただ、仕事の場合は素敵な機能よりシンプルな機能の方を使う人は多いのではないでしょうか?まー勝手な予想ですが。ですので1つの記事にまとめておくと便利かなって思ったのでこの記事を書いてみました。このページを開いて必要なスクリプトを選んでコピペ。そんな感じでご利用頂けると幸いです。

Comment

sat

素敵なプラグインありがとうございます。
一つ質問なのですが、下記のプラグインで画像のタブ切り替えをしています。
http://labs.yusukenakanishi.com/2010/06/11/imegetags/

こちらと併用して使うと、タブ切り替えした時にタブの位置までスムーズに移動してしまうのです。
タブ切り替えと一緒に使えるよい方法があったら教えてください。
宜しくお願いします。

syuji

satさん。はじめまして。

まずは、記事を見ていただきありがとう御座います。
話の内容を読む限り、併用しているスクリプトはスムーズスクロールだと思いますので、そちらについて考えてみました。

早速ですが、解決法を。
この記事に記載しているスムーズスクロールの11行目の記述を以下に書き換えて下さい。

$(“a[href*=#]:not(.pageTop,a[href=#],a[href*=#tab])”).click(function(){

以上です。
以下にて説明を。

併用するとバグが起こる原因は、href要素に#が含まれる場合に両スクリプトが同時に動作する為です。
ですので、「imageTabs.js」にて使用されている#tabから始まるhref属性をもつ要素をスムーズスクロールの対象から外しました。

他にも方法はありますが、手っ取り早く無難な方法かと思います。
とはいえあまりJavaScriptが出来きず、jQueryでやっとこさの私ですので、あまり自信はありませんが。。。

実はコメントを頂いたのは初めてでしたので、嬉しい限りです。
ありがとう御座います。

sat

早速の御返信ありがとうございました。
WEB製作しているのですが、jsにはあまり詳しくなく困っていたので本当に助かりました。
ちゃんと動作しました。
本当にありがとうございました。

実は以前、沖縄で生活していたので、下記コメント「沖縄でのんびり雇われHTMLコーダー」との事でなにか親近感が湧き、めったにコメントしないのですが思い切って聞いてみちゃいました(^^)/
数年後にはまた沖縄で生活するつもりなんです!

・・・なんてこちらも嬉しく、たくさん書いてしまいました。。。。
また宜しくお願いします!!

syuji

ちゃんと動作したとのことでよかったです。
コメントを頂いたことでいい勉強になりました。
こちらこそありがとう御座います。

プロフィールに「沖縄」ってワードを入れておいてよかっです(笑)
また沖縄にいらっしゃる予定とのことでこちらも親近感が湧きました。

また、お役に立てかと思うと嬉しい限りです。

Top