Wie kann man einen atemberaubenden jQuery Style Switcher erstellen

() translation by (you can also view the original English article)

In diesem Tutorial zeige ich Ihnen, wie Sie mit jQuery und PHP einen stilvollen Switcher erstellen können. Das Endergebnis ist ein unaufdringlicher und anpassungsfähiger stilvolles Switcher, der schnell und einfach zu bedienen ist.

Schritt 1: Der HTML-Code

Zuerst müssen wir unsere grundlegende HTML-Datei erstellen und sie als index.php speichern:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Style Switcher</title>
		<?php
			// Checks for, and assigns cookie to local variable:
			if(!empty($_COOKIE['style'])) $style = $_COOKIE['style'];
			// If no cookie is present then set style as "day" (default):
			else $style = 'day';
		?>

		<!-- StyleSheet -->
		<link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" />

		<!-- jQuery -->
		<script type="text/javascript" src="js/jquery.js"></script>

		<!-- Our plugin -->
		<script type="text/javascript" src="js/styleswitcher.jquery.js"></script>

	</head>
	<body>
		<div id="container">
			<h1>Style-Switcher Example</h1>
			<ul id="nav">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Products</a></li>
				<li><a href="#">Links</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<div id="banner"></div>
			<div id="content">
				<h2>NETTUTS Tutorial Example</h2>
				<p>Page content...</p>
			</div>
			<div id="foot">
				<p>Footer stuff...</p>
			</div>

			<!-- StyleSheet selection: -->
			<div id="style-switcher">
				<h4>Choose your style:</h4>
				<ul>
					<li id="day"><a href="style-switcher.php?style=day">Day</a></li>
					<li id="night"><a href="style-switcher.php?style=night">Night</a></li>
				</ul>
			</div>

		</div>

		<script type="text/javascript">
			$('#style-switcher a').styleSwitcher(); // Calling the plugin...
		</script>

	</body>
</html>

Sie werden sehen, dass es ein PHP-Code, der gerade unter dem Titel-Attribute im Header der Seite befindet. Es ist sehr einfach - alles, was hier los ist, ist dies ein Test für das Vorhandensein von Cookies «style» genannt ist - wenn es vorhanden ist, ist es an die aktuellen Variablen zugewiesen wird (auch als «style»), und wenn das Cookie nicht vorhanden ist, das Thema vorbelegt ("day") auf die Variable $style. Dann wird diese Variable in den href Attribut-Referenzen genannt werden (href="css/.sss"/?php echo $style?>.css").

Sie werden sehen, dass die Div-Style-Switcher-Ebene oben in unserem HTML-Code angezeigt wird. Keine Notwendigkeit, fügen Sie es mit Hilfe von JavaScript, da die Methode, die wir verwenden, um den Schalter zu Arbeitsstil ermöglicht es, auch wenn JavaScript deaktiviert ist. Zwei Links (und Day und Night) führen direkt in eine Datei namens style-switcher.php mit zusätzlichen Zeichenfolge in der Abfrage ein relevantes Thema zu definieren (z.B. href=„style-switcher.php?style=day“).

Ich habe das Plugin auch für jQuery styleSwitcher benannt. Es ist noch in der Entwicklungsphase (na ja, sind wir für den Moment gemacht, wenn Sie den Artikel zu lesen), so halten Sie auf! ... Wir werden dieses Plugin in Schritt 4 der Lektion schreiben.

Schritt 2: CSS

Jetzt müssen wir ein paar CSS-Stylesheets für unseren HTML-Code erstellen. Ich habe beschlossen, nur zwei Tabelle zu schaffen - du wirst das Thema "Day" haben, und das andere wird das Thema "Night" haben, und ich habe sie entsprechend genannt. (day.css & night.css)

Day Thema

Night Thema

Es empfiehlt sich, einen Stil zu erstellen und dann alle Selektoren in eine andere Tabelle zu kopieren. Alles, was Sie ändern müssen, ist das Hinzufügen anderer CSS-Regeln und -Konstrukte. Natürlich können Sie so viele Tabellen haben, wie Sie möchten, aber in dieser Lektion verwenden wir nur zwei. Darüber hinaus sind day und night gut kombiniert!

day.css:

#dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */

/* Quick Reset */
body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
	font-weight: normal;
}

/* General / Header */
body {background: #98beeb url(../img/day-body-bg.jpg) repeat-x; }
#container {
	width: 60%;
	margin: 0 auto;
	min-width: 400px;
	max-width: 800px;
	position: relative;
}
h1 {
	text-align: left;
	text-transform: uppercase;
	color: white;
	font-size: 1.4em;
	padding: 45px 30px 10px 30px;
}

/* Navigation */
#nav {
	padding: 5px 5px 0 0;
	overflow: hidden;
}
#nav li {display: inline;}
#nav a {
	float: left;
	color: #6195ce;
	font-weight: bold;
	text-decoration: none;
	padding: 3px 6px;
	margin-left: 5px;
	background: white;
}
#nav a:hover {color: #2c5a8c;}

/* Banner */
#banner {
	height: 125px;
	background: url(../img/day-banner.jpg) center;
	border: 5px solid white;
	clear: both;
}

/* Content Area */
#content {
	border: 10px solid white;
	background: white;
	color: #2c5a8c;
	margin: 5px 0;
}
#content a {font-weight: bold;}
#content a:hover {text-decoration: underline;}
h2 {
	padding: 0.3em 0;
	font-size: 1.4em;
}
p {padding: 0.3em 0;}

/* Footer */
#foot {
	background: white;
	color: #1f3a57;
	text-align: center;
	border: 10px solid white;
	clear: both;
}
#foot a {
	text-decoration: none;
	font-weight: bold;
	color: #2c5a8c;
}
#foot a:hover {text-decoration: underline;}

/* Style-Switcher */
#style-switcher {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	height: 34px;
	background: #79a3cc url(../img/day-ss-bg.jpg);
	border-bottom: 1px solid white;
}
#style-switcher ul {
	border-right: 1px solid white;
	float: right;
}
#style-switcher h4 {
	display: inline;
	color: #153c67;
	font-weight: bold;
	line-height: 34px;
	padding: 0 10px;
	float: left;
	border-left: 1px solid white;
}
#style-switcher li {display: inline;}
#style-switcher li a {
	float: left;
	line-height: 26px;
	color: white;
	background: #90a6bb;
	text-decoration: none;
	padding: 0 13px;
	display: inline;
	margin: 4px 4px 4px 0;
}
#style-switcher li a:hover {background: #3a5a7c;}

night.css:

#dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */

/* Quick Reset */
body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
	font-weight: normal;
}

/* General / Header */
body {
	font-family: Calibri,"Arial Narrow",Arial,Sans-Serif;
	background: #072952 url(../img/night-body-bg.jpg) repeat-x;
}
#container {
	width: 60%;
	margin: 0 auto;
	min-width: 400px;
	max-width: 800px;
	position: relative;
}
h1 {
	text-align: left;
	text-transform: uppercase;
	color: white;
	font-size: 1.4em;
	padding: 45px 30px 10px 30px;
	font-family: "Times New Roman", Times, serif;
}

/* Navigation */
#nav {
	padding: 5px 5px 0 0;
	overflow: hidden;
}
#nav li {display: inline;}
#nav a {
	float: left;
	color: #010e2e;
	font-weight: bold;
	text-decoration: none;
	padding: 8px 6px 3px 6px;
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: 700;
	margin-left: 5px;
	background: white url(../img/night-nav-bg2.jpg) repeat-x;
}
#nav a:hover {color: #2c5a8c;}

/* Banner */
#banner {
	height: 125px;
	background: url(../img/night-banner.jpg) center;
	border: 5px solid white;
	clear: both;
}

/* Content Area */
#content {
	color: white;
	margin: 20px 0;
	padding: 5px 0;
	border-top: 4px double white;
	border-bottom: 4px double white;
	font-family: "Times New Roman", Times, serif;
}
#content a {font-weight: bold;}
#content a:hover {text-decoration: underline;}
h2 {
	padding: 0.3em 0;
	font-size: 1.4em;
}
p {padding: 0.3em 0;}

/* Footer */
#foot {
	color: white;
	font-size: 0.8em;
	clear: both;
}
#foot p {
	text-align: center;
	padding: 0;
}
#foot a {
	text-decoration: none;
	font-weight: bold;
	color: white;
}
#foot a:hover {text-decoration: underline;}

/* Style-Switcher */
#style-switcher {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	height: 34px;
}
#style-switcher ul {float: left;}
#style-switcher h4 {
	display: inline;
	color: white;
	font-weight: bold;
	line-height: 34px;
	padding: 0 10px;
	float: left;
}
#style-switcher li {display: inline;}
#style-switcher li a {
	float: left;
	line-height: 34px;
	color: white;
	text-decoration: none;
	padding: 0 4px;
	margin-left: 5px;
	display: inline;
}
#style-switcher li a:hover {
	background: white;
	color: #13181c;
	background: white url(../img/night-ss-bg.jpg) repeat-x left bottom;
}

In der Tatsache ist es keine CSS-Lektion, daher werde ich nicht auf alle Fragen antworten, aber wenn Sie sie haben, zögern Sie bitte nicht, sie in den Kommentaren zu stellen. Und ja, ich weiß, dass die Eigenschaft min-width in älteren Browsern nicht unterstützt wird! ;)

Schritt 3: style-switcher.php

Hier schreiben wir die Grundfunktionen des Style-Switches. In der Tat sind dies nur ein paar Zeilen von sehr einfachem PHP-Code. Sie müssen eine neue Datei namens "style-switcher.php" erstellen und folgendes hineinkopieren:

<?php
	$style = $_GET['style'];
	setcookie("style", $style, time()+604800); // 604800 = amount of seconds in one week
	if(isset($_GET['js'])) {
		echo $style;
	} else {
		header("Location: ".$_SERVER['HTTP_REFERER']);
	}
?>

Der obige Code weist also der Variablen $ style den Wert der Variablen GET $style zu. Mit anderen Worten, das Skript übernimmt den Wert der style-Eigenschaft aus der Abfragezeichenfolge (style-switcher.php? style =day). Dann erstellt er einen Cookie (für eine Woche), genannt "style" - wir können diesen Cookie über unsere Hauptindex.php-Datei mit dem in Schritt # 1 erstellten Code anfordern (denken Sie daran, das ist ein kleiner Teil des PHP in head?). Das Skript überprüft dann, ob "js" zur Abfragezeichenfolge hinzugefügt wurde. Wenn dies der Fall ist, erfahren wir, dass die Anfrage mit JavaScript (das wir noch nicht erstellt haben) aufgetreten ist. Die else-Bedingung ist erfüllt, wenn der Benutzer JavaScript nicht aktiviert und die Umleitung verwendet (dh die Seite, von der sie gerade stammt) - sie wird klarer, sobald wir den jQuery-Code schreiben!

Schritt 4: Der jQuery-Code

Wenn du willst, kannst du hier aufhören! ... Unsere Lösung wird gut funktionieren, aber wie ich in der Einleitung gesagt habe, werden wir es mit jQuery noch steiler machen! Wir werden nicht nur dem Benutzer erlauben, sein Thema zu ändern, ohne die Seite zu aktualisieren, sondern wir werden auch einen coolen Fading-Effekt hinzufügen ... Ich meine, was wäre das für die Lektion von jQuery ohne den Effekt des Verblassens!?!?

Dies ist alles möglich, ohne ein Plug-in zu erstellen, aber ich denke, dass dies für alle von Ihnen eine gute Übung sein wird, und ermöglicht Ihnen auch, den Code schnell und einfach anzupassen und weiterzugeben.

Zuerst erstellen wir eine Datei namens "styleswitcher.jquery.js".

Das Erstellen eines neuen Plugins in jQuery ist sehr einfach. Sie müssen nur den folgenden Code schreiben:

1	jQuery.fn.styleSwitcher = function(){
2	// The code goes here...
3	}

