Kilka tygodni temu, na łamach cyklu Webmaster pisałem na temat mechanizmu localStorage, który niejako rozwija się równolegle wraz z HTML5.

Tamten wpis, był raczej stricte nastawiony na teorię. Dzisiejszy post, który również dotyka tego mechanizmu, opisze jego bardziej praktyczne zastosowanie. Obszarem manewrów, będzie oczywiście sam blog, a konkretniej przyciski umożliwiające zmianę wielkości tekstu, które od jakiegoś pół tygodnia znaleźć możecie przy każdym z tekstów.

Cel

Naszym celem, jest przygotowanie trzech przycisków A A A. Każdy z nich, cechować będzie się inną wielkością czcionki - odpowiednio: (oczywiście są to moje wartości, które bez problemu możecie zastąpić własnymi)

• 11px
• 13px (wartość domyślna na stronie)
• 15px

Po kliknięciu na dowolny z przycisków, powinien zmienić się rozmiar tekstu wyświetlanego w ramach wpisu, wraz z innymi wybranymi elementami zawartymi w tekście (p, span, strong, em itd. - wedle Waszej woli).

Zmiany mają być również widoczne, po przejściu do dowolnego innego artykułu, a nawet zamknięciu przeglądarki.

Rozszerzenie będzie zrealizowane metodą progresywnego ulepszania. Dla wszystkich przeglądarek, które mają włączony JavaScript i obsługują mechanizm localStorage, zostanie wykonany odpowiedni kod, po załadowaniu strony.

Środki do realizacji celu: obiekt localStorage z JavaScript oraz framework jQuery.

Realizacja

Zgodnie z zasadą progresywnego ulepszania, cały mechanizm zostanie napisany w JavaScripcie co automatycznie uzależnia możliwość jego użycia do włączonej obsługi tego języka skryptowego.

Mechanizm localStorage, funkcjonuje w przeglądarkach stosunkowo krótko (na dobre zaczął się upowszechniać rok - dwa temu). Osobiście postanowiłem uhonorować świadomych technicznie użytkowników celowo nie tworząc rozwiązania zastępczego.

Gdyby jednak takie rozwiązanie było konieczne, można bez problemu tak zmodyfikować kod, by w razie potrzeby korzystał z popularnych ciasteczek.

Po wyjaśnieniu kwestii teoretycznych, przejdźmy do kodu. Oto cały - 24 liniowy listing:

$(document).ready(function(){
    if(!window.localStorage){
        return;
    }
    function SetFontSize(sFontSize){
        $("article > div")
            .find($("p,em,strong,q,table th, table td,a,span"))
            .css("font-size", sFontSize);    
    }    
    $("<div><p>" + 
        "<a style='font-size: 11px;' href='#'>A</a> | " +
        "<a style='font-size: 13px;' href='#'>A</a> | " +
        "<a style='font-size: 15px;' href='#'>A</a></p></div>")
        .appendTo($("article > header"))
        .find("a")
            .click(function(oEvent){
                oEvent.preventDefault();
                localStorage.setItem("fontsize", $(this).css("font-size"));
                SetFontSize($(this).css("font-size"));
            });
    if(null !== localStorage.getItem("fontsize")){
        SetFontSize(localStorage.getItem("fontsize"));
    }
});

Zacznijmy od początku. Uruchamiamy kod w momencie załadowania strony (1), a następnie sprawdzamy czy dostępny jest mechanizm localStorage. Jeśli nie, to kończymy przetwarzanie (2-4).

Kolejnym krokiem, będzie zdefiniowanie funkcji pomocniczej SetFontSize (5-9), która ustawiać będzie wielkość czcionki dla zadanych elementów w naszym artykule. Oczywiście w moim przypadku zmieniać będę tylko wielkość czcionki dla elementów artykułu, nic nie stoi jednak na przeszkodzie by zmienić wielkość czcionki na całej stronie - wszystko jest kwestią wykorzystania odpowiednich selektorów.

W liniach 10-13, przygotowujemy kod do wstawienia na stronę - zwykły prosty div z trzema odnośnikami - każdej o innej wielkości (patrz założenia). Ominąłem tutaj dodatkowe elementy CSS, np. odpowiednią wartość display itp. Te elementy musicie już dopasować indywidualnie do własnych potrzeb.

W linii 14, decydujemy się by dodać powyższy kod HTML do nagłówka w naszym artykule.

W liniach 15-20, odnajdujemy się wszystkie elementy typu a wewnątrz naszego diva, a następnie dla każdego z nich przypisujemy to samo zdarzenia obsługi kliknięcia. Dla każdego kliknięcia, blokujemy jego domyślną akcję (17) oraz ustawiamy właściwości fontsize w pamięci lokalnej przeglądarki (18).

Na samym końcu zdarzenia, zmieniamy rozmiar czcionki dla wszystkich interesujących nas elementów za pomocą wcześniej utworzonej funkcji SetFontSize. Jeśli jakieś fragment kodu, związanego z obsługą zdarzeń budzi Twój niepokój, sprawdź ten wpis.

Na zakończenie kodu, sprawdzamy czy użytkownik nie ma zapisanej właściwości fontsizew pamięci przeglądarki - jeśli tak, aplikujemy odpowiednią wielkość czcionki, za pomocą znanej już metody SetFontSize.

Efekt, powinien prezentować się mniej więcej tak jak na górze tego wpisu oraz na screenie:)

Data ostatniej modyfikacji: 27.03.2012, 08:53.