TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Animowany widżet wykresu kołowego postępu dla Weebly

0

Paski postępu służą do prezentowania umiejętności i innych danych w widoku obrazkowym, aby użytkownicy mogli szybko zrozumieć dane. W naszym poprzednim artykule widzieliśmy, jak tworzyć poziome paski postępu, a w tym samouczku sprawdźmy, jak stworzyć animowany widżet wykresu postępu dla witryny Weebly. Spośród wielu dostępnych opcji wtyczka Easy Pie Chart jest jednym z prostych sposobów tworzenia wykresów kołowych. Widżet będzie wyglądał podobnie jak poniżej i możesz dostosować kolory i zawartość zgodnie z potrzebami.

Animowany widżet wykresu kołowego postępu dla Weebly

Pobierz pliki źródłowe, aby utworzyć ten widżet w swojej witrynie.

Widget jest tworzony poprzez modyfikację darmowej wtyczki jQuery easy wykres kołowy i dodanie do niej niestandardowego skryptu i CSS. Posiada następujące cechy:

  • W pełni responsywny na wszystkich urządzeniach.
  • Określ dowolny procent postępu, jeśli nie chcesz, aby symbol % usunął go z pliku skryptu.
  • Dostosuj kolory koła, animację postępu i kolce.
  • Umieść wykres w dowolnym miejscu, widget będzie animowany podczas przewijania.

Pobierz pliki źródłowe i postępuj zgodnie z poniższą instrukcją krok po kroku, aby dodać widżet do swojej witryny Weebly. Plik do pobrania zip zawiera następujące pliki:

  • jquery.min.js – jest to plik jQuery wymagany tylko do działania demo. Ponieważ Weebly domyślnie używa biblioteki jQuery, ten plik nie jest wymagany w Twojej witrynie Weebly.
  • jquery.easypiechart.min.js – jest to podstawowy plik skryptu, a niestandardowy skrypt jest również dodawany wewnątrz tego pliku, aby stał się pojedynczym źródłem.
  • Progress Pie Chart.html – jest to demonstracyjna strona HTML zawierająca CSS i kod HTML.

Dodawanie widżetu w Weebly

Najpierw prześlij plik jquery.easypiechart.min.js do swojej witryny Weebly w sekcji „Motyw > Edytuj kod HTML/CSS > Zasoby". Połącz skrypt z wymaganą stroną w sekcji „Strony > Wybierz stronę > Zaawansowane > Kod nagłówka “, dodając poniżej kod:

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

CSS zawiera trzy główne komponenty – kontener, pojedyncze bloki kołowe oraz wykres kontrolowany odpowiednio przez klasy .chart-container, .pr-chart-ctrl i .pr-chart.

Dodaj następujący kod CSS (dostępny w Progress Pie Chart.html) w sekcji „Strony > Wybierz stronę > Ustawienia SEO > Kod stopki”.

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

Ostatnią częścią jest dodanie poniższego kodu HTML w elemencie „ Embed Code “. Możesz zastąpić fikcyjne wartości procentowe i tytuły własnymi.

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

Dostosowywanie widżetu

Plik jquery.easypiechart.min.js zawiera poniższy skrypt kontrolujący zachowanie animacji postępu tortu.

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

Możesz usunąć %, aby usunąć go z wyświetlania wykresu, a kontrola pozostałych zmiennych jest następująca:

Zmienny

Kontrola

rozmiar Określ rozmiar koła wykresu kołowego.
barKolor Kolor animacji postępu.
kolor ścieżki Kolor koła kołowego.
SkalaKolor Kolor kolców.
długość skali Długość kolców.
szerokość linii Szerokość koła postępu wykresu kołowego.
lineCap Koniec animacji postępu, możliwe wartości to okrągłe, kwadratowe i dolne.

Wykres kołowy paralaksy o pełnej szerokości

Dodanie powyższego widżetu za pomocą elementu embed code sprawi, że będzie wyglądał prosto. Możesz stworzyć piękny wykres kołowy paralaksy, używając elementu sekcji, jak poniżej:

Animowany widżet wykresu kołowego postępu dla Weebly

Wykres kołowy paralaksy Weebly

Postępuj zgodnie z poniższymi instrukcjami, aby utworzyć wykres kołowy z tłem obrazu paralaksy.

  • Przeciągnij i upuść element przekroju. Kliknij element sekcji w obszarze zawartości, a następnie kliknij opcję „Edytuj tło”.
  • Wybierz obraz jako tło i ustaw efekt przewijania jako paralaksę. Możesz także ustawić kolor tła, a tło wideo jest dostępne tylko dla użytkowników profesjonalnych.
  • Teraz przeciągnij i upuść element kodu osadzania i dodaj kod HTML, jak podano w powyższej sekcji.
  • Opublikuj swoją witrynę i zobacz animowany wykres kołowy z tłem obrazu paralaksy.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów