[CSS][jQuery] Zmienny widok strony, czyli różny układ modułów
Po dłuższej przerwie postanowiłem zaprezentować kolejny ciekawy trick związany z wykorzystaniem biblioteki jQuery. Jest nim sposób na zmienne ustawianie pozycji modułów strony. Podobny efekt można zauważyć na stronie Youtube.
- Początkowe ułożenie modułów
- Końcowe ułożenie modułów
Na początku należy zbudować odpowiednią strukturę strony, która dla tego przykładu wygląda następująco:
<div id="header"> </div> <div id="tresc"> <div id="zawartosc"> <a id="zmien" href="#">Zmień ułożenie</a> </div> <div id="sidebar"> </div> <div id="modul"> </div> </div> <div id="stopka"> </div> |
Teraz pora na kod CSS:
#header, #zawartosc, #modul, #sidebar, #stopka { margin:10px 0px; padding:30px; } #header { width:900px; margin:0px auto; background: #981a1a; } #tresc { width:960px; margin:0px auto; overflow:hidden; } #zawartosc { width:540px; float:left; background: #746666; } #modul { width:540px; float:left; background: #981a1a; } #sidebar { width:280px; margin-left:20px; float:right; background: #981a1a; } #stopka { width:900px; margin:0px auto; background: #981a1a; } #zawartosc.szerzej { width:900px; } |
Teraz pora na kod JavaScript, ktory będzie odpowiedzialny za zmianę szerokości sekcji "zawartosc"
$(document).ready(function() { $("#zmien").click(function() { $("#zawartosc").toggleClass("szerzej"); }); }); |
Należy pamiętać o tym, aby dołączyć bibliotekę jQuery do kodu strony, aby skrypt, który napisaliśmy, mógł zadziałać.
Tutaj możesz sprawdzić demo z tego artykułu: Dynamiczna zmiana pozycji modułów z użyciem jQuery