[CSS][jQuery] Zmienny widok strony, czyli różny układ modułów
Ten wpis ma 16 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
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.
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
O autorze
