Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Zmiana wielkości czcionki przy użyciu JavaScript

​Wielu użytkowników Windu prosiło o zamieszczenie krótkiego tutoriala dotyczącego tworzenia narzędzia służącego do zmiany wielkości czcionki na stronie. Zadanie to będzie w miarę proste, w tym celu użyjemny biblioteki jQuery wraz z dodatkiem jFontSize.

IMG_6502

Na początek wchodzimy na stronę projektu (tutaj) i pobieramy plik "jquery.jfontsize-1.0.min .js" z zakładki Download. Następnie logujemy się do naszego Windu, przechodzimy do zakładki grafika, po czym otwieramy katalog naszego szablony graficznego. Znajduje się tam katalogu "js", który otwieramy. Wrzucamy tam zapisany przez nas plik.

Przechodzimy do naszego szablonu graficznego w katalogu "view", dla przykładu main_page.tpl. Tekst ({{eval var=$page->content}}) znajdujący s ię na stronie umieszczamy w elemencie "p" o klasie .tekst, czyli kod będzie wyglądał następująco: przyklad1
W tym bloku cały tekst będzie można powiększyć. Teraz musimy uwtorzyć trzy przyciski - do powiększania, pomniejszania oraz przywracania do domyślnej wielkości czcionki. Kod wygląda następująco:

przyklad2

Po wykonaniu tej czynności przejdźmy do pliku main.js, który również (domyślnie) znajduje się w katalogu "js". Zgodnie z dokumentacją naszego dodatku wystraczy, że teraz dodamy kod tam kod:
$(document).ready(function() {
     $('.tekst').jfontsize( {
            btnMinusClasseId: '#jfontsize-minus',
            btnDefaultClasseId: '#jfontsize-default',
            btnPlusClasseId: '#jfontsize-plus',
            btnMinusMaxHits: 5,
            btnPlusMaxHits: 8,
            sizeChange: 5
    });

}
  • btnMinusClasseId - odpowiada za 'id' przycisku zmienijszającego
  • btnDefaultClasseId - odpowiada za 'id' przycisku przywracającego domyślną wartość
  • btnPlusClasseId - odpowiada za 'id' przycisku zwiększającego
  • btnMinusMaxHits - określa maksymalną ilość 'zmniejszeń' czcionki
  • btnPlusMaxHits - określa maksymalną ilość 'zwiększeń' czcionki
Teraz wszystko powinno działać już nam prawidłowo.
Aby nasze przycisku wyświetlały się bardziej estetycznie możemy skorzystać z Twitter Bootstrap ( tutaj) dodając do naszego przycisku class="btn btn-mini" lub też dodając style CSS.


To już koniec tutoriala. Podsumowując w banalny sposób udało nam się umieścić na naszej stronie przyciski służące do zmiany wielkości czcionki. W ciągu kilku sekund możemy go dostować do własnych potrzeb.