Also zuerst wollen wir festlegen, was passiert, wenn Sie einen der Links-Stylesheets drücken (dh diejenigen Verbindungen, die in der Schicht aus div#style-switcher sind):

/* "this" refers to each instance of the selected element,
 * So, if you were to call the plugin like this:
 * $('a').styleSwitcher(); then the following would occur
 * when clicking on any anchor within the document:
 */

$(this).click(function(){
	// We're passing this element object through to the
	// loadStyleSheet function.
	loadStyleSheet(this);
	// And then we're returning false.
	return false;
});

loadStyleSheet:

Jetzt müssen wir die Funktion loadStyleSheet schreiben:

function loadStyleSheet(obj) {

	// Append new div to body:
	$('body').append('<div id="overlay" />');

	// Give body a height of 100% (to fix IE6 issue):
	$('body').css({height:'100%'});

	// Select newly created div and apply some styles:
	$('#overlay')
		.css({
			display: 'none',
			position: 'absolute',
			top:0,
			left: 0,
			width: '100%',
			height: '100%',
			zIndex: 1000,
			background: 'black url(img/loading.gif) no-repeat center'
		})

		// Now fade in the div (#overlay):
		.fadeIn(500,function(){

			// The following will happen when the div has finished fading in:

			// Request PHP script (obj.href) with appended "js" query string item:
			$.get( obj.href+'&js',function(data){

				// Select link element in HEAD of document (#stylesheet) and change href attribute:
				$('#stylesheet').attr('href','css/' + data + '.css');

				// Check if new CSS StyleSheet has loaded:
				cssDummy.check(function(){

					// When StyleSheet has loaded, fade out and remove the #overlay div:
					$('#overlay').fadeOut(500,function(){
						$(this).remove();
					});
				});
			});
		});
}

Ich hoffe, dass die Kommentare diesen Prozess ausreichend erklärt haben. Sie werden feststellen, dass wir im Moment eine undefinierte Funktion aufrufen (cssDummy.check()). Aber mach dir keine Sorgen, darüber im nächsten Schritt ...

cssDummy:

Wir brauchen einen Weg, um zu überprüfen, ob das Stylesheet geladen ist. Wenn dies der Fall ist, verstecken wir die überlappende Ebene, aber wenn dies nicht der Fall ist, müssen wir die Überprüfung fortsetzen, bis sie startet. Ich habe im Netzwerk eine zuverlässige Testmöglichkeit gefunden. Es beinhaltet die Überprüfung der Breite des Dummy-Elements. Die Breite des Elements in CSS bestimmt werden - und somit wird die Zellenbreite auf die Breite in der CSS definiert gleich sein, wenn die Tabelle geladen. Ich hoffe, Sie werden jetzt verstehen, warum wir die "# dummy-element" -Regel in jede CSS-Datei einfügen mussten ...

Also, hier ist es:

var cssDummy = {
	init: function(){
		// Appends "dummy-element" div to body:
		$('<div id="dummy-element" style="display:none" />').appendTo('body');
	},
	check: function(callback) {

		// Checks if computed with equals that which is defined in the StyleSheets (2px):
		if ($('#dummy-element').width()==2) callback();

		// If it has not loaded yet then simple re-initiate this
		// function every 200 milliseconds until it had loaded:
		else setTimeout(function(){cssDummy.check(callback)}, 200);
	}
}

Am Ende unseres Plugins rufen wir die Funktion cssDummy.init auf.

1	cssDummy.init();

Alles ist fertig! Jetzt sieht das Plugin so aus:

jQuery.fn.styleSwitcher = function(){
	$(this).click(function(){
		loadStyleSheet(this);
		return false;
	});
	function loadStyleSheet(obj) {
		$('body').append('<div id="overlay" />');
		$('body').css({height:'100%'});
		$('#overlay')
			.css({
				display: 'none',
				position: 'absolute',
				top:0,
				left: 0,
				width: '100%',
				height: '100%',
				zIndex: 1000,
				background: 'black url(img/loading.gif) no-repeat center'
			})
			.fadeIn(500,function(){
				$.get( obj.href+'&js',function(data){
					$('#stylesheet').attr('href','css/' + data + '.css');
					cssDummy.check(function(){
						$('#overlay').fadeOut(500,function(){
							$(this).remove();
						});
					});
				});
			});
	}
	var cssDummy = {
		init: function(){
			$('<div id="dummy-element" style="display:none" />').appendTo('body');
		},
		check: function(callback) {
			if ($('#dummy-element').width()==2) callback();
			else setTimeout(function(){cssDummy.check(callback)}, 200);
		}
	}
	cssDummy.init();
}

Wir können das jQuery-Plugin wie folgt aufrufen:

1	$('#style-switcher a').styleSwitcher();

Ende!

Wenn Sie sich über die Dateistruktur nicht sicher sind, laden Sie die Quelldateien herunter, um sie zu sehen. Ich hoffe, dir hat dieses Tutorial gefallen. Wie immer, wenn Sie Fragen haben, zögern Sie nicht, sie in den Kommentaren zu fragen! Wenn Ihnen unser Artikel gefallen hat, teilen Sie ihn bitte mit Digg!