TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Animerad Progress Pie Chart Widget för Weebly

4

Framstegsfält används för att visa upp färdigheter och andra data i en bildvy så att användarna snabbt kan förstå data. I vår föregående artikel hade vi sett hur man skapar horisontella förloppsindikatorer och låt oss i den här självstudien kolla hur vi skapar en animerad framstegsdiagram -widget för Weebly -webbplatsen. Av många tillgängliga alternativ är enkelt cirkeldiagram -plugin ett av de enkla sätten att skapa cirkeldiagram. Widgeten kommer att se ut ungefär som nedan och du kan anpassa färger och innehåll enligt dina behov.

Animerad Progress Pie Chart Widget för Weebly

Ladda ner källfiler för att skapa denna widget på din webbplats.

Widgeten skapas genom att modifiera det fria jQuery -enkla cirkeldiagram -tillägget och lägga till anpassat skript och CSS till det. Den har följande funktioner:

  • Full responsiv på alla enheter.
  • Ange vilken procentandel som helst för framstegen, om du inte vill att % -symbolen ska ta bort den från skriptfilen.
  • Anpassa färgerna på cirkeln, framstegsanimationen och spikarna.
  • Placera diagrammet på valfri plats, widgeten kommer att animera på rullning.

Ladda ner källfilerna och följ instruktionerna nedan för steg för att lägga till widgeten till din Weebly -webbplats. Zip -nedladdningen innehåller följande filer:

  • jquery.min.js – det här är en jQuery -fil som bara krävs för att demoen ska fungera. Eftersom Weebly använder jQuery -biblioteket som standard krävs inte den här filen på din Weebly -webbplats.
  • jquery.easypiechart.min.js – detta är basskriptfilen och det anpassade skriptet läggs också till i den här filen för att göra den som en enda källa.
  • Progress Pie Chart.html – det här är en demo -HTML -sida som innehåller CSS och HTML -koden.

Lägga till widgeten i Weebly

Ladda först upp jquery.easypiechart.min.js -filen till din Weebly -webbplats under "Tema> Redigera HTML / CSS > tillgångar". Länka skriptet till önskad sida under "Sidor> Välj sidan> Avancerat> Rubrikkod " genom att lägga till nedan kod:

<script src="files/theme/jquery.easypiechart.min.js"></script>

CSS innehåller tre huvudkomponenter-behållare, individuella cirkelblock och diagrammet som styrs genom .chart-container, .pr-chart-ctrl respektive .pr-chart klasser.

Lägg till följande CSS (tillgängligt med Progress Pie Chart.html) under avsnittet "Sidor> Välj sida> SEO -inställningar> Sidfotskod".

<style> .chart-container .pr-chart-ctrl { display:block; float:left; width:25%; } .chart-container .pr-chart-ctrl .pr-chart { display:block; position:relative; width:100%; margin:0 0 20px 0; text-align:center; margin-top: 30px; } .chart-container .pr-chart-ctrl .pr-chart canvas { display:block; margin:0 auto; padding:0; vertical-align:center; } .chart-container .pr-chart-ctrl .pr-chart i { position:absolute; top:0; left:0; width:100%; height:200px; line-height:200px; font-size:48px; font-style:normal; color: #808080; } .chart-container .pr-chart-ctrl p{ margin:0; padding:0; text-transform:uppercase; color:green; } @media screen and (max-width:500px) { .chart-container .pr-chart-ctrl { width:100%; margin-bottom:50px; } } @media screen and (min-width:501px) and (max-width:900px) { .chart-container .pr-chart-ctrl { width:50%; margin-bottom:50px; } } </style>

Den sista delen är att lägga till nedanstående HTML i ett " Bädda in kod " -element. Du kan ersätta dummyprocenten och titlarna med dina egna.

<ul class="chart-container"> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="25"><i></i></div> <p>WordPress Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="50"><i></i></div> <p>Weebly Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="75"><i></i></div> <p>Search Engine Optimization</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="100"><i></i></div> <p>Blog Consulting</p> </li> </ul>

Anpassa widgeten

Jquery.easypiechart.min.js -filen innehåller nedanstående skript för att styra beteendet för cirkelframstegsanimationen.

size: 200, barColor: '#F85656', trackColor: '#f1f1f1', scaleColor: 'violet', scaleLength: 5, lineWidth: 5, lineCap: 'square', onStep: function(from, to, percent) { $(this.el).find('i').text(Math.round(percent) + '%');

Du kan ta bort % för att radera det från diagrammen och kontrollen av de återstående variablerna är enligt nedan:

Variabel

Kontrollera

storlek Definiera storleken på cirkeldiagrammet.
barColor Färg på framstegsanimationen.
trackColor Färg på cirkelcirkeln.
skalaColor Färgen på spikarna.
skalaLängd Spikarnas längd.
linjebredd Bredd på cirkelformat cirkeldiagram.
lineCap Slut på framstegsanimation, möjliga värden är runda, fyrkantiga och rumpa.

Full bredd Parallax cirkeldiagram

Om du lägger till widgeten ovan med hjälp av inbäddningskodelement ser det enkelt ut. Du kan göra ett vackert parallax cirkeldiagram med hjälp av sektionselement som nedan:

Animerad Progress Pie Chart Widget för Weebly

Weebly Parallax cirkeldiagram

Följ instruktionerna nedan för att skapa cirkeldiagram med parallaxbildsbakgrund.

  • Dra och släpp ett sektionselement. Klicka på sektionselementet på innehållsområdet och klicka sedan på alternativet "Redigera bakgrund".
  • Välj bild som bakgrund och ställ in rullningseffekt som parallax. Du kan också ställa in färgbakgrund och videobakgrunden är endast tillgänglig för proffsanvändare.
  • Dra och släpp nu ett inbäddningskodselement och lägg till HTML -koden enligt ovanstående avsnitt.
  • Publicera din webbplats och se det animerade cirkeldiagramet med parallaxbildsbakgrund.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer