Webサイトでこれは絶対使うよねーとか使用頻度高めのコードとプラグインをまとめました。
web制作で毎回使う、もしくはよく使用するjQueryです。
コピペで簡単に実装できる！制作でよく使うJS（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;
});
}
スクロール位置で表示・非表示を切り替える
表示開始するところにID「start」、非表示にするところにID「end」とHTMLに追加します。
表示を開始するところと消えるところを指定して、バナーの表示切り替えなどに使えます。
let distance = 0;
let scrollStart = $('#start').offset().top;
let scrollEnd = $('#end').offset().top;
$(document).scroll(function () {
distance = $(this).scrollTop();
$('.footer-btn_fixed').removeClass('js-on');
if (scrollStart < distance && distance < scrollEnd) {
$('#fixed').addClass('js-on');
} else {
$('#fixed').removeClass('js-on');
}
});
要素の操作
メニュー実装
ボタン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();
});
}
タブ切り替え
複数のタグを切り替える実装。
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");
})
}
文字操作
文字数制限
新着情報などで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);
};
});
}
}
画像操作
画像切り替え
横幅によっての画像切り替え。
SPようの画像を「○○_sp」、PCを「○○_pc」として、「imgタグ」に「sp_img」とclass指定することでブレイクポイントで画像を切り替えることができます。
var $elem = $('.sp_img');
var sp = '_sp.';
var pc = '_pc.';
var replaceWidth = 640; //ブレイクポイント
function imageSwitch() {
var windowWidth = parseInt($(window).width());
$elem.each(function () {
var $this = $(this);
if (windowWidth >= replaceWidth) {
$this.attr('src', $this.attr('src').replace(sp, pc));
} else {
$this.attr('src', $this.attr('src').replace(pc, sp));
}
});
}
imageSwitch();
var delayStart;
var delayTime = 200; //ミリSec
$(window).on('resize', function () {
clearTimeout(delayStart);
delayStart = setTimeout(function () {
imageSwitch();
}, delayTime);
});
フォーム系の実装
メールアドレス一致
メールアドレスが一致しているかどうか判定する。
メールが一致しない場合は、「メールアドレスが一致しません。」と表示する。
<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;
}
}
プラグイン
住所入力
今時登録画面やフォームで自動で住所が入らないのはどうなのよと言うことで「ajaxzip3.js」。
郵便番号だけで自動で住所を入力してくれます。
「#zip-btn」とIDを降ったボタンを押したとき、「address」に自動入力する。
$('#zip-btn').on('click', function(){
AjaxZip3.zip2addr('zip','','address','address');
//成功時の処理
AjaxZip3.onSuccess = function() {
$('.address').focus();
};
//失敗時の処理
AjaxZip3.onFailure = function() {
alert('郵便番号に該当する住所が見つかりません');
};
return false;
});
ABOUT ME
