Co z tym jQuery…?

Coś się zmienia – i to samo, prawie że tu i teraz.

Dodałem do mojego projektu jQuery, powoli doczytuje co się skąd może brać, co w jaki sposób działa, jak się coś zmienia i podmienia – i to wręcz na żywo.
Najbardziej podoba mi się to, że to wszystko działa! Aktualnie na ten moment dynamicznie pobieram sobie z kodu HTML z pojedynczych divów  wartościowość (liczbę atomową) danego pierwiastka i wrzucam go do mojego dużego diva z podglądem.
Aby tego dokonać dodałem dla każdego diva z pierwiastkiem specjalne pole atrybutu, które zaczyna się od przedrostka „data-*” i dzięki niemu mogę wstawić tam odpowiednią wartość, którą później pobieram przy pomocy jQuery do zmiennej i podmieniam w odpowiednich miejscach. Do tego dostałem małą podpowiedź odnośnie styli CSS, aby wszystkie małe divy oskryptować jednym wpisem i dodać do niego drugi (po spacji) który będzie zawierał szczegóły dotyczące tylko tego jednego stylu (w tym wypadku koloru) – dzięki Grzegorz.

Wygląda to tak. Div z HTMLa z pojedynczym pierwiastkiem (przykład Wodoru):

<div class="cell niemetal" data-liczba-atomowa="1"><br>H<br><span class="nazwa" id="nazwa">Wodór</span></div

Duży div:

<div class="cell_big" id="big_cell">
   <div id="liczba_atomowa" class="liczba_atomowa">1</div>
   <h1>H</h1>
   <h2 id="nazwa_pierwiastka" class="nazwa_big">Wodór</h2>
   <div class="masa_atomowa"><span class="nazwa">Masa atomowa</span><br><span id="masa_atomowa">1,00794</span></div>
</div>

I wspaniałe jQuery, które jak to się mówi robi robotę… póki co tylko troszkę, ale od czegoś muszę zacząć:

$('div.cell').on({
    'mouseover' : function() {
        var $la = $(this).data('liczba-atomowa');
        $('#liczba_atomowa').html($la);
        $('#wartosciowosc').html($la);
    }
});

Uruchamia się on po najechaniu na dowolny div który jest klasy „cell” (czyli te małe prostokąty z pierwiastkami), pobiera z niego wartość jaka została przypisana polu „data-liczba-atomowa” przypisując ją do zmiennej $la i nastepnie wstawia tą zmienną jako kod HTML (można np jeszcze to wstawiać jako tekst) do znaczników o identyfikatorach odpowiednio #liczba_atomowa oraz #wartosciowosc. I ot cała filozofia – póki co, są to rzeczy proste.

Kolejnym krokiem jest przygotowanie małej bazy danych i pobieranie z niej pozostałych informacji w sposób dynamiczny tak, aby bez odświeżania strony i klikania wszystko się zmieniało wraz z ruchem kursora po tablicy pierwiastków.
Chciałbym jeszcze uporządkować ciut kod HTML i CSS, pododawać w odpowiednie miejsca identyfikatory, zmienić wszystko na jeden styl językowy (angielski/polski), żeby to miało ręce i nogi na właściwych miejscach.

Podgląd oczywiście na http://pierwiastki.romansroda.com/.

Pozdrawiam,
Romek

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *