Rozwijana treść

19 lutego, 2012 w kategoriach: Web developing, Ajax, JavaScript, Jquery, Podstawy

10,882 1
Dane:
  • Czas pracy: 15 minut
  • Poziom: Podstawowy
Opis:

Poradnik przedstawiający jak wykonać treść rozwijającą po kliknięciu.

Pliki do pobrania

Pokaż/Ukryj wszystko

Witam w następnym poradniku poświęconym językowi Javascript. W tym tutorialu opiszę jak uzyskać efekt dynamicznej treści mniej więcej jak to jest zrobione na tutorials24.pl. Będzie to polegało na tym, że po wejściu na stronę cała treść zawarta w kontenerze ‚content’ jest ukryta. Dopiero po naciśnięciu odpowiedniego nagłówku będzie służyło za rozwinięcie jego treści. Nie będę omawiał tutaj kodu HTML oraz CSS, a skupie się raczej na kodzie JavaScript, zawartym w pliku skrypt.js.
Efekt końcowy:
Alt zimage1

Zapraszam do kroku kolejnego, gdzie utworzymy kod HTML ;)


Wydawnictwo Strefa Kursów

W sekcji head importujemy nasz plik css, skrypt, a także biblioteki jquery. Do tego nadajemy nazwę stronie.

<!DOCTYPE html>
<html>
<head>
<title>Rozwijana treść</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="skrypt.js"></script>
</head>

Przejdźmy teraz do sekcji body, gdzie damy przykładowy nagłówek oraz kontener o klasie ‚content’, a w nim poszczególne nagłówki i paragrafy.

<body>
<h1>Poradnik dla Tutorials24.pl</h1>
<div class="content">

<h3>Krok 1 - Prolog</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl erat, consequat non ultrices ut, pharetra vel lectus. Donec non felis diam, at tempus felis. Nulla et euismod felis. Sed ut suscipit eros.
</div>

<h3>Krok 2 - Kod HTML (index.html)</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl erat, consequat non ultrices ut, pharetra vel lectus. Donec non felis diam, at tempus felis. Nulla et euismod felis. Sed ut suscipit eros.
</div>

<h3>Krok 3 - Kod CSS (style.css)</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl erat, consequat non ultrices ut, pharetra vel lectus. Donec non felis diam, at tempus felis. Nulla et euismod felis. Sed ut suscipit eros.
</div>

<h3>Krok 4 - Kod Javascript (skrypt.js)</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl erat, consequat non ultrices ut, pharetra vel lectus. Donec non felis diam, at tempus felis. Nulla et euismod felis. Sed ut suscipit eros.
</div>
</div>

Kończymy sekcję body oraz html.

</body>
</html>

Prosty kod HTML został już przez nas stworzony. Przejdźmy teraz do ostylowania naszej strony w pliku style.css ;)

Ostylujmy nagłówek h1 zawarty w sekcji body.

h1 {
text-align: center;
color: #58584c;
}

Następnie przejdźmy do kontenera ‚content’ oraz zawartych w nim pozostałych elementów.

.content {
width: 800px;
margin: 0 auto;
}
.content h3 {
background: url(img/plus.png) no-repeat right center #fdd154;
border: 1px solid #EEEEEE;
color: #58584c;
display: block;
margin: 5px 0 0 !important;
padding: 0.5em 1em;
}
.content p {
font-size: 1.2em;
line-height: 1.4em;
padding: 10px;
}
.content h3.active {
background: url(img/delete.png) no-repeat right center #fccb40;
}
.content h3:hover {
background-color: #fccb40;
color: #717150;
border: 1px solid #EEEEEE;
cursor: pointer;
}
.content div {
padding: 15px;
}

Nasza strona została już ostylowana. Przejdźmy teraz do kroku ostatniego, gdzie utworzymy nasz kod javascript.

Tworzymy plik ‚skrypt.js’, a w nim wpisujemy kilka prostych linijek.
Gdy strona jest już w pełni załadowana innymi słowy gotowa przystąpimy do wywołania funkcji.

$(document).ready(function() {

Odwołujemy się do klasy content (poprzedzenie ‚.’), a w niej do elementu div, czyli naszej treści. Domyślnie chcemy ją ukryć, a więc posłużymy się tutaj funkcją hide().

$('.content>div').hide();

Dalej odwołujemy się do elementu h3, czyli naszego nagłówka. Po kliknięciu na niego następuje wywołanie funkcji.

$('.content>h3').click(function() {

Przywołujemy element, następny po nagłówku, czyli nasz div i nadajemy mu funkcję slideToggle(). Funkcja ta krótko mówiąc ukrywa element, który jest widoczny lub pokazuje ten który jest ukryty.

$(this).next().slideToggle('fast');

I nadajemy klasę ‚active’ naszemu nagłówkowi.

$(this).toggleClass('active');

Kończymy nasze dwie funkcje.

});
});

Cały kod powinien wyglądać tak:

$(document).ready(function() {
$('.content>div').hide();
$('.content>h3').click(function() {
$(this).next().slideToggle('fast');
$(this).toggleClass('active');
});
});

Gratuluje! Właśnie stworzyłeś dynamicznie rozwijaną treść, która bardzo często stosowana jest na stronach internetowych min. na tutorials24.pl. :)

Pozdrawiam, Fisz ;)

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dyskusja (1 wypowiedź)

Dodaj odpowiedź

Dodaj komentarz