Bar kemajuan jQuery skala tersuai dan plug-in_jquery

Progresdot tutorial ringkas ialah pemalam bar kemajuan jQuery dengan animasi skala boleh disesuaikan. Melalui pemalam bar kemajuan jQuery ini, anda boleh menyesuaikan nombor, saiz, warna dan atribut lain titik skala bar kemajuan, dan anda boleh mengawal gaya penampilan titik melalui CSS.

Sila lihat pemaparan di bawah untuk mengetahui tentang pemalam yang berkaitan.

Untuk menggunakan pemalam bar kemajuan jQuery, anda perlu mengimport fail jquery, jquery.progressdots.js dan jquery.progressdots.css.

<script src="jquery.min.js"></script> 
<script src="jquery.progressdots.js"></script>
<link href="jquery.progressdots.css" rel="stylesheet">

Struktur HTML

Kemudian gunakan elemen

kosong sebagai bekas untuk bar kemajuan.

Lebar dan tinggi bekas adalah sewenang-wenangnya.

<div id='progressBox'></div> 

Tetapkan beberapa gaya asas untuk bekas bar kemajuan, nyatakan lebar dan ketinggiannya.

#progressBox{ border: 8px solid #DDD; width: 80%; height: 40px; }

Panggil pemalam

Selepas elemen DOM halaman dimuatkan, anda boleh memulakan pemalam bar kemajuan melalui kaedah berikut

$( '#progressBox' ).dottify({ dotSize: '25px', 
//set size of dot dotColor: '#f15c89',
//set dot color (#HEX) progress: true, 
//enable progress percent: 10, //set initial percentage radius: '40%'
//set dot corner radius }); 

Pilihan lanjutan

var progressBox = $( '#progressBox' ).dottify({ progress:true,
//start with progressbar on percent:0 }); progressBox.setProgress( 20 );
//update progress percentage 

Bar kemajuan jQuery skala boleh disesuaikan ialah alat yang membolehkan anda menyesuaikan nombor, saiz, warna dan atribut lain titik skala bar kemajuan, dan anda boleh mengawal gaya penampilan titik melalui CSS.

Rendering adalah seperti berikut:

Lihat demo Muat turun dalam talian

kod html:

<div class="htmleaf-container">
 <div id="container">
  <div class="padded">
  <div id="progressHolder"></div>
  <div id="progressReset">生成随机的风格</div>
  </div>
 </div>
 </div>
 <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
 <script src="js/jquery.progressdots.js"></script>
 <script src="js/prism.js"></script>
 <script>
 $(document).ready(function () {
  createSpots(1);
  $("#progressReset").click(function (event) {
  event.preventDefault();
  createSpots(1);
  });
  function createSpots(num) {
  for (var i = 0; i < num; i++) {
   options = {
   dotSize: random(10, 20) + "px",
   radius: random(1, 7) * 10 + "%"
   };
   randomHtml = "";
   if (Math.random() < 0.5) {
   options.randomColors = true;
   randomHtml += "\n\trandomColors: " + options.randomColors + ", //use random colors";
   }
   else {
   options.dotColor = randomColor();
   randomHtml += "\n\tdotColor: '" + options.dotColor + "', //set dot color (#HEX)";
   }
   if (Math.random() < 0.3) {
   options.progress = true;
   options.percent = random(5, 100);
   randomHtml += "\n\tprogress: true, //enable progress";
   randomHtml += "\n\tpercent: " + options.percent + ", //set initial percentage";
   } else {
   options.numDots = random(3, 15);
   randomHtml += "\n\tnumDots: " + options.numDots + ", //number of dots";
   }
   string = "$( '#progressBox' ).dottify({\
   \n\tdotSize: '" + options.dotSize + "', //set size of dot" +
    randomHtml +
    "\n\tradius: '" + options.radius + "' //set dot corner radius\
  \n});";
   var $container = $("<div class='swoopContainer'></div>").data("setupString", JSON.stringify(string));
   $("#progressHolder").append($container.hide());
   $container.slideDown(function () {
   $(this).css({ overflow: "hidden" });
   });
   $container.click(function () {
   $(".swoopContainer").removeClass("selected");
   $(this).addClass("selected");
   $("#jsContents").html(JSON.parse($(this).data("setupString")));
   Prism.highlightAll();
   });
   $container.dottify(options);
   $("#jsContents").html(string);
   Prism.highlightAll();
  }
  $(".swoopContainer").removeClass("selected");
  $(".swoopContainer").last().addClass("selected");
  }
  function randomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
  }
  function random(min, max) {
  return Math.floor(Math.random() * ((max - min) + min) + min);
  }
 });
 </script>

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn