Demo:
  • Sun themes

  • Fly themes

  • Coffee themes

  • Nature themes

Zmiana stylu strony to zadanie głównie dla administratorów strony. Jednak figurują w sieci takie strony, które dają możliwość użytkownikowi wybór szaty graficznej. Nie jest to często spotykaną opcją, ale są pewne kategorie stron, które nadają się do tego idealnie.
Poniżej prezentuję prosty, ale praktyczny przełącznik pomiędzy różnymi stylami strony.

Struktura strony

Inaczej będzie wyglądać układ strony dla panelu administracyjnego użytkownika, a inaczej dla galerii, czy strony w całości składającej się z tekstu. Jednak działanie jest w wielu przypadkach bardzo podobne. Poniższy układ jest w formie listy, właśnie z wyborem schematu.

<div class="ewd_themes default">
	<ul class="ewd_themes_list">
		<li id="ewd_sun" class="ewd_themes_switch">
			<div class="into">
				<p>
					<span class="ewd_switch_ico"><i class="fa fa-sun-o fa-2x"></i></span>
					<h2>Sun themes</h2>
				</p>
			</div>
		</li>
		<li id="ewd_balloon" class="ewd_themes_switch">
			<div class="into">
				<p>
					<span class="ewd_switch_ico">
						<i class="fa fa-send fa-2x"></i>
					</span>
					<h2>Fly themes</h2>
				</p>
			</div>
		</li>
		<li id="ewd_coffee" class="ewd_themes_switch">
			<div class="into">
				<p>
					<span class="ewd_switch_ico">
						<i class="fa fa-coffee fa-2x"></i>
					</span>
					<h2>Coffee themes</h2>
				</p>
			</div>
		</li>
		<li id="ewd_see" class="ewd_themes_switch">
			<div class="into">
				<p>
					<span class="ewd_switch_ico">
						<i class="fa fa-tree fa-2x"></i>
					</span>
					<h2>Nature themes</h2>
				</p>
			</div>
		</li>

	</ul>
</div>

Style CSS

Zarządzanie stylami jest bardzo proste. Każdy schemat posiada unikają nazwę. W tym przypadku („ewd_sun, ewd_balloon, ewd_coffee, ewd_see”).
Mając już unikalną nazwę schematu do znaczników typu h1, p, i, itd… wpisujemy dowolne style.

.ewd_themes
{
	width:900px;
	height:600px;
}
ul.ewd_themes_list
{
	padding:0;
	margin:0;
}
ul.ewd_themes_list li
{
	list-style:none;
	padding:0;
	margin:0;
	height:150px;
	border-bottom:1px #ddd solid;
}

ul.ewd_themes_list li:last-child
{
	border:0;
}
ul.ewd_themes_list li .into
{
	width:80%;
	margin:0 auto;
	padding: 27px 0;
}
ul.ewd_themes_list li .into h2
{
	line-height:44px;
}
ul.ewd_themes_list li .into span
{
	width:60px;
	height:60px;
	display:table;
	float:left;
	background:#2d3e50;
	margin-right:20PX;
}
ul.ewd_themes_list li .into span i
{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.default h2, .default i
{
	color:#1bbc9b;
}
.default
{
	background:url("img/main-hand.jpg");
}
ul.ewd_themes_list li:hover
{
	background-color:rgba(45,62,80, 0.6);
}
.ewd_sun
{
	background:url("img/sun.jpg");
}

.ewd_balloon
{
	background:url("img/balloon.jpg");
}
.ewd_coffee
{
	background:url("img/coffee.jpg");
}
.ewd_see
{
	background:url("img/see.jpg");
}
.ewd_sun h2, .ewd_sun i
{
	color:#f5c71a
}
.ewd_balloon h2, .ewd_balloon i
{
	color:#0072bb;
}
.ewd_coffee h2, .ewd_coffee i
{
	color:#a57164;
}
.ewd_see h2, .ewd_see i
{
	color:#3ab09e;
}

Skrypt działania

Całość dopełnia prosty skrypt jQuery.

$('.ewd_themes_switch').click(function() {
var idw = $(this).attr('id');
$('.ewd_themes').removeClass('ewd_sun ewd_coffee ewd_balloon ewd_see default');	
$('.ewd_themes').addClass(idw);
});

Każdy szablon posiada swój id. W skrypcie tym id ten przypisywany jest do zmiennej idw. Po wybraniu pozycji z listy kasowane są wszystkie klasy i w to miejsce dodawana jest nowa klasa z aktualnie wybranym szablonem.
Sktrypt można rozbudowywać i to bardzo mocno. Obecnie jest to najprostsza forma, aczkolwiek bardzo praktyczna.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code