Bar kemajuan jQuery skala tersuai dan plug-in

Bar kemajuan jQuery skala tersuai dan plug-in_jquery

WBOY

Lepaskan： 2016-05-16 15:41:03

asal

1574 orang telah melayarinya

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">

Salin selepas log masuk

Struktur HTML

Kemudian gunakan elemen

kosong sebagai bekas untuk bar kemajuan.

Lebar dan tinggi bekas adalah sewenang-wenangnya.

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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 });

Salin selepas log masuk

Pilihan lanjutan

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

Salin selepas log masuk

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>

Salin selepas log masuk