jQueryのプログレスバープラグインの使用方法

2年 ago
優斗, 朝陽
1 minute

jQueryのProgress Barプラグインを使用するには、以下の手順に従います。

  1. jQueryライブラリとプログレスバープラグインのファイルをダウンロードしましょう。
  2. HTMLファイルに jQuery ライブラリとプログレスバープラグインのファイルをインポートする。例えば、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="path/to/progress-bar.js"></script>
  1. プログレスバーのコンテナとして HTML 要素を作成する。たとえば、
<div id="progress-bar"></div>
  1. JavaScript ファイルでプログレス バーを初期化します。例:
$(document).ready(function() {
  $('#progress-bar').progressbar();
});
  1. 進捗状況バーの外観と動作をカスタマイズするには、オプションを使用できます。たとえば:
$(document).ready(function() {
  $('#progress-bar').progressbar({
    value: 50, // 设置进度条的初始值为50%
    color: '#ff0000', // 设置进度条的颜色为红色
    height: '10px' // 设置进度条的高度为10像素
  });
});
  1. たとえば、進捗バーを操作するためにメソッドを使用できます。
$(document).ready(function() {
  var progressBar = $('#progress-bar').progressbar();
  
  // 更新进度条的值为70%
  progressBar.progressbar('setValue', 70);
  
  // 获取进度条的当前值
  var value = progressBar.progressbar('getValue');
  
  // 重置进度条的值为0%
  progressBar.progressbar('reset');
});

jQuery のプラグイン Progress Bar を使用するための主な手順です。外観と動作は、必要に応じてカスタマイズできます。

bannerAds