Benutzerdefinierter jQuery-Fortschrittsbalken und Plug-in

Benutzerdefinierter jQuery-Fortschrittsbalken und Plug-in_jquery

WBOY

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

Original

1574 Leute haben es durchsucht

Kurzes Tutorial progressdots ist ein jQuery-Fortschrittsbalken-Plug-in mit anpassbarer Skalierungsanimation. Mit diesem jQuery-Fortschrittsbalken-Plug-in können Sie die Anzahl, Größe, Farbe und andere Attribute der Punkte der Fortschrittsbalkenskala anpassen und den Erscheinungsbildstil der Punkte über CSS steuern.

Bitte sehen Sie sich die Darstellungen unten an, um mehr über verwandte Plug-Ins zu erfahren.

Um das jQuery-Fortschrittsbalken-Plug-in zu verwenden, müssen Sie die Dateien jquery, jquery.progressdots.js und jquery.progressdots.css importieren.

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

Nach dem Login kopieren

HTML-Struktur

Verwenden Sie dann ein leeres

-Element als Container für den Fortschrittsbalken.

Die Breite und Höhe des Containers sind beliebig.

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

Nach dem Login kopieren

Legen Sie einige grundlegende Stile für den Fortschrittsbalken-Container fest und geben Sie dessen Breite und Höhe an.

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

Nach dem Login kopieren

Anruf-Plug-in

Nachdem das Seiten-DOM-Element geladen wurde, können Sie das Fortschrittsbalken-Plug-in mit der folgenden Methode initialisieren

$( '#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 });

Nach dem Login kopieren

Erweiterte Optionen

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

Nach dem Login kopieren

Anpassbare Skalierung Der jQuery-Fortschrittsbalken ist ein Tool, mit dem Sie die Anzahl, Größe, Farbe und andere Attribute der Skalierungspunkte des Fortschrittsbalkens anpassen und den Erscheinungsbildstil der Punkte über CSS steuern können.

Die Darstellung ist wie folgt:

Demo ansehen Online herunterladen

HTML-Code:

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

Nach dem Login kopieren