JS・jQuery

よく使用するjQueryパーツ集

ここでは、web制作で毎回使う、もしくはよく使用するjQueryをまとめて紹介しています。
毎回jQueryを書くのがめんどくさい、コピペで終わらせたいという方の需要に!

webサイト制作によく使用するjQueryまとめ

スムーススクロール

「jquery-easing」も使用することで、強弱のついたいい感じのスムーススクロールを実装。

<div id="page-top"><a href="#">Page TOP</a></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> 

 

function smoothScroll() {
	$('a[href^="#"]').click(function () {
		var speed = 1500;
		var href = $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({
			scrollTop: position
		}, speed, "easeInOutQuart");
		return false;
	});
}

 

メニュー実装

ボタン1「#header-btn」をクリックでメニュー「#header-menu」が開いて、ボタン2「#header-btn_close」をクリックで閉じるメニューの実装。

function spMenu() {
	let btn = $('#header-btn');
	let close = $('#header-btn_close');
	let menu = $('#header-menu');
	btn.click(function () {
		menu.slideToggle();
	});
	close.click(function () {
		menu.slideToggle();
	});
}

 

文字数制限

新着情報などでJSを使用して指定の文字数以上の場合最後に「…」をつけて省略する実装。

function textCat() {
// SP時
	if (window.matchMedia("(max-width: 640px)").matches) {
		let count = 17;
		$('.text_limit').each(function () {
			var thisText = $(this).text();
			var textLength = thisText.length;
			if (textLength > count) {
				var showText = thisText.substring(0, count);
				var insertText = showText += '…';
				$(this).html(insertText);
			};
		});
	} else {
//PC時
		let count = 50;
		$('.text_limit').each(function () {
			let thisText = $(this).text();
			let textLength = thisText.length;
			if (textLength > count) {
				var showText = thisText.substring(0, count);
				var insertText = showText += '…';
				$(this).html(insertText);
			};
		});
	}
}

 

タブ切り替え

複数のタグを切り替える実装。

function tabSelect() {
	let tabs = $(".tab");
	$(".tab").on("click", function () {
		$(".active").removeClass("active");
		$(this).addClass("active");
		const index = tabs.index(this);
		$(".tab-content").removeClass("show").eq(index).addClass("show");
	})
}

 

フォーム系の実装

メールアドレス一致

メールアドレスが一致しているかどうか判定する。
メールが一致しない場合は、「メールアドレスが一致しません。」と表示する。

<form>
<input class="color-gray" id="mail01" type="email" name="email1" required>
<input class="color-gray" id="mail02" type="email" name="email2" required>
 
<input type="submit" value="内容を確認する" onClick="return CheckMail()">
</form>
function CheckMail() {
	// 入力値取得
	let input1 = $("#mail01").val();
	let input2 = $("#mail02").val();
	// メール比較
	if (input1 !== input2) {
		window.alert("メールアドレスが一致しません。");
		return false;
	} else {
		return true;
	}
}

随時更新中です!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)