jQuery

【jQuery】クリップボードにコピーするボタンの設置

jQueryのみでクリップボードにコピーするボタンの設置する方法です。

ボタンのクリックでURLを値として取得し、
.successを表示してコピー完了した旨を知らせるという挙動です。

以下のHTMLとjQuery以外にも.successにCSSdisplay:none;などを適宜適用しておきます。

SNSのシェアボタンと並べて使うことを想定してaタグにしていますが、hrefを設定していないとマウスオーバーしてもポインターに変わらないので、CSSにcursor:pointer;も設定しておくと良いです。

SNSのシェアボタンと並べて使うことが多いのでこちらのページも併せて確認しておくと良いでしょう。

<a id="copy-url" data-url="https://sample.com/">リンクをコピー</a>

<div class="success">コピーしました</div>
$(function () {
    $('#copy-url').click(function () {
        // 値の取得
        const url = $(this).data('url');

        // コピー
        navigator.clipboard.writeText(url);

        // メッセージ表示
        $('.success').fadeIn("slow", function () {
            $(this).delay(2000).fadeOut("slow");
        });
    });
});

参考:https://ungifted.tech/blog/copy-to-clipboard/

【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版

■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)

■上級・開発向け
jQueryクックブック(オライリー)

【jQuery】slickでスライド枚数を数字で表示する方法(何枚目/総数)

slickでスライド枚数を数字で表示する方法
「何枚目/総数」という表示をするためのカスタマイズ方法です。

基本的な設置方法は以前の記事を参照ください。

$(function() {
  $('.slide').on('init', function(event, slick) {
    $(this).append('<div class="slick-counter"><span class="current"></span> / <span class="total"></span></div>');
    $('.current').text(slick.currentSlide + 1);
    $('.total').text(slick.slideCount);
  })
  .slick({
    // ここにオプションを記述
    autoplay: true,
    autoplaySpeed: 4000,
    infinite: true,
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    $('.current').text(nextSlide + 1);
  });
});

.slide ・・・ スライドさせる要素のclass名
.current ・・・ 現在何枚目のスライドか
.total ・・・ スライドの総数

参考:https://www.nxworld.net/jquery-plugin-slick-slide-counter.html
https://junpei-sugiyama.com/slick-slide-count/

【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版

■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)

■上級・開発向け
jQueryクックブック(オライリー)

【jQuery】jQueryプラグインでのスライドショー・スライダーの実装(slick)

スライドショーをjQueryのプラグインを使って実装する場合、オプションの種類が豊富で、レスポンシブにも対応しているなど機能豊富なslickが使いやすいです。

slick

slickの準備

slick公式サイトの「get it now」からダウンロードします。

最低限必要なものはslick.js(もしくはslick.min.js)、slick.cssslick-theme.css、その他必要に応じてfontsフォルダajax-loader.gifも用意してください。

slickの読み込み

<!-- css -->
<link rel="stylesheet" href="./js/slick/slick.css">
<link rel="stylesheet" href="./js/slick/slick-theme.css">

<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="./js/slick/slick.min.js"></script>

HTML

 <ul class="slide">
   <li><img src="dummy1.png"></li>
   <li><img src="dummy2.jpg"></li>
   <li><img src="dummy3.jpg"></li>
 </ul>

JS

slickに簡単なオプションを付与した書式は下記となります。

$(".slide").slick({
  autoplay: true,
  autoplaySpeed: 4000,
  infinite: true,
});

レスポンシブ

レスポンシブでの書式は下記となります。

$('.slide').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  dots: true,

  responsive: [{
   breakpoint: 768, // ブレイクポイントを指定
    settings: {
     slidesToShow: 2,
     speed: 600,
    },
   },
  {
   breakpoint: 480,
    settings: {
     slidesToShow: 1,
     centerMode: true,
     centerPadding: '20%',
   },
  },
 ]
});

参考:https://zero-plus.io/media/jquery-slick/
https://releases.jquery.com/

【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版

■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)

■上級・開発向け
jQueryクックブック(オライリー)

【jQuery】下スクロールで消えて、上スクロールで再表示するヘッダーメニュー

下スクロールで消えて、上スクロールで再表示する
ヘッダーメニューをjQueryで実装します。

HTMLを

<div class="header">
  <div class="menu">
    <div class="inner">sample text</div>
  </div>
</div>

CSSを

.menu {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    top: 0;
    transition: 1s;
}
.menu.hide {
    transform: translateY(-50px);
}

50pxの高さのメニューを50px上に移動させて隠す、という動きにしています。

jQueryを

$(function() {
    var pos = 0;
    var header = $('.menu');
    $(window).on('scroll', function() {
        if ($(this).scrollTop() < pos) {
            header.removeClass('hide');
        }
        else {
            header.addClass('hide');
        }
        pos = $(this).scrollTop();
    });
});

下スクロールでhideを付けて隠し、上スクロールでhideを削除して再表示するという挙動にしています。

参考:https://www.esz.co.jp/blog/2885.html

【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版

■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)

■上級・開発向け
jQueryクックブック(オライリー)

【jQuery】バナーのランダム表示

jQueryでバナーをランダム表示したい場合、
headerに
<script type="text/javascript">
  jQuery(function($) {
    $.fn.extend({
      randomdisplay: function(num) {
        return this.each(function() {
          var chn = $(this).children().hide().length;
          for (var i = 0; i < num && i < chn; i++) {
            var r = parseInt(Math.random() * (chn - i)) + i;
            $(this).children().eq(r).show().prependTo($(this));
          }
        });
      }
    });
    $(function() {
      $("[randomdisplay]").each(function() {
        $(this).randomdisplay($(this).attr("randomdisplay"));
      });
    });
  });
</script>

htmlは
<ul class="randomdisplay" randomdisplay="3">
    <li>~</li>
</ul>

randomdisplayの数字を変更することで表示するバナーの数を変更できます。(この場合3枚表示)

このサイトのサイドバー(PC)やヘッダー(SP)で実際に使っているのでリロードしてランダム表示されることを試してみてください。

参考:https://web-omusubi.com/blog/omusubi75.html
【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版

■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)

■上級・開発向け
jQueryクックブック(オライリー)