[CSS][jQuery] Zmienny widok strony, czyli różny układ modułów
This post is 17 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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
About the author
