クロピグログ

職業訓練で学んだことまとめ

【JavaScript授業二十一日目】JQueryプラグイン

smoothscrollプラグイン

●HTML(body内の一番下)

  <!-- JQuery読み込み -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- JQueryイージイイグプラグイン：イージングキーワード -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <!-- 自分用のJS -->
  <script src="js/script.js"></script>

●JS

$(function () {
  $('a[href^="#"]').on('click', function () {
    let headerHeight = 100; // 固定ヘッダの高さ
    let speed = 1000; // 移動スピード
    let easing = 'swing'; // 移動時の動き
    let href = $(this).attr('href');
 
    //条件式 ? 真の時の値 : 偽の時の値
    //「#」または「#top」の条件の時はトップ
    //それ以外の条件の時は変数「href」に代入されたクラス
    let target = $((href == '#' || href == '#top') ? 'html' : href);
    //クリックしたリンクの位置を代入
    let position = target.offset().top;

    $('body,html').stop().animate({ scrollTop: position - headerHeight }, speed, easing);
    return false;
  });
});

 

slickプラグイン

●HTML(body内)

    <div id="slick01">
IDのほうがクラスより処理早い
もしアイキャッチなどでひとつしか使用しない場合はIDつかうべし
      <div><img src="img/001.jpg"></div>
      <div><img src="img/002.jpg"></div>
      <div><img src="img/003.jpg"></div>
    </div>

●HTML(head内)

 
  <!-- slick -->
  <!-- 自分用のcss -->
  <link rel="stylesheet" href="css/style.css">

●HTML(body内の一番下)

  <!-- JQuery本体 -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- slick -->
  <!-- 自分用のJS -->
  <script src="js/script.js"></script>

●JS

$(window).on('load', function () {
  $("#slick01").slick({
    autoplay: true,　自動で画像切替
  })
});

・slickはCSSでデザインの読み込みも必要

 

chartプラグイン

・グラフが作れる

・オプションなどボタンなどの詳しく設定可能

 

tablesorterプラグイン

●HTML(head内)

  <!-- tablesorter -->
  <link rel="stylesheet"
 <!-- 自分用のcss -->
  <link rel="stylesheet" href="css/style.css">

●HTML(body内の一番下)

  <!-- JQuery本体 -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <!-- tablesorter -->
  <script
  <script
  <!-- 自分用のJS -->
  <script src="js/script.js"></script>

●HTML(body内)

    <table id="myTable1" class="tablesorter">
      <thead>←必須　忘れないように注意
        <tr>
          <th data-column="0">Last Name</th>
          <th>First Name</th>
          <th>Email</th>
          <th>Due</th>
          <th>Web Site</th>
        </tr>
      </thead>
      <tbody>←必須　忘れないように注意
        <tr>
          <td>Smith</td>
          <td>John</td>
          <td>jsmith@gmail.com</td>
          <td>$50.00</td>
          <td>http://www.jsmith.com</td>
        </tr>
        <tr>
          <td>Bach</td>
          <td>Frank</td>
          <td>fbach@yahoo.com</td>
          <td>$50.00</td>
          <td>http://www.frank.com</td>
        </tr>
 
      </tbody>
    </table>

●CSS

.tablesorter-default th {
    background-color: red;
}

●JS

  $("#tablesorter01").tablesorter({
    headers: {
      0: { sorter: true },
      1: { sorter: false },
      2: { sorter: false },
      3: { sorter: false },
    },
    データ部分をスクロールさせる
    widgets: ["scroller"],
    widgetOption: {
      高さ指定（最小値がある）
      scroller_height: 50
    }
  });

 

aosプラグイン(JQueryなしで実装可能)

●HTML(head内)

●HTML(body内の一番下)

  <!-- JQuery本体 -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- aos -->
  <!-- 自分用のJS -->
  <script src="js/script.js"></script>

●HTML(body内)

<h1 data-aos="fade-left">box4</h1>

●JS

  AOS.init({
    disable: false, // アニメーションを実行しない端末（初期値：false）: 'phone', 'tablet', 'mobile', 真偽値
    offset: 120, // アニメーション実行までの距離（初期値：120）：数値
    delay: 0, // アニメーション実行までの遅延秒数（初期値：0）：0から3000ミリ秒までを50ミリ秒刻みで数値指定
    duration: 1200, // アニメーションの秒数（初期値：0）：0から3000ミリ秒までを50ミリ秒刻みで数値指定
    easing: 'ease', // イージング（初期値：'ease'）：イージングキーワードを文字列指定
    once: true, // アニメーションを1回のみにするか（初期値：'false'）：真偽値
    anchorPlacement: 'top-center', // ウィンドウのどの位置でアニメーションを開始する位置（初期値：'top-center'）：「要素の位置-ウィンドウ位置」
  });