search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS][jQuery] Zmienny widok strony, czyli różny układ modułów

[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.


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>

Jak widać umiejscowiłem w jednym z modułów link do zmiany szerokości, który będzie spełniał swoją funkcję po odpowiednim okodowaniu go z użyciem biblioteki jQuery. Co nastąpi w dalszej fazie artykułu.
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;
}

Tutaj ważne jest to, że #sidebar ma ustawienie float: right, kiedy #zwartosc i #modul mają ustawienie na float: left. Dzięki temu, sidebar się przesunie na dół w momencie rozszerzenia sekcji zawartosc.
Teraz pora na kod JavaScript, ktory będzie odpowiedzialny za zmianę szerokości sekcji "zawartosc"

$(document).ready(function() {
    $("#zmien").click(function() {
        $("#zawartosc").toggleClass("szerzej");
    });
});

I to by było na tyle.
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