TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Animoitu kehityskuvio -widget Weeblylle

16

Edistymispalkkeja käytetään taitojen ja muiden tietojen esittelyyn kuvallisessa näkymässä, jotta käyttäjät voivat ymmärtää tiedot nopeasti. Edellisessä artikkelissamme olimme nähneet, kuinka luodaan vaakasuuntaisia ​​edistymispalkkeja, ja tässä opetusohjelmassa tarkastelemme tapaa luoda animoitu edistymispistekaavio -widget Weebly -sivustolle. Monista käytettävissä olevista vaihtoehdoista helppo ympyräkaavio -laajennus on yksi yksinkertaisista tavoista luoda ympyräkaavioita. Widget näyttää seuraavanlaiselta ja voit muokata värejä ja sisältöä tarpeidesi mukaan.

Animoitu kehityskuvio -widget Weeblylle

Luo lähdetiedostot ja luo tämä widget sivustollesi.

Widget luodaan muokkaamalla ilmaista jQuery easy pie chart -laajennusta ja lisäämällä siihen mukautettuja komentosarjoja ja CSS -tiedostoja. Siinä on seuraavat ominaisuudet:

  • Täysin reagoiva kaikilla laitteilla.
  • Määritä edistymisen prosenttiosuus, jos et halua, että % -merkki poistetaan komentosarjatiedostosta.
  • Mukauta ympyrän värejä, etenemisen animaatiota ja piikkejä.
  • Aseta kaavio mihin tahansa paikkaan, widget animoi vierityksen aikana.

Lataa lähdetiedostot ja lisää widget Weebly -sivustoosi noudattamalla alla olevia vaiheittaisia ​​ohjeita. Zip -lataus sisältää seuraavat tiedostot:

  • jquery.min.js – tämä on jQuery -tiedosto, joka tarvitaan vain esittelyn toimimiseksi. Koska Weebly käyttää oletusarvoisesti jQuery -kirjastoa, tätä tiedostoa ei vaadita Weebly -sivustossasi.
  • jquery.easypiechart.min.js – tämä on komentosarjatiedosto ja mukautettu komentosarja lisätään myös tämän tiedoston sisälle, jotta se olisi yksi lähde.
  • Progress -ympyrädiagrammi.html – tämä demo -HTML -sivu sisältää CSS: n ja HTML -koodin.

Widgetin lisääminen Weeblyyn

Lataa ensin jquery.easypiechart.min.js -tiedosto Weebly -sivustoosi kohdasta "Teema> Muokkaa HTML / CSS > Resurssit". Linkitä komentosarja halutulle sivulle kohdassa "Sivut> Valitse sivu> Lisäasetukset> Otsikkokoodi " lisäämällä alla koodi:

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

CSS sisältää kolme pääkomponenttia-kontti, yksittäiset ympyrälohkot ja kaavio, jota ohjataan .chart-container, .pr-chart-ctrl ja .pr-chart -luokkien avulla.

Lisää seuraava CSS (saatavana Progress -ympyräkaavion.html kanssa) Sivut> Valitse sivu> SEO -asetukset> Alatunnisteen koodi -osiossa.

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

Viimeinen osa on lisätä alla oleva HTML -koodi " Upota koodi " -elementtiin. Voit korvata nuken prosenttiosuudet ja otsikot omilla.

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

Widgetin mukauttaminen

Jquery.easypiechart.min.js -tiedosto sisältää alla olevan komentosarjan piirakan etenemisen animaation ohjaamiseksi.

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) + '%');

Voit poistaa % poistaa sen kaavionäytöstä ja jäljellä olevien muuttujien hallinta on seuraava:

Muuttuva

Ohjaus

koko Määritä ympyräkaavion ympyrän koko.
barColor Edistymisen animaation väri.
trackColor Piirakkaympyrän väri.
asteikkoVäri Piikkien väri.
asteikkoPituus Piikkien pituus.
viivan leveys Edistymisen ympyräkaavion ympyrän leveys.
lineCap Edistymisen loppuanimaatio, mahdolliset arvot ovat pyöreä, neliö ja pusku.

Täysleveä Parallax -ympyräkaavio

Kun lisäät yllä olevan widgetin upotuskoodin avulla, se näyttää tavalliselta. Voit tehdä kaunis parallaksi ympyräkaaviona käyttäen profiilielementin kuten alla:

Animoitu kehityskuvio -widget Weeblylle

Weebly Parallax -kaavio

Luo ympyräkaavio parallaksikuvan taustalla noudattamalla alla olevia ohjeita.

  • Vedä ja pudota osion elementti. Napsauta osioelementtiä sisältöalueella ja valitse sitten "Muokkaa taustaa".
  • Valitse kuva taustaksi ja aseta vieritystehoste parallaksi. Voit myös asettaa värin taustan, ja videon tausta on vain ammattilaisille.
  • Vedä ja pudota upotuskoodi ja lisää HTML -koodi yllä olevan osan mukaisesti.
  • Julkaise sivustosi ja katso animoitu ympyräkaavio parallaksikuvalla.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja