Ein umfassender Leitfaden für benutzerdefinierte jQuery-UI-Widgets mit Theming

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

jQuery UI ist eine Open-Source-Bibliothek von Schnittstellenkomponenten, die Interaktionen, Animationseffekte und gebrauchsfertige Widgets bietet. jQuery UI basiert auf der jQuery-JavaScript-Bibliothek und ist themenfähig, was die Integration der jQuery-UI für Entwickler jeder Kenntnisstufe in ihre Webseiten und Anwendungen einfach macht.

In diesem Tutorial erfahren Sie, wie Sie jQuery-UI-Widgets mit einem Design versehen und benutzerdefiniertes CSS schreiben, damit Sie Ihr eigenes jQuery-UI-Design erstellen können. Ein grundlegendes Verständnis von CSS und JavaScript wird Ihnen helfen, dieses Tutorial erfolgreich abzuschließen.

Verwenden Sie das Inhaltsverzeichnis unten, um die Abschnitte des Tutorials zu finden, die Sie lesen möchten.

Nichtmitglieder bitte beachten: Links zum Inhaltsverzeichnis funktionieren nur, wenn Sie bei einem Tuts+ Premium-Mitgliedskonto angemeldet sind.

Tutorial-Informationen

Tutorial-Schritte

Widget-Abschnitte

Abschnitte mit benutzerdefinierten Symbolen

Referenz für benutzerdefinierte CSS-Stylesheets

Über dieses Tutorial

In diesem Tutorial wollte ich zeigen, wie Sie jQuery-UI-Widgets anpassen und gestalten können, um sie an einen bestimmten Designstil anzupassen. Die Widgets in den Quelldateien-Demos wurden thematisch an den Stil der Nettuts+ Freelance Jobs Board-Grafik angepasst.

Die zip-Datei der Tutorial-Quelldateien enthält auch einige zusätzliche Demos, um verschiedene Optionen und Einstellungen für jQuery-UI-Akkordeon-, Tabs-, Datepicker- und Slider-Widgets zu zeigen.

Dieses Tutorial enthält ein Inhaltsverzeichnis, damit Sie die gewünschten Abschnitte schnell finden können. Das Tutorial enthält auch viele der verfügbaren gebrauchsfertigen Widgets der jQuery-Benutzeroberfläche wie Accordion, Tabs, Buttons, Dialog und Datepicker. Da das Tutorial mehrere jQuery-UI-Widgets behandelt, wurde es so eingerichtet, dass Sie auswählen können, für welche Widgets Sie ein benutzerdefiniertes Design erstellen möchten.

Thematische jQuery-Benutzeroberfläche

Es gibt mehrere Möglichkeiten, jQuery-UI-Widgets und -Plugins zu thematisieren:

Sie können ein Design mit jQuery UI ThemeRoller erstellen und herunterladen
Sie können eines der standardmäßigen ThemeRoller-Themes herunterladen und das CSS ändern
Sie können Ihr eigenes Thema von Grund auf neu erstellen, indem Sie vollständig benutzerdefiniertes CSS schreiben

Obwohl es möglich ist, ein jQuery-UI-Theme zu erstellen, indem Sie vollständig benutzerdefiniertes CSS schreiben, habe ich festgestellt, dass es einfacher und schneller ist, mit einem Standard-ThemeRoller-Theme zu beginnen, das dem gewünschten Erscheinungsbild nahe kommt, und dann das CSS entsprechend zu ändern Deine Bedürfnisse. Indem Sie das CSS eines standardmäßigen ThemeRoller-Designs stark ändern, können Sie ein benutzerdefiniertes Design erstellen, ohne komplett von vorne beginnen zu müssen.

Ich habe festgestellt, dass es einfacher und schneller ist, das CSS-Stylesheet eines standardmäßigen ThemeRoller-Themes zu ändern, als ein benutzerdefiniertes CSS-Theme von Grund auf neu zu schreiben.

Über ThemeRoller

ThemeRoller ist eine Webanwendung, die von Filament Group, Inc. für jQuery UI entworfen und entwickelt wurde. Die Themeroller-Anwendungsoberfläche ist in Abschnitte wie Header / Symbolleiste, Inhalt, anklickbare Zustände usw. unterteilt, mit denen Sie grundlegende, benutzerdefinierte CSS-Designs für jQuery UI-Widgets und -Plugins entwerfen können.

Es gibt auch eine Themengalerie mit vorgefertigten Themen, wenn Sie kein eigenes benutzerdefiniertes jQuery-UI-Thema entwerfen möchten. Weitere Informationen zur Webanwendung jQuery UI ThemeRoller finden Sie hier.

Theming jQuery UI – Best Practices

Wenn es um das Thema jQuery UI geht, listet die jQuery UI-Website einige "Best Practices" auf, die zu befolgen sind, darunter:

Alle Klassen sollten mit dem .ui-Namespace beginnen
Alle Stile sollten spezifisch für den .ui-Namespace sein
Keine globalen Stile erstellen
Verwenden Sie nicht das ID-Attribut für das Styling
Trennen Sie Wörter durch Bindestriche, nicht durch Unterstriche
Verwenden Sie immer Kleinbuchstaben

Schritt 1 – Erstellen einer einfachen Webseite (kein Inhalt)

Dieses Tutorial ist so eingerichtet, dass Sie Ihren eigenen Inhalt für die Webseite auswählen können.

Der HTML-Code

Erstellen Sie eine .html-Datei, die den folgenden Code enthält:

 
<!doctype html> 
<html> 
<head> 
 
<meta charset="utf-8"> 
 
<!-- CSS stylesheets --> 
<link href="css/style.css" rel="stylesheet" media="screen" /> 
 
<!-- jQuery / JavaScript --> 
<script src="js/jquery-functions.js"></script> 
 
<meta name="description" content="This demo shows how jQuery UI Controls look with a basic, custom CSS theme applied." /> 
<meta name="keywords" content="jquery,jquery ui,themeroller,widget,demo,tutorial" /> 
<title>jQuery UI Custom Theme Demo - Custom CSS Theme</title> 
 
</head> 
<body> 
 
	<!-- Begin Wrapper --> 
	<div id="wrapper"> 
 
	<p> 
	Content will go here 
	</p> 
 
	</div> 
	<!-- End Wrapper --> 
 
</body> 
</html>

Das CSS

Erstellen Sie ein CSS-Stylesheet namens "style.css" und fügen Sie es einem neuen Ordner namens "css" hinzu. Fügen Sie den folgenden Code ein:

 
/*  Default Styles 
--------------------------------------------------- */ 
 
body { 
	margin: 0px; 
	padding: 0px; 
	background-color: #f2f2f2; 
	font-size: 18px;  
	font-family: Arial, Helvetica, sans-serif; 
	color: #000; 
	text-align: left; 
} 
 
#wrapper	{ 
	width: 965px; 
	margin: 0 auto;	 
} 
 
 
a:link, a:visited, a:active { 
	color: #009999; 
} 
 
a:hover { 
	color: #000; 
} 
 
.clear	{ 
	float: none; 
	clear: both; 
}

Schritt 2 - Externe JS-Datei erstellen (kein Inhalt)

Eine externe JavaScript-Datei "jquery-functions.js" muss erstellt und einem Ordner namens "js" hinzugefügt werden. Diese JavaScript-Datei enthält den jQuery-Code, der zum Initialisieren der verschiedenen jQuery-UI-Widgets erforderlich ist. Dieses Tutorial ist so eingerichtet, dass Sie auswählen können, welche jQuery-UI-Widgets Sie in Ihre Webseite aufnehmen möchten. jQuery-Code werden dieser Datei basierend auf den von Ihnen ausgewählten jQuery-UI-Widgets hinzugefügt.

Schritt 3 – jQuery und jQuery-UI herunterladen

Laden Sie die neueste Version von jQuery herunter und kopieren/laden Sie die Datei in Ihren JS-Ordner hoch. Laden Sie dann die neueste Version von jQuery UI herunter und kopieren Sie die jquery-ui .js-Datei in Ihren JS-Ordner. Stellen Sie sicher, dass das ThemeRoller-Standardthema "UI-Dunkelheit" ausgewählt wurde.

Für dieses Tutorial wird das ThemeRoller-Standardthema "UI-Dunkelheit" verwendet. Wenn Sie jedoch Ihr eigenes benutzerdefiniertes jQuery-UI-CSS-Thema erstellen, gehen Sie zur jQuery-Themeroller-Galerie und wählen Sie ein Design aus, dessen Aussehen und Verhalten am besten zu Ihrem Webdesign passt.

Schritt 4 – CDN-gehostetes jQuery und jQuery-UI

Für dieses Tutorial werden jQuery und die jQuery-Benutzeroberfläche auf einem unabhängigen Server selbst gehostet, anstatt ein CDN (Content Distribution Network) zu verwenden.

Wenn Sie jQuery und die jQuery-UI lieber von einem CDN gehostet haben möchten, finden Sie hier CDN-gehostete Kopien von jQuery und/oder jQuery-UI, auf die Sie verlinken können:

Schritt 5 – Verweisen auf jQuery und jQuery-UI-Bibliotheken

Wir müssen sicherstellen, dass die Webseite auf die jQuery- und jQuery-UI-Bibliotheken verweist.

Zwischen den head-Tags der Webseite, direkt darunter fügen Sie den folgenden Code hinzu:

 
<link href="css/ui-darkness/jquery-ui-1.8.16.custom.css" rel="stylesheet" media="screen" /> 
 
<!-- jQuery / JavaScript --> 
<script src="js/jquery-1.6.4.min.js"></script> 
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>

Schritt 6 – Wählen Sie ein jQuery-UI-Widget aus

Nachdem Sie die Schritte eins bis fünf abgeschlossen haben, können Sie Ihrer Webseite jQuery-Widgets hinzufügen. In diesem Tutorial wird beschrieben, wie Sie diese jQuery-UI-Widgets mit einem Thema versehen:

Obwohl Highlight / Error keine Widgets sind, wurden sie in das Tutorial aufgenommen, um zu zeigen, wie diese Elemente thematisiert und die Standard-UI-Symbole durch benutzerdefinierte Symbole ersetzt werden.

Schritt 7 - Entfernen des Randes am Schiebegriff - Chrome und Safari

Beim browserübergreifenden Testen der Demos für dieses Tutorial wurde beim Klicken auf den Schieberegler in den Webbrowsern Google Chrome und Safari ein Rahmen angezeigt. Google Chrome zeigte einen gelben Rahmen an und Safari zeigte einen hellblauen Rahmen an.

Um diesen Rahmen zu entfernen, muss der CSS-Code "outline: none;" wurde dem jQuery-UI-CSS-Stylesheet hinzugefügt. Suchen Sie in der Datei "jquery-ui-1.8.16.custom.css" die folgende Codezeile:

1
2	.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }

Ändern Sie diese Codezeile so, dass sie "outline: none;" enthält. so was:

1
2	.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; outline: none; }

Ihr Design hat möglicherweise eine etwas andere Codezeile für den Schieberegler. Suchen Sie die Zeile, die ".ui-slider .ui-slider-handle { position: absolute; ......" enthält und fügen Sie "outline: none;" hinzu. bis zum Ende dieser Codezeile.

Schritt 8 – Upgrade auf neuere Versionen der jQuery-Benutzeroberfläche

Wenn Sie das CSS-Stylesheet eines standardmäßigen ThemeRoller-Themes stark modifiziert oder ein benutzerdefiniertes CSS-Theme von Grund auf neu erstellt haben, ist es notwendig, manuelle Updates für zukünftige jQuery-UI-Widgets und -Plugins durchzuführen.

Dateivergleichstools

Um jQuery UI CSS manuell zu aktualisieren, benötigen Sie ein gutes Dateivergleichstool. ich habe benutztBeyond Compare seit vielen Jahren und kann dieses Programm wärmstens empfehlen. Obwohl es sich bei Beyond Compare nicht um Freeware, sondern um kommerzielle Software handelt.

Eine Liste der empfohlenen Freeware- und Payware-Dateivergleichstools finden Sie hier und hier.

Manuelle Updates

Um Ihr benutzerdefiniertes jQuery-UI-CSS-Theme zu aktualisieren, müssen Sie Folgendes tun:

Sichern Sie Ihre benutzerdefinierten jQuery-UI-CSS-Themedateien
Laden Sie die neueste Version von jQuery herunter und kopieren/laden Sie die Datei in Ihren JS-Ordner hoch. (Überspringen Sie diesen Schritt, wenn Sie ein CDN verwenden)
Aktualisieren Sie den Link auf Ihrer(n) Webseite(n), der auf die jQuery-Bibliothek verweist, damit er die neueste Versionsnummer hat. Beispiel: "js/jquery-1.6.3.min.js" würde in "js/jquery-1.6.4.min.js" geändert.
Laden Sie die neueste Version von jQuery UI herunter und kopieren Sie die jquery-ui .js-Datei in Ihren JS-Ordner. Stellen Sie sicher, dass das Themeroller-Standarddesign ausgewählt ist, das ursprünglich geändert wurde, um Ihr benutzerdefiniertes Design zu erstellen.
Aktualisieren Sie den Link auf Ihrer(n) Webseite(n), der auf die jQuery-UI-Bibliothek verweist, damit er die neueste Versionsnummer hat. Beispiel: "js/jquery-ui-1.8.15.custom.min.js" würde in "js/jquery-ui-1.8.16.custom.min.js" geändert.
Ändern Sie den Dateinamen des CSS-Stylesheets für Ihr benutzerdefiniertes Design der jQuery-Benutzeroberfläche, sodass es die neueste Version der jQuery-Benutzeroberfläche widerspiegelt. Beispiel: "jquery-ui-1.8.15.custom.css" würde in "jquery-ui-1.8.16.custom.css" geändert
Aktualisieren Sie den Link auf Ihrer(n) Webseite(n), der auf das jQuery-UI-CSS-Stylesheet verweist, sodass er den neuen Dateinamen und die neue Version wie oben gezeigt wiedergibt.

Aktualisieren Sie das CSS Zeile für Zeile

Bildschirm des Beyond Compare-Dateivergleichstools. Die linke Seite zeigt das ursprüngliche Standard-CSS-Stylesheet der jQuery-Benutzeroberfläche. Die rechte Seite zeigt ein neues geändertes CSS-Stylesheet. Klicken Sie auf das Bild für eine größere Ansicht.

Wenn Sie das CSS-Stylesheet eines Standard-ThemeRoller-Themes stark modifiziert oder ein eigenes CSS-Theme von Grund auf neu erstellt haben, muss das CSS manuell Zeile für Zeile aktualisiert werden.

Vergleichen Sie mit einem Dateivergleichstool den Code des CSS-Stylesheets für die neueste Version der jQuery-Benutzeroberfläche mit dem Code des CSS-Stylesheets für Ihr benutzerdefiniertes jQuery-UI-Design. Überprüfen Sie die Unterschiede sorgfältig und suchen Sie nach Änderungen im Stylesheet der neuen jQuery-UI-Version aufgrund neuer jQuery-UI-Widgets, Aktualisierungen vorhandener Widgets usw Unterschiede aufgrund von Codeänderungen, die zum Erstellen Ihres benutzerdefinierten jQuery-UI-Designs vorgenommen wurden.

In vielen Fällen ist die einzige Änderung am Stylesheet des jQuery-UI-Designs die Versionsnummer. Wenn dies der Fall ist, ändern Sie einfach alle Instanzen der alten Versionsnummer in die neue Versionsnummer, speichern Sie die Datei, laden Sie sie hoch und fertig.

Wenn die neueste Version des jQuery-UI-Design-Stylesheets NEUEN CSS-Code enthält, der nicht in Ihrem benutzerdefinierten Design-CSS enthalten ist, kopieren Sie diese Codezeilen in Ihr Stylesheet, speichern Sie sie und laden Sie sie hoch.

jQuery-UI-Tabs

Tabs unterteilen den Inhalt in mehrere Abschnitte, die ausgetauscht werden können, um Platz zu sparen. Das Widget vertauscht die Registerkarten-Abschnitte standardmäßig onClick, kann aber stattdessen in onHover geändert werden.

HTML

Um das standardmäßige jQuery-UI-Tabs-Widget zu Ihrer HTML-Webseite hinzuzufügen, fügen Sie den folgenden Code hinzu:

 
<!-- Begin Tabs Container --> 
<div class="content_container_1"> 
 
<h2>Tabs</h2> 
 
<!-- Begin Tabs Area --> 
 <div id="tabs"> 
	<ul> 
		<li><a href="#tabs-1">jQuery UI</a></li> 
		<li><a href="#tabs-2">jQuery</a></li> 
		<li><a href="#tabs-3">ThemeRoller</a></li> 
	</ul> 
	 
	<!-- Begin Tabs Section #1 --> 
	<div id="tabs-1"> 
		<p> 
		   <img class="tabs_img" src="images/jquery_ui.png" width="325" height="225" alt="jQuery UI" /><a href="http://jqueryui.com/" target="_blank" title="jQuery UI">jQuery UI</a> was built on top of the jQuery library and features ready to use widgets, advanced effects, animation, and much more.  
		</p> 
		<p> 
		   Featuring a powerful and unique CSS theme framework, Themeroller tool and pre-made theme gallery, jQuery UI makes customizing your application fast and easy.  
		</p> 
		<p> 
		   Detailed documentation and tutorials available on the <a href="http://jqueryui.com/" target="_blank" title="jQuery UI Official Website">official website</a> allow you to start using and learning jQuery UI right away. jQuery UI is also supported by a large and enthusiastic community of web developers. 
		</p> 
		<p> 
		   <a href="http://jqueryui.com/" target="_blank" title="Visit The jQuery UI Website">Visit The Official jQuery UI Website</a> 
		</p> 
	</div> 
	<!-- End Tabs Section #1 --> 
 
	<!-- Begin Tabs Section #2 --> 
	<div id="tabs-2"> 
		<p> 
		   <img class="tabs_img" src="images/jquery.png" width="325" height="225" alt="jQuery" /><a href="http://jquery.com/" target="_blank" title="jQuery">jQuery</a> is a very popular cross browser JavaScript library that features event handling, animation, Ajax interactions and more for rapid web development.  
		</p> 
		<p> 
		   On the official jQuery website you can find <a href="http://docs.jquery.com/" target="_blank" title="detailed documentation">detailed documentation</a>, <a href="http://forum.jquery.com/" target="_blank" title="forums">forums</a> with thousands of posts and responses, information on  <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" target="_blank" title="How to use jQuery with other Libraries">How to use jQuery with other Libraries</a> and much more. 
		</p> 
		<p> 
		   jQuery is lightweight, CSS3 compliant and cross browser tested. jQuery was designed to change the way developers write JavaScript! 
		</p> 
		<p> 
		   <a href="http://jquery.com/" target="_blank" title="Visit the jQuery Website">Visit the Official jQuery Website</a> 
		</p> 
	</div> 
	<!-- End Tabs Section #2 --> 
 
	<!-- Begin Tabs Section #3 --> 
	<div id="tabs-3"> 
		<p> 
		   <img class="tabs_img" src="images/themeroller.png" width="325" height="325" alt="jQuery" />ThemeRoller is a web application designed and developed for jQuery UI by <a href="http://www.filamentgroup.com/" target="_blank" title="Filament Group, Inc">Filament Group, Inc</a>.   
		</p> 
		<p> 
		   The Themeroller application interface is divided into sections such as header/toolbar, content, clickable states, etc which allows you to design custom CSS themes for <a href="http://jqueryui.com/demos/" target="_blank" title="jQuery UI widgets">jQuery UI widgets</a>.  
		</p> 
		<p> 
		   There is also a <a href="http://jqueryui.com/themeroller/#themeGallery" target="_blank" title="Theme Gallery">Theme Gallery</a> with pre-rolled themes if you do not want to design your own custom jQuery UI theme. Basic jQuery UI widget customization can be accomplished fairly easily by using a default themeroller theme and modifying the theme CSS to suit your needs. 
		</p> 
		<p> 
		   There are additional articles about theming and customization on the official website including <a href="http://jqueryui.com/docs/Theming" target="_blank" title="Theming jQuery UI">"Theming jQuery UI"</a>, <a href="http://jqueryui.com/docs/Theming/API" target="_blank" title="jQuery UI CSS framework">"jQuery UI CSS framework"</a>, and <a href="http://jqueryui.com/docs/Theming/Themeroller" target="_blank" title="ThemeRoller application">"ThemeRoller application"</a>.  
		</p> 
		<p> 
		   <a href="http://jqueryui.com/themeroller/" target="_blank" title="Visit ThemeRoller">Visit ThemeRoller!</a> 
		</p> 
	</div> 
	<!-- End Tabs Section #3 --> 
 
</div>  
<!-- End Tabs Area --> 
 
</div>  
<!-- End Tabs Container -->

Aufschlüsselung des Markups

Die meisten jQuery-UI-Widgets sind so programmiert, dass sie sich auf 100 % der Breite des Inhaltsbereichs erweitern, in dem sie platziert werden.

Das Container-Div "content_container_1" wurde im CSS auf eine feste Breite von 800px gesetzt, damit sich der Inhaltsbereich mit Tabs nicht über die gesamte Bildschirmbreite ausdehnt.

Die Menüs "Tabs" werden durch eine ungeordnete Liste generiert. Die Inhaltsabschnitte werden durch <div>-Tags mit eindeutigen IDs generiert, die Ankerlinks in den <li></li>-Tags entsprechen.

Beispiel: <div id="tabs-1"> entspricht <a href="#tabs-1">

CSS (style.css)

Fügen Sie der style.css den folgenden CSS-Code hinzu:

1
2	/* Containers
3	--------------------------------------------------- */
4
5	.content_container_1 {
6	width: 800px;
7	margin: 50px 0px 20px 20px;
8	}
9
10	/* Tabs
11	--------------------------------------------------- */
12
13	#tabs p {
14	font-family: Arial, Helvetica, sans-serif;
15	font-size: 16px;
16	}
17
18	#tabs .tabs_img {
19	float: left;
20	background-color: #aaa;
21	padding: 8px;
22	margin: 0px 35px 15px 0px;
23	}

jQuery (jquery-functions.js)

Initialisieren Sie die Registerkarten, indem Sie den folgenden Code in die externe JavaScript-Datei jquery-functions.js einfügen.

 
// jQuery UI Tabs 
 
$(function() { 
	$( "#tabs" ).tabs(); 
});

Benutzerdefiniertes jQuery-UI-CSS

Der Abschnitt Referenz zu benutzerdefinierten CSS-Stylesheets dieses Tutorials enthält die spezifischen Klassen und den Code, der zum Stylen der Widgets benötigt wird. Jede Zeile CSS-Code enthält eine Erklärung, was sie tut und wie sie den Stil von Widgets ändert. Weitere Details finden Sie im Referenzabschnitt Einführung.

Diese Abschnitte der Stylesheet-Referenz enthalten die jQuery-UI-Klassen, die Stile auf das Registerkarten-Widget anwenden:

Wenn Sie beispielsweise das Hintergrundbild/den Farbverlauf der aktiven, ausgewählten Registerkarte des Registerkartenmenüs ändern möchten, sehen Sie sich die im Abschnitt Interaktionszustände aufgelisteten Klassen an. Erläuterungen zu den vier Interaktionszuständen sind oben im Abschnitt aufgeführt. Da es sich um einen "active" Zustand handelt, gilt für diese Registerkarte die Klasse ".ui-state-active".

Sehen Sie sich die Beispiele für CSS-Code für Zeilen an, die die Klasse ".ui-state-active" enthalten und ein CSS-Hintergrundbild enthalten. Diese Beispielcodezeile enthält die Klasse und ein CSS-Hintergrundbild:

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

Nachdem Sie nun das entsprechende Codebeispiel gefunden haben, suchen Sie diese Codezeile im Stylesheet des jQuery-UI-Designs und ersetzen Sie das Hintergrundbild durch Ihr eigenes benutzerdefiniertes Bild.

Denken Sie daran: Alle ThemeRoller-Themes haben die gleichen CSS-Klassen. Die Klassennamen sind also in jedem Standardthema genau gleich. Der CSS-Code und das Styling können jedoch unterschiedlich sein.

jQuery UI Accordion

Ein Accordion lässt nicht zu, dass mehr als ein Inhaltsbereich gleichzeitig geöffnet ist. Wenn Sie nach einem Widget suchen, mit dem mehr als ein Inhaltsbereich geöffnet werden kann, verwenden Sie kein Accordion.

HTML

Um das jQuery-UI-Accordion-Widget (mit ThemeRoller-Symbolen) zu Ihrer .html-Webseite hinzuzufügen, fügen Sie den folgenden Code hinzu:

 
<!-- Begin Accordion Container --> 
<div class="content_container_2"> 
 
<h2>Accordion</h2> 
 
<!-- Begin Accordion --> 
<div id="accordion"> 
 
<!-- Begin Panel #1 --> 
	<h3><a href="#section1">Accordion</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			<img src="images/accordion_1.png" width="350" height="180" alt="Accordion" /> 
			<p> 
				Default Accordion 
			</p> 
			<img src="images/accordion_2.png" width="350" height="198" alt="Accordion" /> 
			<p> 
				Accordion with Icons 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Accordion</h2> 
			<p> 
				An <a href="http://jqueryui.com/demos/accordion/" target="_blank" title="Accordion">Accordion</a> doesn't allow more than one content panel to be open at the same time. If you are looking for a widget that allows more than one content panel to be open, don't use an Accordion. 
			</p> 
			<p> 
				The markup uses a series of headers (H3 tags) and divs so the content is still usable even if the browser has JavaScript disabled. 
			</p>	 
			<p> 
				If you want Accordion sections to be collapsible, add "collapsible: true" to the JavaScript code.  
			</p>		 
			<p> 
				To set the Accordion so that the accordion sections open and close on mouseover, add event: "mouseover" to the JavaScript code. 
			</p> 
			<p> 
			<a href="http://jqueryui.com/demos/accordion/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #1 --> 
 
 
<!-- Panel #2 --> 
	<h3><a href="#section2">Tabs</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			<img src="images/tabs_1.png" width="350" height="117" alt="Tabs" /> 
			<p> 
				Default Tabs 
			</p> 
			<img src="images/tabs_2.png" width="350" height="143" alt="Tabs" /> 
			<p> 
				Tabs Below Content 
			</p> 
			<img src="images/tabs_3.png" width="350" height="58" alt="Tabs" /> 
			<p> 
				Content via Ajax 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Tabs</h2> 
			<p> 
				<a href="http://jqueryui.com/demos/tabs/" target="_blank" title="Tabs">Tabs</a> break content into multiple sections that can be swapped to save space. The widget swaps the tabbed sections onClick by default, but can be changed to onHover instead. 
			</p> 
			<p> 
				If you want the Tabs sections to open on mouseover, add event: "mouseover" to the JavaScript code. 
			</p>		 
			<p> 
				If you want the Tabs content to be collapsible, add collapsible: "true" to the JavaScript code. 
			</p> 
			<p> 
				Other options for the tabs widget include content loaded via Ajax, collapse content, sortable, tabs below content, simple manipulation and cookie persistance. 
			</p> 
			<p> 
			<a href="http://jqueryui.com/demos/tabs/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #2 --> 
 
 
<!-- Panel #3 --> 
	<h3><a href="#section3">Datepicker</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			<p class="left_col_1"> 
			<img src="images/datepicker_1.png" width="175" height="208" alt="Datepicker" /> 
			<br /> 
				Displayed Inline 
			</p> 
 
			<p class="left_col_2"> 
			<img src="images/datepicker_2.png" width="175" height="208" alt="Datepicker" /> 
			<br /> 
				Icon Trigger 
			</p> 
 
			<p class="left_col_3"> 
			<img src="images/datepicker_3.png" width="175" height="208" alt="Datepicker" /> 
			<br /> 
				With Button Bar 
			</p> 
 
			<p class="left_col_4"> 
			<img src="images/datepicker_4.png" width="175" height="208" alt="Datepicker" /> 
			<br /> 
				Month &amp; Year Menus 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Datepicker</h2> 
			<p> 
				<a href="http://jqueryui.com/demos/datepicker/" target="_blank" title="Datepicker">Datepicker</a> is tied to form field input. A user can choose a date for the form field from an interactive calendar displayed in a small overlay using this function. 
			</p> 
			<p>		 
				To display the Datepicker embedded inline on a web page, call the .datepicker() on a div instead of a form field. 
			</p> 
			<p> 
				You can set the Datepicker to be displayed when clicking an icon. You can also set the Datepicker to display multiple months. 
			</p>		 
			<p> 
				The Datepicker function has a variety of settings including animations, month and year menus, dates in other months, display button bar, localize calendar and more. 
			</p> 
			<p> 
			<a href="http://jqueryui.com/demos/datepicker/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #3 --> 
 
 
<!-- Panel #4 --> 
	<h3><a href="#section4">Dialog</a></h3> 
	<div> 
 
	<!-- Begin Content Container Div --> 
	<div class="content_container_main"> 
 
		<!-- Left Content Div --> 
		<div class="content_1"> 
			<img src="images/dialog_1.png" width="350" height="197" alt="Dialog" /> 
			<p> 
				Basic Modal Dialog 
			</p> 
			<img src="images/dialog_2.png" width="350" height="207" alt="Dialog" /> 
			<p> 
				Modal Message 
			</p> 
		</div> 
 
		<!-- Right Content Div --> 
		<div class="content_2"> 
			<h2>Dialog</h2> 
			<p> 
				A <a href="http://jqueryui.com/demos/dialog/" target="_blank" title="Dialog">Dialog</a> is a floating window displayed in an overlay that covers the entire web page content. It contains a title bar, small to medium sized content area and can be closed with an "x" icon. 
			</p> 
			<p> 
				A scrollbar will automatically appear if the content length exceeds the maximum height. 
			</p>	 
			<p>		 
				The jQuery UI Dialog can be animated by specifying the desired effect in the JavaScript code. You must include the individual effects file for 	any effects you would like to use. 
			</p> 
			<p> 
				You can set the dialog so that it creates a modal message or a modal confirmation that a user must click on before continuing with the application. 
			</p>		 
			<p> 
			<a href="http://jqueryui.com/demos/dialog/" target="_blank" title="Learn More">Learn More</a> 
			</p> 
		</div> 
	</div> 
	<!-- End Content Container Div --> 
 
	</div> 
<!-- End Panel #4 --> 
 
 
</div> 
<!-- End Accordion --> 
 
</div> 
<!-- End Accordion Container -->

Aufschlüsselung des Markups

Die meisten jQuery-UI-Widgets sind so programmiert, dass sie sich auf 100% der Breite des Inhaltsbereichs erweitern, in dem sie platziert werden.

Das Container-Div "content_container_2" wurde im CSS auf eine feste Breite von 800px gesetzt, damit sich der Inhaltsbereich nicht über die gesamte Bildschirmbreite ausdehnt.

Das Akkordeon verwendet die Tags <h3></h3> und <div></div>, um die Kopf- und Inhaltsbereiche zu erstellen:

 
<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div>

Wenn Sie <h3></h3>-Tags in den Inhaltsabschnitten des Accordions verwenden möchten, müssen Sie eine CSS-Klasse hinzufügen, wie zum Beispiel:

1
2	<div>
3	<h3 class="subtitle">Subtitle</h3>
4	</div>

Um die Untertitel Ihres Inhalts <h3></h3> zu formatieren, fügen Sie die Klasse dann Ihrem CSS-Stylesheet style.css hinzu und formatieren Sie es nach Bedarf:

 
#accordion  h3.subtitle	{ 
	font-size: 18px;  
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-weight: bold;	 
	color: #009999; 
}

CSS (style.css)

Fügen Sie der style.css den folgenden CSS-Code hinzu:

 
/*  Containers 
--------------------------------------------------- */ 
 
.content_container_2	{ 
	width: 800px; 
	margin: 50px 0px 0px 20px; 
} 
 
/*  Accordion  
--------------------------------------------------- */ 
 
#accordion .content_container_main	{ 
	width: 750px; 
} 
 
#accordion .content_1	{ 
	width: 400px; 
	float: left; 
	font-size: 14px; 
	text-align: center; 
} 
 
#accordion .content_2	{ 
	width: 290px; 
	float: left; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	margin: 0px 0px 0px 30px; 
} 
 
#accordion img 	{ 
	padding: 8px; 
	background-color: #aaa; 
	margin: 10px 0px 5px 0px; 
} 
 
#accordion h2	{ 
	margin: 5px 0px 10px 0px; 
	padding: 0px; 
	font-size: 30px;  
} 
 
#accordion p 	{ 
	margin: 0px 0px 15px 0px; 
	padding: 0px; 
} 
 
#accordion p.left_col_1, #accordion p.left_col_4 	{ 
	float: left; 
	margin: 0px; 
	padding: 0px; 
} 
 
#accordion p.left_col_2, #accordion p.left_col_3 	{ 
	float: right; 
	margin: 0px; 
	padding: 0px; 
}

jQuery (jquery-functions.js)

Initialisieren Sie das Accordion, indem Sie den folgenden Code in die externe JavaScript-Datei jquery-functions.js einfügen.

 
// jQuery UI Accordion 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-circle-arrow-e", 
		headerSelected: "ui-icon-circle-arrow-s" 
	}; 
	$( "#accordion" ).accordion({ 
		icons: icons 
	});		 
});

Aufschlüsselung der jQuery

Um ein Accordion mit Standardfunktionalität zu initialisieren, benötigen Sie nur diese grundlegende Codezeile:

1
2	$(function() {
3	$( "#accordion" ).accordion();
4	});

Das jQuery-UI-Accordion enthält eine Symboloption, mit der Sie Symbole für "header" und "headerSelected" angeben können, und in der ersten Hälfte des jQuery-Codes werden die Symbole festgelegt. Die CSS-Klassen für die Standard-Accordionsymbole sind ".ui-icon-triangle-1-e" und ".ui-icon-triangle-1-s".

Das in der Basisdemo (Demo 2) enthaltene Akkordeon wurde so angepasst, dass anstelle der Standardsymbole andere jQuery-UI-Symbole verwendet werden. Für die Basis-Demo wurden die Icons in "header: ui-icon-circle-arrow-e" und "headerSelected: ui-icon-circle-arrow-s" geändert.

Hinweis: Fügen Sie den "Punkt" nicht ein, wenn Sie die Klassen zum jQuery-Code hinzufügen. So würden Sie zum Beispiel Header schreiben: "ui-icon-circle-arrow-e" nicht header: ".ui-icon-circle-arrow-e".

Benutzerdefiniertes jQuery-UI-CSS

Diese Abschnitte der Stylesheet-Referenz enthalten die jQuery-UI-Klassen, die Stile auf das Accordion-Widget anwenden:

Wenn Sie beispielsweise das Hintergrundbild/den Farbverlauf des Akkordeonbedienfelds ändern möchten, das beim Bewegen des Mauszeigers angezeigt wird, sehen Sie sich die im Abschnitt Interaktionsstatus aufgeführten Klassen an. Erläuterungen zu den vier Interaktionszuständen sind oben im Abschnitt aufgeführt. Da dies ein "hover"-Zustand ist, gilt die ".ui-state-hover"-Klasse für dieses Accordion-Panel.

Sehen Sie sich die Beispiele für CSS-Code für Zeilen an, die die Klasse ".ui-state-hover" enthalten und ein CSS-Hintergrundbild enthalten. Diese Beispielcodezeile enthält die Klasse und ein CSS-Hintergrundbild:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #191919; background: #000 url(images/ui-bg-3.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

Denken Sie daran: Alle ThemeRoller-Themes haben die gleichen CSS-Klassen. Daher sind die Klassennamen in jedem Standardthema genau gleich. Der CSS-Code und das Styling können jedoch unterschiedlich sein.

jQuery-UI-Schaltfläche

Das jQuery-UI-Schaltflächen-Widget kann verwendet werden, um Standardformularelemente wie Senden- und Zurücksetzen-Schaltflächen, Optionsfelder und Kontrollkästchen zu verbessern. Wenn Sie dieses Widget für Eingabe- und Übermittlungsschaltflächen verwenden, ist die Unterstützung auf reine Textetiketten ohne Symbole beschränkt.

HTML

Um Ihrer HTML-Webseite jQuery-UI-Schaltflächen (mit Symbolen) hinzuzufügen, fügen Sie den folgenden Code hinzu:

 
<!-- Begin Buttons Container --> 
 
<div class="content_container_3"> 
 
<h2>Button</h2> 
 
<div class="demo"> 
	<button>Button with icon only</button> 
	<button>Button with icon on the left</button> 
	<button>Button with two icons</button> 
	<button>Button with two icons and no text</button> 
	<button>Button with text only</button> 
</div> 
 
</div> 
<!-- End Buttons Container -->

CSS (style.css)

Fügen Sie der style.css den folgenden CSS-Code hinzu:

 
.content_container_3	{ 
	width: 950px; 
	margin: 50px 0px 20px 20px; 
}

jQuery (jquery-functions.js)

Initialisieren Sie die Buttons, indem Sie den folgenden Code in die externe JavaScript-Datei jquery-functions.js einfügen.

 
// jQuery UI Button 
 
// First Button 
	$(function() { 
		$( ".demo button:first" ).button({ 
            icons: { 
                primary: "ui-icon-locked" 
            }, 
            text: false 
// Second Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-locked" 
            } 
// Third Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-gear", 
                secondary: "ui-icon-triangle-1-s" 
            } 
// Fourth Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-gear", 
                secondary: "ui-icon-triangle-1-s" 
            }, 
            text: false 
// Fifth Button 
        }).next().button({ 
		}); 
	});

Aufschlüsselung der jQuery

Die Schaltflächen werden durch die Verwendung von <button></button>-Tags im Markup der Webseite generiert. Der jQuery-Code verweist auf die Schaltflächen in jedem Abschnitt des Codes. Die Schaltflächen wurden auch in einem <div> platziert, das die CSS-Klasse "demo" (<div class="demo">) hat. Im jQuery-Code wird die CSS-Klasse im ersten Codeabschnitt referenziert:

 
$( ".demo button:first" ).button({ 
   icons: { 
      primary: "ui-icon-locked" 
   }, 
   text: false

Das jQuery-UI-Schaltflächen-Widget enthält eine Symboloption, mit der Sie angeben können, welche jQuery-UI-Symbole auf den einzelnen Schaltflächen verwendet werden sollen. Es gibt zwei Arten von Symbolen "primär" und "sekundär". Wenn auf einer Schaltfläche Text angezeigt wird, wird das primäre Symbol links vom Text und das sekundäre Symbol rechts angezeigt.

Der erste Abschnitt des oben gezeigten jQuery-Codes macht tatsächlich mehrere Dinge:

Es verweist auf die CSS-Klasse .demo, sodass die Funktionen und Formatierungen für alle Schaltflächen gelten, die in diese CSS-Klasse fallen.
"button:first" wurde hinzugefügt, um anzuzeigen, dass dies der "erste" Button ist, der in der Gruppe von Schaltflächen (von links nach rechts) angezeigt wird.
Der Code verweist auf die jQuery-UI-Symboloption, sodass der Schaltfläche ein Symbol hinzugefügt werden kann
"text: false" gibt an, dass diese Schaltfläche nur ein Symbol und keinen Text enthält.
Diese Schaltfläche hat keinen Text, aber es wird ein einzelnes Schlosssymbol angezeigt

Nach der ersten Schaltfläche gibt es drei zusätzliche Schaltflächen, die vom jQuery-Code generiert werden:

 
// Second Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-locked" 
            } 
// Third Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-gear", 
                secondary: "ui-icon-triangle-1-s" 
            } 
// Fourth Button 
        }).next().button({ 
            icons: { 
                primary: "ui-icon-gear", 
                secondary: "ui-icon-triangle-1-s" 
            }, 
            text: false 
// Fifth Button 
        }).next().button({ 
		}); 
	});

Die Codezeile, die ".next()" enthält, zeigt an, dass jede Schaltfläche nach der "ersten" Schaltfläche in der Reihenfolge von links nach rechts angezeigt wird. Genau wie der erste Codeabschnitt verweist jeder dieser Codeabschnitte auf die jQuery-UI-Symboloption. Jede dieser Schaltflächen wurde ein wenig anders formatiert:

Zweite Schaltfläche Enthält Text und ein Schlosssymbol auf der linken Seite
Dritte Schaltfläche Enthält Text, ein Zahnradsymbol links und ein Dreiecksymbol rechts
Vierte Schaltfläche hat KEINEN Text, ein Zahnradsymbol links und ein Dreiecksymbol rechts
Fünfte Schaltfläche Ist eine Nur-Text-Schaltfläche und hat keine Symbole

Benutzerdefiniertes jQuery-UI-CSS

Diese Abschnitte der Stylesheet-Referenz enthalten die jQuery-UI-Klassen, die Stile auf das Schaltflächen-Widget anwenden:

Wenn Sie beispielsweise das Hintergrundbild/den Farbverlauf des Standardzustands der Schaltflächen ändern möchten, sehen Sie sich die im Abschnitt Interaktionszustände aufgelisteten Klassen an. Erläuterungen zu den vier Interaktionszuständen sind oben im Abschnitt aufgeführt. Da dies ein "Standard"-Zustand ist, gilt die ".ui-state-default"-Klasse für dieses Accordion-Panel.

Sehen Sie sich die Beispiele für CSS-Code für Zeilen an, die die Klasse ".ui-state-default" enthalten und ein CSS-Hintergrundbild enthalten. Diese Beispielcodezeile enthält die Klasse und ein CSS-Hintergrundbild:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #696969; background: #353535 url(images/ui-bg-4.png) 50% 50% repeat-x; font-weight: bold; color: #eee; }

Denken Sie daran: Alle ThemeRoller-Themes haben die gleichen CSS-Klassen. Die Klassennamen sind also in jedem Standardthema genau gleich. Der CSS-Code und das Styling können jedoch unterschiedlich sein.

jQuery UI Datepicker

Datepicker ist an die Formularfeldeingabe gebunden. Ein Benutzer kann mit dieser Funktion ein Datum für das Formularfeld aus einem interaktiven Kalender auswählen, der in einem kleinen Overlay angezeigt wird.

HTML

Um das jQuery UI Datepicker Widget (inline angezeigt) zu Ihrer HTML-Webseite hinzuzufügen, fügen Sie den folgenden Code hinzu:

 
<!-- Begin Datepicker Container --> 
<div class="content_container_4"> 
 
<h2>Datepicker</h2> 
 
<div id="datepicker"></div> 
 
</div> 
<!-- End Datepicker Container -->

Aufschlüsselung des Markups

Damit der Datepicker inline eingebettet auf einer Webseite angezeigt wird, wurde der .datepicker() auf einem div statt auf einem Formularfeld aufgerufen.

jQuery (jquery-functions.js)

Initialisieren Sie das Datepicker-Widget, indem Sie den folgenden Code in die externe JavaScript-Datei jquery-functions.js einfügen.

 
// jQuery UI Datepicker 
 
$(function() { 
	$("#datepicker").datepicker({ 
	}); 
});

CSS (style.css)

Fügen Sie der style.css den folgenden CSS-Code hinzu:

 
.content_container_4	{ 
	width: 400px; 
	margin: 50px 0px 20px 20px; 
}

Benutzerdefiniertes jQuery-UI-CSS

Diese Abschnitte der Stylesheet-Referenz enthalten die jQuery-UI-Klassen, die Stile auf das Datepicker-Widget anwenden:

Wenn Sie beispielsweise das Hintergrundbild/den Verlauf der Schaltfläche für das aktuelle/hervorgehobene Datum ändern möchten, sehen Sie sich die im Abschnitt Interaktionshinweise aufgelisteten Klassen an. Da es sich um einen "Highlight"-Zustand handelt, gilt für diese Datumsschaltfläche die Klasse ".ui-state-highlight".

Sehen Sie sich die Beispiele für CSS-Code für Zeilen an, die die Klasse ".ui-state-highlight" enthalten und ein CSS-Hintergrundbild enthalten. Diese Beispielcodezeile enthält die Klasse und ein CSS-Hintergrundbild:

1
2	.ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fff; background: #eee url(images/ui-bg-5.png) 50% 50% repeat-x; color: #2e7db2; }

Denken Sie daran: Alle ThemeRoller-Themes haben die gleichen CSS-Klassen. Daher sind die Klassennamen in jedem Standardthema genau gleich. Der CSS-Code und das Styling können jedoch unterschiedlich sein.

jQuery UI Slider

Das standardmäßige jQuery UI Slider Widget ist horizontal und hat einen einzelnen Griff, der mit der Maus bewegt werden kann.

HTML

Um das standardmäßige jQuery-UI-Slider-Widget zu Ihrer HTML-Webseite hinzuzufügen, fügen Sie den folgenden Code hinzu:

 
<!-- Begin Slider Container --> 
<div class="content_container_5"> 
 
<h2>Slider</h2> 
 
<div id="slider"></div> 
 
</div> 
<!-- End Slider Container -->

CSS (style.css)

Fügen Sie der style.css den folgenden CSS-Code hinzu:

 
.content_container_5	{ 
	width: 875px; 
	margin: 50px 0px 20px 20px; 
}

jQuery (jquery-functions.js)

Initialisieren Sie das Slider-Widget, indem Sie den folgenden Code in die externe JavaScript-Datei jquery-functions.js einfügen.

 
// jQuery UI Slider 
 
	$(function() { 
		$( "#slider" ).slider(); 
	});

Benutzerdefiniertes jQuery-UI-CSS

Diese Abschnitte der Stylesheet-Referenz enthalten die jQuery-UI-Klassen, die Stile auf das Schieberegler-Widget anwenden:

Referenz für benutzerdefinierte CSS-Stylesheets - Interaktionszustände

Wenn Sie beispielsweise das Hintergrundbild/den Farbverlauf des Schiebereglergriffs ändern möchten, der beim Bewegen des Mauszeigers angezeigt wird, sehen Sie sich die im Abschnitt Interaktionsstatus aufgeführten Klassen an. Erläuterungen zu den vier Interaktionszuständen sind oben im Abschnitt aufgeführt. Da dies ein "hover"-Zustand ist, gilt die ".ui-state-hover"-Klasse für dieses Accordion-Panel.

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #191919; background: #000 url(images/ui-bg-3.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

Denken Sie daran: Alle ThemeRoller-Themes haben die gleichen CSS-Klassen. Die Klassennamen sind also in jedem Standardthema genau gleich. Der CSS-Code und das Styling können jedoch unterschiedlich sein.

jQuery UI Progress Bar

Das standardmäßige jQuery UI Progress Bar Widget zeigt den aktuellen %-Abschluss für einen Prozess an.

HTML

Um das standardmäßige jQuery-UI-Progress Bar-Widget zu Ihrer HTML-Webseite hinzuzufügen, fügen Sie den folgenden Code hinzu:

 
<!-- Begin Progress Bar Container --> 
<div class="content_container_6"> 
	<h2>Progress Bar</h2> 
 
	<div id="progressbar"></div> 
</div> 
<!-- End Progress Bar Container -->

CSS (style.css)

Fügen Sie der style.css den folgenden CSS-Code hinzu:

 
.content_container_6	{ 
	width: 875px; 
	margin: 50px 0px 20px 20px; 
}

jQuery (jquery-functions.js)

Initialisieren Sie das -Widget, indem Sie den folgenden Code in die externe JavaScript-Datei jquery-functions.js einfügen.

 
// jQuery Progress Bar 
 
$(function() { 
	$( "#progressbar" ).progressbar({ 
		value: 37 
	}); 
});

Benutzerdefiniertes jQuery-UI-CSS

Diese Abschnitte der Stylesheet-Referenz enthalten die jQuery-UI-Klassen, die Stile auf das Progress Bar-Widget anwenden:

Wenn Sie beispielsweise das Hintergrundbild/den Farbverlauf des standardmäßigen %-vollständigen Balkens ändern möchten, sehen Sie sich die Klassen an, die im Abschnitt Spezifische jQuery-UI-Widgets aufgeführt sind.

Sehen Sie sich die Beispiele für CSS-Code für Zeilen an, die die Klasse ".ui-progressbar .ui-progressbar-value" enthalten und ein CSS-Hintergrundbild enthalten. Diese Beispielcodezeile enthält die Klasse und ein CSS-Hintergrundbild:

1
2	.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; }

In diesem Fall wollte ich, dass der Fortschrittsbalken ein anderes Hintergrundbild verwendet als die anderen Widgets. Da sich die Komponentencontainerklassen auf mehrere Widgets auswirken, habe ich die CSS-Codezeile geändert, die spezifisch für die Fortschrittsleiste ist.

Denken Sie daran: Alle ThemeRoller-Themes haben die gleichen CSS-Klassen. Die Klassennamen sind also in jedem Standardthema genau gleich. Der CSS-Code und das Styling können jedoch unterschiedlich sein.

jQuery-UI-Dialog

Ein Dialog ist ein schwebendes Fenster, das in einem Overlay angezeigt wird, das den gesamten Webseiteninhalt abdeckt. Es enthält eine Titelleiste, einen kleinen bis mittelgroßen Inhaltsbereich und kann mit einem "x"-Symbol geschlossen werden. Wenn die Länge des Inhalts die maximale Höhe überschreitet, wird automatisch eine Bildlaufleiste angezeigt.

HTML

Um ein jQuery-UI-Dialog-Widget mit Animation und einer UI-Schaltfläche zu Ihrer HTML-Webseite hinzuzufügen, fügen Sie den folgenden Code hinzu:

 
<!-- Begin Dialog Container --> 
<div class="content_container_7"> 
 
<h2>Dialog</h2> 
 
<div id="dialog" title="Basic dialog"> 
	<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 
 
<button id="opener">Open Dialog</button> 
 
</div> 
<!-- End Dialog Container -->

Aufschlüsselung des Markups

Der Titel des Dialogfelds wird festgelegt, indem der gewünschte Text in ein Titel-Tag eingefügt wird, das innerhalb des <div>-Tags wie folgt platziert wird:

1
2	<div id="dialog" title="Basic dialog">

Der Inhalt des Dialogfelds ist in den Tags <p></p> enthalten.

CSS (style.css)

Fügen Sie der style.css den folgenden CSS-Code hinzu:

 
.content_container_7	{ 
	width: 400px; 
	margin: 50px 0px 20px 20px; 
}

jQuery (jquery-functions.js)

Initialisieren Sie das Dialog-Widget, indem Sie den folgenden Code in die externe JavaScript-Datei jquery-functions.js einfügen.

 
// jQuery UI Dialog 
 
// increase the default animation speed to exaggerate the effect 
$.fx.speeds._default = 1000; 
$(function() { 
	$( "#dialog" ).dialog({ 
		autoOpen: false, 
		show: "blind", 
		hide: "explode" 
	}); 
 
	$( "#opener" ).click(function() { 
		$( "#dialog" ).dialog( "open" ); 
		return false; 
	}); 
}); 
 
// Dialog Button 
$(function() { 
	$( ".content_container_7 button" ).button({ 
        icons: { 
            primary: "ui-icon-newwin" 
        } 
    }); 
});

Aufschlüsselung der jQuery

"autoOpen: false" lässt den Dialog verborgen bleiben, bis .dialog("open") darauf aufgerufen wird. In diesem Fall wird der Dialog aufgerufen, wenn die Dialog-Schaltfläche angeklickt wird. Ohne diese Codezeile würde das Dialogfeld standardmäßig automatisch geöffnet.

Dieser Dialog wurde auch so eingestellt, dass beim Klicken auf die Dialog-Schaltfläche das Dialogfenster mit einem "blinden" Effekt angezeigt wird. Wenn Sie auf die Schaltfläche "x" klicken, um das Dialogfenster zu schließen, schließt sich der Dialog mit einem "Explodieren"-Effekt.

Eine ID "#opener" wurde auf den jQuery-Dialogöffnungsereignisteil des Codes angewendet. Diese ID wurde auch der Dialogschaltfläche hinzugefügt: <button id="opener">Open Dialog</button>. Diese ID verknüpft die Schaltfläche und das Ereignis zum Öffnen des Dialogfelds, sodass das Dialogfeld geöffnet wird, wenn auf die Schaltfläche geklickt wird.

Das jQuery UI Button Widget wurde verwendet, um eine schön formatierte Schaltfläche zum Öffnen des Dialogs zu erstellen. Das Schaltflächen-Widget wird in einem anderen Abschnitt dieses Tutorials ausführlicher behandelt. Im Folgenden finden Sie jedoch eine Aufschlüsselung des Codes der Dialogschaltfläche. Dies ist der jQuery-Code, der zum Generieren der Dialogschaltfläche verwendet wird:

 
$(function() { 
	$( ".content_container_7 button" ).button({ 
        icons: { 
            primary: "ui-icon-newwin" 
        } 
    }); 
});

Die Schaltfläche wird mithilfe eines <button></button>-Tags generiert. Die Schaltfläche wurde zusammen mit dem Dialog-Widget in einem <div> platziert, das die CSS-Klasse "content_container_7 button" (<div class="content_container_7">) hat. Auf diese CSS-Klasse wurde auch im jQuery-Code verwiesen.

Das jQuery-UI-Schaltflächen-Widget enthält eine Symboloption, mit der Sie angeben können, welche jQuery-UI-Symbole auf den einzelnen Schaltflächen verwendet werden sollen. Die Dialogschaltfläche wurde so eingestellt, dass Text angezeigt wird, und links neben dem Text wird ein Symbol "Neues Fenster" angezeigt.

Benutzerdefiniertes jQuery-UI-CSS

Diese Abschnitte der Stylesheet-Referenz enthalten die jQuery-UI-Klassen, die Stile auf das Dialog-Widget anwenden:

Wenn Sie beispielsweise das Hintergrundbild/den Verlauf der Dialogtitelleiste ändern möchten, sehen Sie sich die im Abschnitt Spezielle jQuery-UI-Widgets aufgeführten Klassen an.

Sehen Sie sich die Beispiele für CSS-Code für Zeilen an, die die Klasse ".ui-dialog .ui-dialog-titlebar" enthalten und ein CSS-Hintergrundbild enthalten. Diese Beispielcodezeile enthält die Klasse und ein CSS-Hintergrundbild:

1
2	.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; }

Nachdem Sie nun das entsprechende Codebeispiel gefunden haben, suchen Sie diese Codezeile im Stylesheet jQuery UI Theme und ersetzen Sie das Hintergrundbild durch Ihr eigenes benutzerdefiniertes Bild.

In diesem Fall wollte ich, dass die Titelleiste des Dialogfelds ein anderes Hintergrundbild als die anderen Widgets verwendet. Da sich die Komponentencontainer-Klassen auf mehrere Widgets auswirken, habe ich die CSS-Codezeile geändert, die für den Progress Bar spezifisch ist.

Denken Sie daran: Alle ThemeRoller-Themes haben die gleichen CSS-Klassen. Die Klassennamen sind also in jedem Standarddesign genau gleich. Der CSS-Code und das Styling können jedoch unterschiedlich sein.

jQuery UI Highlight / Error

HTML

Fügen Sie den folgenden Code hinzu, um Ihrer .html Webseite Markierungs-/Fehlerfelder hinzuzufügen (damit Sie das CSS-Stylesheet der jQuery-Benutzeroberfläche ordnungsgemäß formatieren können):

 
<!-- Begin Highlight / Error Container --> 
<div class="content_container_8"> 
 
<h2>Highlight / Error</h2> 
 
	<div class="ui-widget-highlight"> 
		<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">  
			<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> 
 
			<strong>Hey!</strong> Sample ui-state-highlight style.</p> 
		</div> 
	</div> 
 
	<br/> 
	<div class="ui-widget-error"> 
		<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">  
			<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>  
			<strong>Alert:</strong> Sample ui-state-error style.</p> 
		</div> 
	</div> 
 
</div> 
<!-- End Highlight / Error Container -->

Aufschlüsselung des Markups

Das Container-div "content_container_8" wurde im CSS auf eine feste Breite von 250px gesetzt, so dass der Inhaltsbereich verkleinert wird. Wenn das CSS keine feste Breite festlegen würde, würden sich die Inhaltsfelder auf eine Breite von 100% ausdehnen.

Die Standardschriftgröße für alle Demos ist auf 18px festgelegt. Die CSS-Klassen .ui-widget-highlight und .ui-widget-error wurden dem Markup und style.css hinzugefügt, so dass die Schriftgröße auf 12px reduziert wird.

CSS (style.css)

Fügen Sie style.css den folgenden CSS-Code hinzu:

1
2	/* Containers
3	--------------------------------------------------- */
4
5	.content_container_8 {
6	width: 250px;
7	margin: 50px 0px 70px 20px;
8	}
9
10	/* Highlight / Error
11	--------------------------------------------------- */
12
13	.ui-widget-highlight, .ui-widget-error {
14	font-size: 12px;
15	}

Benutzerdefiniertes jQuery UI CSS

Der Abschnitt Custom CSS Style Sheet Reference dieses Lernprogramms enthält die spezifischen Klassen und den Code, die zum Formatieren der Widgets erforderlich sind. Jede Zeile CSS-Code enthält eine Erklärung, was sie tut und wie sie den Stil von Widgets ändert. Weitere Details finden Sie in der Einleitung des Referenzabschnitts.

Diese Abschnitte des Stylesheet-Verweises enthalten die jQuery UI-Klassen, die Stile auf die Hervorhebung und den Fehler anwenden:

Wenn Sie beispielsweise das Hintergrundbild/den Verlauf des Hervorhebungsfelds und die Schriftfarbe ändern möchten, sehen Sie sich die im Abschnitt Interaktionshinweise aufgeführten Klassen an. Da es sich um einen "highlight"-Zustand handelt, gilt die Klasse ".ui-state-highlight".

1
2	.ui-state-highlight {border: 1px solid #fff; background: #eeeeee url(images/ui-bg-5.png) 50% 50% repeat-x; color: #000; }

Nachdem Sie nun das entsprechende Codebeispiel gefunden haben, suchen Sie diese Codezeile im jQuery UI Theme Stylesheet, ersetzen Sie das Hintergrundbild durch Ihr eigenes benutzerdefiniertes Bild und ändern Sie die Schriftfarbe.

Denken Sie daran: Alle ThemeRoller-Themes haben die gleichen CSS-Klassen. Die Klassennamen sind also in jedem Standarddesign genau gleich. Der CSS-Code und das Styling können jedoch unterschiedlich sein.

Ersetzen von jQuery-UI-Standardsymbolen durch benutzerdefinierte Symbole

jQuery UI ThemeRoller bietet ein vollständiges Set von CSS-Framework-Symbolen, die mit Bild-Sprites generiert werden. Sie können alle verfügbaren Standardsymbole auf ThemeRoller anzeigen. Wenn Sie den Mauszeiger über die Symbole bewegen, können Sie die Klassennamen sehen.

Obwohl die von jQuery UI ThemeRoller bereitgestellten Standardsymbole sehr gut aussehen, kann es vorkommen, dass Sie stattdessen benutzerdefinierte Symbole verwenden möchten. Die Verwendung eigener benutzerdefinierter Symbole erfordert eine starke Änderung des CSS-Stylesheets der jQuery-Benutzeroberfläche und das Schreiben von benutzerdefiniertem CSS-Code.

Wenn Sie einen CSS-Bild-Sprite für Ihre benutzerdefinierten Symbole erstellen möchten, kann Ihnen dieser Artikel dabei helfen.

Der Hauptvorteil der Verwendung von CSS-Bild-Sprites besteht darin, dass sie dazu beitragen, die Anzahl der HTTP-Anforderungen des Webbrowsers zu reduzieren und die Ladezeit der Webseite zu reduzieren. Der Nachteil der Verwendung von CSS-Bild-Sprites ist, dass, wenn Sie beispielsweise ein Symbol ändern müssen, Sie den Bildsprite in einem Grafikprogramm wie Photoshop ändern, den Sprite neu kompilieren und speichern müssen. Wenn Sie eine Website aktualisieren müssen, die Sie ursprünglich nicht geplant haben, verfügen Sie möglicherweise nicht über die ursprünglichen Grafikdateien für die Sprites. Dies erschwert die Aktualisierung dieses einzelnen Symbols.

In diesem Tutorial werden einzelne PNG-Bilder für die benutzerdefinierten Symbole anstelle von CSS-Bild-Sprites verwendet.

Hinweis: Obwohl es möglich ist, größere Symbole zu verwenden, scheinen die Standardsymbole der Größe 16 x 16 am besten mit jQuery UI-Widgets zu funktionieren. Wenn Sie versuchen möchten, größere Symbole zu verwenden, suchen Sie den folgenden Code und ändern Sie die Symbolgröße.

1
2	.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }

Benutzerdefinierte Symbole - jQuery UI Accordion #1

Demo 8, die in den Quelldateien enthalten ist, zeigt vier Accordion-Widgets an. Jedes Accordion-Widget verwendet unterschiedliche benutzerdefinierte Symbole und jQuery-UI-Optionen.

Accordion #1 von Demo 8 ist ein Standardakkordeon mit Panels, die sich aufClick öffnen und zwei benutzerdefinierte Symbole verwenden:

Grünes Kreispfeil-Abwärtssymbol für das aktive/ausgewählte Accordion-Bedienfeld.
Grüner Kreis Pfeil nach rechts Symbol für die Bedienfelder im Standardzustand, beim Mouseover und beim Tastaturfokus.

Bevor Sie beginnen

Nachdem Sie die Schritte 1 bis 6 des Tutorials und die Anweisungen im Abschnitt jQuery UI Accordion abgeschlossen haben, können Sie dem Accordion der jQuery-Benutzeroberfläche benutzerdefinierte Symbole hinzufügen. Es gibt auch einen Abschnitt namens "Ersetzen von jQuery UI-Standardsymbolen durch benutzerdefinierte Symbole", der einige zusätzliche Informationen enthält und gelesen werden sollte, bevor Sie fortfahren.

Benutzerdefinierte jQuery UI CSS

Lesen Sie zunächst den Referenz für benutzerdefinierte CSS-Stylesheets - Benutzerdefinierte Symbole und ändern Sie das jQuery UI Stylesheet wie beschrieben.

Der nächste Schritt besteht darin, benutzerdefinierten CSS-Code hinzuzufügen, der die standardmäßigen jQuery-UI-Symbole durch benutzerdefinierte Symbole ersetzt. Der Abschnitt Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Accordion #1 enthält den benutzerdefinierten CSS-Code und listet die neuen UI-Klassen auf, die erstellt wurden, damit die benutzerdefinierten Symbole hinzugefügt werden können. Kopieren Sie den benutzerdefinierten CSS-Code und fügen Sie ihn direkt unter den drei Codezeilen im Abschnitt Symbole ein, die als /*-Zustände und Bilder */ gekennzeichnet sind.

jQuery (jquery-functions.js)

Der jQuery UI Accordion-Code in der Datei jquery-functions.js muss geändert werden, um die neuen UI-CSS-Klassen widerzuspiegeln, die für "header" und "headerSelected" im benutzerdefinierten CSS-Code erstellt wurden. In diesem Fall ist die Klasse für beide identisch: .ui-icon-green-circle-arrow-e. Sie müssen die Klassen für "hover" oder "focus" nicht hinzufügen.

Bearbeiten Sie den Accordioncode in der Datei jquery-functions.js so, dass .ui-icon-green-circle-arrow-e auf den "header" und "headerSelected" wie folgt angewendet wurde:

 
// jQuery UI Accordion #1 - Standard, Icons 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-green-circle-arrow-e", 
		headerSelected: "ui-icon-green-circle-arrow-s" 
	}; 
	$( "#accordion_1" ).accordion({ 
		icons: icons, 
		autoHeight: false, 
		navigation: true 
	});		 
});

Aufschlüsselung der jQuery

jQuery UI Accordion enthält eine Symbole-Option, mit der Sie Symbole für "header" und "headerSelected" angeben können und in der ersten Hälfte des jQuery-Codes werden die Symbole gesetzt. Neue CSS-Klassen wurden erstellt, damit benutzerdefinierte Symbole verwendet werden können. Der jQuery-Code wurde geändert, um diese neuen Klassen widerzuspiegeln:

header: "ui-icon-green-circle-arrow-e"
headerSelected: "ui-icon-green-circle-arrow-s"

Hinweis: Fügen Sie den "Punkt" nicht ein, wenn Sie die Klassen zum jQuery-Code hinzufügen. So würden Sie zum Beispiel header: "ui-icon-green-circle-arrow-e" schreiben und nicht header: ".ui-icon-green-circle-arrow-e".

autoHeight bewirkt, dass das Accordion den Teil mit dem höchsten Inhalt als Höhenreferenz für alle anderen Teile verwendet. Dies bedeutet, dass die Höhe des Inhaltsbereichs für alle Accordion-Panels die gleiche Höhe des Panels mit dem meisten Inhalt beträgt. Für dieses Accordion wurde autoHeight auf "false" gesetzt, so dass jedes Accordion-Panel eine Höhe hat, die auf seinem eigenen Inhalt basiert. Das Accordion-Widget hat autoHeight standardmäßig aktiviert.

navigation: true bewirkt, dass das Accordion nach dem Anker sucht, der mit location.href übereinstimmt, und ihn aktiviert. Das heißt, wenn ein Bedienfeld mit dem aktuellen Speicherort übereinstimmt, wird dieses Bedienfeld beim Laden der Seite automatisch geöffnet.

Das ist alles, was es zu tun gibt. Sie sollten nun benutzerdefinierte Symbole im Accordion-Widget angezeigt haben.

Benutzerdefinierte Symbole - jQuery UI Accordion #2

Demo 8, die in den Quelldateien enthalten ist, zeigt vier Accordion-Widgets an. Jedes Accordion-Widget verwendet unterschiedliche benutzerdefinierte Symbole und jQuery-UI-Optionen.

Standardmäßig halten Accordions immer einen Abschnitt offen. Accordion #2 wurde so eingestellt, dass die zusammenklappbare Option wahr ist. Die Panels werden auf Klicken geöffnet und geschlossen. Dieses Accordion verwendet auch zwei benutzerdefinierte Symbole:

Cog Minus Icon für das aktive/ausgewählte Accordion-Panel.
Cog Plus Icon für die Panels im Standardzustand, beim Mouseover und beim Tastaturfokus.

Bevor Sie beginnen

Benutzerdefiniertes jQuery UI CSS

Lesen Sie zunächst den Referenz für benutzerdefinierte CSS-Stylesheets - Benutzerdefinierte Symbole und ändern Sie das jQuery UI Stylesheet wie beschrieben.

Der nächste Schritt besteht darin, benutzerdefinierten CSS-Code hinzuzufügen, der die standardmäßigen jQuery-UI-Symbole durch benutzerdefinierte Symbole ersetzt. Der Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Accordion #2 enthält den benutzerdefinierten CSS-Code und listet die neuen UI-Klassen auf, die erstellt wurden, damit die benutzerdefinierten Symbole hinzugefügt werden können. Kopieren Sie den benutzerdefinierten CSS-Code und fügen Sie ihn direkt unter den drei Codezeilen im Abschnitt Symbole ein, die als /*-Zustände und Bilder */ gekennzeichnet sind.

jQuery (jquery-functions.js)

Der jQuery UI Accordion-Code in der Datei jquery-functions.js muss geändert werden, um die neuen UI-CSS-Klassen widerzuspiegeln, die für "header" und "headerSelected" im benutzerdefinierten CSS-Code erstellt wurden. Die neuen CSS-Klassen sind .ui-icon-cog-plus und .ui-icon-cog-minus. Sie müssen die Klassen für "Hover" oder "Focus" nicht hinzufügen.

Bearbeiten Sie den Accordioncode in der Datei jquery-functions.js so, dass .ui-icon-cog-plus auf den "Header" angewendet wurde und .ui-icon-cog-minus auf "headerSelected" wie folgt angewendet wurde:

 
// jQuery UI Accordion #2 - Collapsible, Icons 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-cog-plus", 
		headerSelected: "ui-icon-cog-minus" 
	}; 
	$( "#accordion_2" ).accordion({ 
		collapsible: true,  
		icons: icons 
	});		 
});

Aufschlüsselung der jQuery

header: "ui-icon-cog-plus"
headerSelected: "ui-icon-cog-minus"

Accordions halten standardmäßig immer einen Abschnitt offen. Durch das Hinzufügen von "collapsible: true" sind die Accordionplatten zusammenklappbar. Dies bedeutet, dass Sie ein Accordion-Panel durch ein Trigger-Ereignis öffnen und schließen können, Klick ist die Standardeinstellung.

Hinweis: Fügen Sie den "Punkt" nicht ein, wenn Sie die Klassen zum jQuery-Code hinzufügen. So würden Sie zum Beispiel header: "ui-icon-cog-plus" schreiben und nicht header: ".ui-icon-cog-plus".

Das ist alles, was es zu tun gibt. Sie sollten nun benutzerdefinierte Symbole im Accordion-Widget angezeigt haben.

Benutzerdefinierte Symbole - jQuery UI Accordion #3

Demo 8, die in den Quelldateien enthalten ist, zeigt vier Accordion-Widgets an. Jedes Accordion-Widget verwendet unterschiedliche benutzerdefinierte Symbole und jQuery-UI-Optionen.

Standardmäßig halten Accordions immer einen Abschnitt offen. Accordion #3 wurde so eingestellt, dass die zusammenklappbare Option wahr ist. Die Paneele für dieses Accordion öffnen und schließen sich jedoch auf DemEr. Dieses Accordion verwendet auch zwei benutzerdefinierte Symbole:

Rotes Kreis-Lösch-/Minus-Symbol für das aktive/ausgewählte Accordion-Bedienfeld.
Grünes Kreis-Add/Plus-Symbol für die Bedienfelder im Standardzustand, beim Mouseover und beim Tastaturfokus.

Bevor Sie beginnen

Benutzerdefiniertes jQuery UI CSS

Lesen Sie zunächst den Abschnitt Referenz für benutzerdefinierte CSS-Stylesheets - Benutzerdefinierte Symbole und ändern Sie das jQuery UI Stylesheet wie beschrieben.

Der nächste Schritt besteht darin, benutzerdefinierten CSS-Code hinzuzufügen, der die standardmäßigen jQuery-UI-Symbole durch benutzerdefinierte Symbole ersetzt. Der Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Accordion #3 enthält den benutzerdefinierten CSS-Code und listet die neuen UI-Klassen auf, die erstellt wurden, damit die benutzerdefinierten Symbole hinzugefügt werden können. Kopieren Sie den benutzerdefinierten CSS-Code und fügen Sie ihn direkt unter den drei Codezeilen im Abschnitt Symbole ein, die als /*-Zustände und Bilder */ gekennzeichnet sind.

jQuery (jquery-functions.js)

Der jQuery UI Accordion-Code in der Datei jquery-functions.js muss geändert werden, um die neuen UI-CSS-Klassen widerzuspiegeln, die für "header" und "headerSelected" im benutzerdefinierten CSS-Code erstellt wurden. Die neuen CSS-Klassen sind .ui-icon-green-add und .ui-icon-red-delete. Sie müssen die Klassen für "hover" oder "focus" nicht hinzufügen.

Bearbeiten Sie den Accordioncode in der Datei jquery-functions.js so, dass .ui-icon-green-add auf den "Header" angewendet wurde und .ui-icon-red-delete auf "headerSelected" wie folgt angewendet wurde:

 
// jQuery UI Accordion #3 - Collapsible, onHover, Icons 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-green-add", 
		headerSelected: "ui-icon-red-delete" 
	}; 
	$( "#accordion_3" ).accordion({ 
		event: "mouseover", 
		collapsible: true,  
		icons: icons, 
		autoHeight: false, 
		navigation: true 
	});		 
});

Aufschlüsselung der jQuery

header: "ui-icon-green-add"
headerSelected: "ui-icon-red-delete"

autoHeight bewirkt, dass das Accordion den Teil mit dem höchsten Inhalt als Höhenreferenz für alle anderen Teile verwendet. Dies bedeutet, dass die Höhe des Inhaltsbereichs für alle Accordionpanels die gleiche Höhe des Panels mit dem meisten Inhalt beträgt. Für dieses Accordion wurde autoHeight auf "false" gesetzt, so dass jedes Accordionpanel eine Höhe hat, die auf seinem eigenen Inhalt basiert. Das Accordion-Widget hat autoHeight standardmäßig aktiviert.

Hinweis: Fügen Sie den "Punkt" nicht ein, wenn Sie die Klassen zum jQuery-Code hinzufügen. So würden Sie zum Beispiel header: "ui-icon-green-add" schreiben und nicht header: ".ui-icon-green-add".

Das ist alles, was es zu tun gibt. Sie sollten nun benutzerdefinierte Symbole im Accordion-Widget angezeigt haben.

Benutzerdefinierte Symbole - jQuery UI Accordion #4

Demo 8, die in den Quelldateien enthalten ist, zeigt vier Accordion-Widgets an. Jedes Accordion-Widget verwendet unterschiedliche benutzerdefinierte Symbole und jQuery-UI-Optionen.

Accordion #4 von Demo 8 verfügt über Panels, die sich auf Klicken öffnen lassen (sie sind nicht so eingestellt, dass sie zusammenklappbar sind) und verwendet drei benutzerdefinierte Symbole:

Rotes Kreispfeil nach unten Symbol für das aktive/ausgewählte Accordion-Bedienfeld.
Roter Kreispfeil nach rechts Symbol für die Standard-Accordion-Bedienfelder.
Blauer Kreispfeil nach rechts Symbol für die Bedienfelder beim Mouseover und beim Tastaturfokus.

Bevor Sie beginnen

Benutzerdefiniertes jQuery UI CSS

Lesen Sie zunächst den Abschnitt Referenz für benutzerdefinierte CSS-Stylesheets - Benutzerdefinierte Symbole und ändern Sie das jQuery UI Stylesheet wie beschrieben.

Der nächste Schritt besteht darin, benutzerdefinierten CSS-Code hinzuzufügen, der die standardmäßigen jQuery-UI-Symbole durch benutzerdefinierte Symbole ersetzt. Der Abschnitt Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Accordion #4 enthält den benutzerdefinierten CSS-Code und listet die neuen UI-Klassen auf, die erstellt wurden, damit die benutzerdefinierten Symbole hinzugefügt werden können. Kopieren Sie den benutzerdefinierten CSS-Code und fügen Sie ihn direkt unter den drei Codezeilen im Abschnitt Symbole ein, die als /*-Zustände und Bilder */ gekennzeichnet sind.

jQuery (jquery-functions.js)

Der jQuery UI Accordion-Code in der Datei jquery-functions.js muss geändert werden, um die neuen UI-CSS-Klassen widerzuspiegeln, die für "header" und "headerSelected" im benutzerdefinierten CSS-Code erstellt wurden. Die neuen CSS-Klassen sind .ui-icon-custom-next und .ui-icon-custom-down. Sie müssen die Klassen für "Hover" oder "Focus" nicht hinzufügen.

Bearbeiten Sie den Accordioncode in der Datei jquery-functions.js so, dass .ui-icon-custom-next auf den "Header" angewendet wurde und .ui-icon-custom-down wie folgt auf "headerSelected" angewendet wurde:

 
// jQuery UI Accordion #4 - onClick, Icons 
	 
$(function() { 
	var icons = { 
		header: "ui-icon-custom-next", 
		headerSelected: "ui-icon-custom-down" 
	}; 
	$( "#accordion_4" ).accordion({ 
		icons: icons 
	});		 
});

Aufschlüsselung der jQuery

jQuery UI Accordion enthält eine Icons-Option, mit der Sie Symbole für "header" und "headerSelected" angeben können und in der ersten Hälfte des jQuery-Codes werden die Symbole gesetzt. Neue CSS-Klassen wurden erstellt, damit benutzerdefinierte Symbole verwendet werden können. Der jQuery-Code wurde geändert, um diese neuen Klassen widerzuspiegeln:

header: "ui-icon-custom-next"
headerSelected: "ui-icon-custom-down"

Hinweis: Fügen Sie den "Punkt" nicht ein, wenn Sie die Klassen zum jQuery-Code hinzufügen. So würden Sie zum Beispiel header: "ui-icon-custom-next" schreiben und nicht header: ".ui-icon-custom-next".

Das ist alles, was es zu tun gibt. Sie sollten nun benutzerdefinierte Symbole im Accordion-Widget angezeigt haben.

Benutzerdefinierte Symbole - jQuery UI Schaltfläche

Bevor Sie beginnen

Nachdem Sie die Schritte 1 bis 6 des Tutorials und die Anweisungen im Abschnitt jQuery UI Button abgeschlossen haben, können Sie benutzerdefinierte Symbole zu jQuery UI-Schaltflächen hinzufügen. Es gibt auch einen Abschnitt namens "Ersetzen von jQuery UI-Standardsymbolen durch benutzerdefinierte Symbole", der einige zusätzliche Informationen enthält und gelesen werden sollte, bevor Sie fortfahren.

Benutzerdefiniertes jQuery UI CSS

Lesen Sie zunächst den Abschnitt Referenz für benutzerdefinierte CSS-Stylesheets - Benutzerdefinierte Symbole und ändern Sie das jQuery UI Stylesheet wie beschrieben.

Der nächste Schritt besteht darin, benutzerdefinierten CSS-Code hinzuzufügen, der die standardmäßigen jQuery-UI-Symbole durch benutzerdefinierte Symbole ersetzt. Der Abschnitt Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Schaltflächen enthält den benutzerdefinierten CSS-Code und listet die neuen UI-Klassen auf, die erstellt wurden, damit die benutzerdefinierten Symbole hinzugefügt werden können. Kopieren Sie den benutzerdefinierten CSS-Code und fügen Sie ihn direkt unter den drei Codezeilen im Abschnitt Symbole ein, die als /*-Zustände und Bilder */ gekennzeichnet sind.

jQuery (jquery-functions.js)

Der jQuery UI Button-Code in der Datei jquery-functions.js muss geändert werden, um die neuen UI-CSS-Klassen widerzuspiegeln, die im benutzerdefinierten CSS-Code erstellt wurden. Die neuen CSS-Klassen sind:

.ui-icon-custom-locked
.ui-icon-custom-gear
.ui-icon-custom-arrow-down
.ui-icon-custom-gear-

Bearbeiten Sie den Schaltfläche-Code in der Datei jquery-functions.js so, dass die neuen Klassen wie folgt enthalten sind:

 
// jQuery UI Button 
 
$(function() { 
	$( ".demo button:first" ).button({ 
        icons: { 
            primary: "ui-icon-custom-locked" 
        }, 
        text: false 
    }).next().button({ 
        icons: { 
            primary: "ui-icon-custom-locked" 
        } 
    }).next().button({ 
        icons: { 
            primary: "ui-icon-custom-gear", 
            secondary: "ui-icon-custom-arrow-down" 
        } 
    }).next().button({ 
        icons: { 
            primary: "ui-icon-custom-gear", 
            secondary: "ui-icon-custom-arrow-down" 
        }, 
        text: false 
    }).next().button({ 
        icons: { 
			primary: "ui-icon-custom-locked", 
            secondary: "ui-icon-custom-gear-2" 
        } 
	}); 
});

Hinweis: Fügen Sie den "Punkt" nicht ein, wenn Sie die Klassen zum jQuery-Code hinzufügen. So würden Sie zum Beispiel primär schreiben: "ui-icon-custom-locked" nicht primär: ".ui-icon-custom-locked".

Das ist alles, was es zu tun gibt. Sie sollten nun benutzerdefinierte Symbole im Schaltflächen-Widget angezeigt haben.

Benutzerdefinierte Symbole - Datepicker

Bevor Sie beginnen

Nachdem Sie die Schritte 1 bis 6 des Lernprogramms und die Anweisungen im Abschnitt jQuery UI Datepicker abgeschlossen haben, können Sie dem jQuery UI Datepicker-Widget benutzerdefinierte Symbole hinzufügen. Es gibt auch einen Abschnitt namens "Ersetzen von jQuery UI-Standardsymbolen durch benutzerdefinierte Symbole", der einige zusätzliche Informationen enthält und gelesen werden sollte, bevor Sie fortfahren.

Benutzerdefiniertes jQuery UI CSS

Lesen Sie zunächst den Abschnitt Referenz für benutzerdefinierte CSS-Stylesheets - Benutzerdefinierte Symbole und ändern Sie das jQuery UI Stylesheet wie beschrieben.

Das Anpassen der Symbole für die Datepicker erfolgt etwas anders als bei den anderen jQuery-UI-Widgets. Anstatt benutzerdefinierte Symbolklassen für den datepicker zu erstellen, wird stattdessen der datepicker-CSS-Code geändert.

Der Abschnitt Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Datepicker enthält den geänderten CSS-Code, damit die benutzerdefinierten Symbole hinzugefügt werden können. Kopieren Sie den benutzerdefinierten CSS-Code und fügen Sie ihn direkt unter den drei Codezeilen im Abschnitt Symbole ein, die als /*-Zustände und Bilder */ gekennzeichnet sind. Es gibt zusätzliche Änderungen, die am DATEPICKER-CSS-Code vorgenommen werden müssen, der im Abschnitt Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Datepicker erläutert wird.

Das ist alles, was es zu tun gibt. Der Code in der Datei jquery-functions.js muss nicht geändert werden. Sie sollten nun benutzerdefinierte Symbole im Datumspicker-Widget anzeigen.

Benutzerdefinierte Symbole - Dialog Schaltfläche

Bevor Sie beginnen

Nachdem Sie die Schritte 1 bis 6 des Tutorials und die Anweisungen im Abschnitt jQuery UI Schaltfläche abgeschlossen haben, können Sie mit dem Hinzufügen eines benutzerdefinierten Symbols zur Dialogfeldschaltfläche der jQuery-Benutzeroberfläche fortfahren. Es gibt auch einen Abschnitt namens "Ersetzen von jQuery UI-Standardsymbolen durch benutzerdefinierte Symbole", der einige zusätzliche Informationen enthält und gelesen werden sollte, bevor Sie fortfahren.

Benutzerdefiniertes jQuery UI CSS

Lesen Sie zunächst den Abschnitt Referenz für benutzerdefinierte CSS-Stylesheets - Benutzerdefinierte Symbole und ändern Sie das jQuery UI Stylesheet wie beschrieben.

Der nächste Schritt besteht darin, benutzerdefinierten CSS-Code hinzuzufügen, der das standardmäßige jQuery-UI-Symbol durch ein benutzerdefiniertes Symbol ersetzt. Der Abschnitt Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Dialogschaltfläche enthält den benutzerdefinierten CSS-Code und listet die neuen UI-Klassen auf, die erstellt wurden, damit die benutzerdefinierten Symbole hinzugefügt werden können. Kopieren Sie den benutzerdefinierten CSS-Code und fügen Sie ihn direkt unter den drei Codezeilen im Abschnitt Symbole ein, die als /*-Zustände und Bilder */ gekennzeichnet sind.

jQuery (jquery-functions.js)

Der Code für die Dialogfeldschaltfläche jQuery UI in der Datei jquery-functions.js muss geändert werden, um die neue UI-CSS-Klasse widerzuspiegeln, die im benutzerdefinierten CSS-Code erstellt wurde. Die neue CSS-Klasse lautet: ".ui-icon-custom-newwin"

Bearbeiten Sie den Code der Dialogschaltfläche in der Datei jquery-functions.js so, dass die neue Klasse wie folgt enthalten ist:

 
// Dialog Button 
$(function() { 
	$( ".content_container_7 button" ).button({ 
        icons: { 
            primary: "ui-icon-custom-newwin" 
        } 
	}); 
});

Hinweis: Fügen Sie den "Punkt" nicht ein, wenn Sie die Klassen zum jQuery-Code hinzufügen. So würden Sie zum Beispiel primär schreiben: "ui-icon-custom-newwin" und nicht primär: ".ui-icon-custom-newwin".

Das ist alles, was es zu tun gibt. Sie sollten nun ein benutzerdefiniertes Symbol in der Dialogschaltfläche angezeigt haben.

Benutzerdefinierte Symbole - Highlight / Error

Bevor Sie beginnen

Nachdem Sie die Schritte 1 bis 6 des Tutorials und die Anweisungen im Abschnitt jQuery UI Highlight / Error abgeschlossen haben, können Sie benutzerdefinierte Symbole zu jQuery UI Highlight / Error hinzufügen. Es gibt auch einen Abschnitt namens "Ersetzen von jQuery UI-Standardsymbolen durch benutzerdefinierte Symbole", der einige zusätzliche Informationen enthält und gelesen werden sollte, bevor Sie fortfahren.

Benutzerdefiniertes jQuery UI CSS

Lesen Sie zunächst den Abschnitt Referenz für benutzerdefinierte CSS-Stylesheets - Benutzerdefinierte Symbole und ändern Sie das jQuery UI Stylesheet wie beschrieben.

Der nächste Schritt besteht darin, benutzerdefinierten CSS-Code hinzuzufügen, der die standardmäßigen jQuery-UI-Symbole durch benutzerdefinierte Symbole ersetzt. Der Abschnitt Referenz für benutzerdefinierte CSS-Stylesheets - Benutzerdefinierte Symbole - Highlight / Error enthält den benutzerdefinierten CSS-Code und listet die neuen UI-Klassen auf, die erstellt wurden, damit die benutzerdefinierten Symbole hinzugefügt werden können. Kopieren Sie den benutzerdefinierten CSS-Code und fügen Sie ihn direkt unter den drei Codezeilen im Abschnitt Symbole ein, die als /*-Zustände und Bilder */ gekennzeichnet sind.

Ändern des HTML-Codes

Das Markup auf der Webseite muss geändert werden, um die neuen UI-CSS-Klassen widerzuspiegeln, die im benutzerdefinierten CSS-Code erstellt wurden. Die neuen CSS-Klassen sind:

.ui-icon-custom-info
.ui-icon-custom-alert

Bearbeiten Sie das Markup so, dass die neuen Klassen wie folgt eingeschlossen werden:

 
<!-- Begin Highlight / Error Container --> 
<div class="content_container_8"> 
 
	<h2>Highlight / Error</h2> 
 
	<div class="ui-widget-highlight"> 
		<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">  
			<p><span class="ui-icon ui-icon-custom-info" style="float: left; margin-right: .3em;"></span> 
 
			<strong>Hey!</strong> Sample ui-state-highlight style.</p> 
		</div> 
	</div> 
 
	<br/> 
	<div class="ui-widget-error"> 
		<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">  
			<p><span class="ui-icon ui-icon-custom-alert" style="float: left; margin-right: .3em;"></span>  
			<strong>Alert:</strong> Sample ui-state-error style.</p> 
 
		</div> 
	</div> 
 
</div> 
<!-- End Highlight / Error Container -->

Das ist alles, was es zu tun gibt. Sie sollten nun benutzerdefinierte Symbole in den Feldern Hervorheben / Fehler anzeigen.

Benutzerdefinierte CSS-Stylesheet-Referenz - Einführung

Der Abschnitt Referenz für benutzerdefinierte CSS-Stylesheets dieses Tutorials enthält die spezifischen Klassen und den Code, die zum Formatieren der Widgets erforderlich sind. Jede Zeile CSS-Code enthält eine Erklärung, was sie tut und wie sie den Stil von Widgets ändert. Die jQuery UI Stylesheets in allen Demos in der Quelldateien-ZIP wurden ebenfalls stark kommentiert, um zu erklären, wie bestimmte Zeilen CSS-Code die Widgets gestalten.

Die jQuery-Benutzeroberfläche verfügt über ein CSS-Framework zum Erstellen benutzerdefinierter jQuery-Widgets, das Klassen enthält, die von allen standardmäßigen ThemeRoller-Designs verwendet werden. Durch die Verwendung der gleichen Klassen und Markupkonventionen können Codeintegration und -designing relativ einfach sein. Unabhängig davon, welches ThemeRoller-Design Sie ändern möchten, sind die im Referenzabschnitt aufgeführten Standardklassen genau gleich, nur der CSS-Code und das Styling unterscheiden sich.

Hinweis: Die jQuery-UI-Klassen für Komponentencontainer, Interaktionszustände, Interaktionshinweise und Standardsymbole wenden Stile auf mehrere Widgets an. Möglicherweise möchten Sie, dass auf bestimmte Widgets leicht unterschiedliche Stile angewendet werden.In diesem Abschnitt des Tutorials wird erläutert, wie Sie verschiedene Stile auf bestimmte Widgets anwenden.

Benutzerdefinierte CSS-Stylesheet-Referenz - Komponentencontainer

.ui-widget-content- Wendet Stile auf den Inhaltscontainer von jQuery UI Widgets an, der Registerkarten, Accordion, Datepicker und Dialog enthält.

.ui-widget-header - Wendet Stile auf den Header-Container von jQuery UI Widgets an, der Registerkarten, Datumsauswahl, Dialogfeld und Fortschrittsleiste enthält.

Beispiele:

1
2	.ui-widget-content { border: 1px solid #666; background-color: #000; color: #fff; }

CSS formatiert den Inhaltscontainer mit einem dunkelgrauen Rahmen, einer schwarzen Hintergrundfarbe und einer weißen Schriftfarbe.

1
2	.ui-widget-content a { color: #80cccc; }

CSS formatiert die normalen Standardlinks im Inhaltscontainer mit einer hellgrünen Schriftfarbe.

1
2	.ui-widget-content a:hover { color: #009999; }

CSS formatiert die Hover/Mouse-Over-Links im Content-Container mit einer dunkelgrünen Schriftfarbe. Diese Codezeile ist nicht im standardmäßigen ThemeRoller Theme Theme CSS-Stylesheet enthalten. Wenn Sie möchten, dass die Links in den Widget-Inhaltscontainern beim Mouseover eine andere Farbe haben, fügen Sie den obigen Code direkt unter ".ui-widget-content a { color: #hex-color; }" hinzu.

1
2	.ui-widget-header { border: 1px solid #191919; background: #666 url(images/ui-bg-2.png) 50% 50% repeat-x; color: #fff; font-weight: bold; }

CSS formatiert den Header-Container mit einer fast schwarzen Rahmenfarbe, dunkelgrauer Hintergrundfarbe und einem bestimmten Hintergrundbild, das eine 50% horizontale Position, 50% vertikale Position hat, nur horizontal wiederholt, weiße Schriftfarbe, die auch fett ist.

Benutzerdefinierte CSS-Stylesheet-Referenz - Interaktionszustände

.ui-state-default - Wendet "anklickbare Standard"-Containerstile auf jQuery UI Widgets an, die Registerkarten, Accordion, Schaltflächen, Datepicker und Schieberegler enthalten.

.ui-state-hover - Wendet "clickable hover" Containerstile beim Mouseover auf jQuery UI Widgets an, die Registerkarten, Accordion, Schaltflächen, Datepicker und Schieberegler enthalten.

.ui-state-focus - Wendet "anklickbare Hover"-Containerstile auf den Tastaturfokus auf jQuery UI Widgets an, die Registerkarten, Akkordeon, Schaltflächen, Datepicker und Schieberegler enthalten.

.ui-state-active - Wendet "anklickbare aktive" Containerstile beim Mousedown auf jQuery UI Widgets an, die Registerkarten, Accordion, Schaltflächen, Datepicker und Schieberegler enthalten.

Beispiele:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #696969; background: #353535 url(images/ui-bg-4.png) 50% 50% repeat-x; font-weight: bold; color: #eee; }

CSS formatiert die "anklickbaren Standard" -Containerstile mit einem dunkelgrauen Rahmen, einer fast schwarzen Hintergrundfarbe und einem bestimmten Hintergrundbild, das eine horizontale Position von 50% und eine vertikale Position von 50% aufweist, die nur horizontal wiederholt wird, fette Schriftart, die eine sehr hellgraue Farbe hat.

1
2	.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #eee; text-decoration: none; }

CSS formatiert die normalen Standardlinks im Container "anklickbare Standard" mit einer sehr hellgrauen Schriftfarbe und ohne Unterstreichung.

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #191919; background: #000 url(images/ui-bg-3.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

CSS formatiert die "clickable Hover" -Stile beim Mouseover und beim Tastaturfokus mit einem fast schwarzen Rand, schwarzer Hintergrundfarbe und einem spezifischen Hintergrundbild, das eine 50% horizontale Position, 50% vertikale Position hat, wiederholt sich nur horizontal, fette Schriftart, die eine weiße Farbe ist.

 
.ui-state-hover a, .ui-state-hover a:hover { color: #fff; text-decoration: none; }  
[/html] 
<p> 
CSS formats the hover / mouse over links in the "clickable hover" container styles on mouseover with a white font color and no underline. 
</p> 
[css] 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; }

CSS formatiert die "anklickbaren aktiven" Containerstile mit mousedown mit einem dunkelgrünen Rand, einer dunkelgrünen Hintergrundfarbe und einem bestimmten Hintergrundbild, das eine 50% horizontale Position, 50% vertikale Position hat, wiederholt sich nur horizontal, fette Schriftart, die eine weiße Farbe ist.

1
2	.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #fff; text-decoration: none; }

CSS formatiert die "anklickbaren aktiven" Linkstile (Standard, aktiv, besucht) mit einer weißen Schriftfarbe und ohne Unterstreichung.

Benutzerdefinierte CSS-Stylesheet-Referenz - Interaktionshinweise

.ui-state-highlight

Wendet "Highlight"-Containerstile auf jQuery UI Widgets an, die Datepicker und Markierungsnachricht enthalten.

Beispiele:

1
2	.ui-state-highlight {border: 1px solid #fff; background: #eee url(images/ui-bg-5.png) 50% 50% repeat-x; color: #000; }

CSS formatiert den "Highlight"-Container mit einem weißen Rand, einer sehr hellgrauen Hintergrundfarbe und einem bestimmten Hintergrundbild, das eine horizontale Position von 50%, eine vertikale Position von 50% und eine nur horizontale Wiederholung und eine schwarze Schriftfarbe aufweist.

1
2	.ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fff; background: #eee url(images/ui-bg-5.png) 50% 50% repeat-x; color: #2e7db2; }

CSS formatiert das "Highlight" für den Widget-Inhalt und die Header-Container mit einem weißen Rand, einer sehr hellgrauen Hintergrundfarbe und einem spezifischen Hintergrundbild, das eine horizontale Position von 50%, eine vertikale Position von 50% hat, nur horizontal wiederholt, und eine mittlere blaue Schriftfarbe aus Stahl.

Benutzerdefinierte CSS-Stylesheet-Referenz - Standard-UI-Symbole

.ui-icon - Dies ist die Basisklasse, die auf icon-Elemente angewendet werden soll. Die Größe der zu verwendenden Symbole wird von dieser Klasse festgelegt. Diese Klasse legt auch das standarde CSS-Spritebild fest, das für Symbole verwendet werden soll.

Beispiele:

1
2	.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }

CSS formatiert die Symbole auf die Größe 16px x 16px und legt das Standard-CSS-Sprite-Bild fest.

1
2	.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }

CSS legt das Standard-Sprite-Bild für Symbole fest, die im Header-Container angezeigt werden.

1
2	.ui-state-default .ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png); }

CSS legt das Standard-Sprite-Bild für Symbole fest, die in "clickable default"-Containerstilen angezeigt werden.

1
2	.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_009999_256x240.png); }

CSS legt das Standard-Sprite-Bild für Symbole fest, die beim Mouseover und beim Tastaturfokus in "clickable hover"-Stil angezeigt werden.

1
2	.ui-state-active .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }

CSS legt das Standard-Sprite-Bild für Symbole fest, die in "clickable active" Containerstilen bei Mousedown angezeigt werden.

Benutzerdefinierte CSS-Stylesheet-Referenz - Spezifische jQuery-UI-Widgets

Alle standardmäßigen ThemeRoller-Designs verwenden das jQuery UI CSS Framework, sodass sie alle das gleiche Klassen- und Stylesheet-Format verwenden. Die Codezeilen in der ersten Hälfte des CSS-Stylesheets für die ThemeRoller-Designs wenden Stile auf ALLE jQuery-UI-Widgets an. Es kann Fälle geben, in denen Sie die gleichen Stile auf die meisten Widgets anwenden möchten, aber einen anderen Stil auf ein bestimmtes Widget anwenden möchten.

In der unteren Hälfte des CSS-Stylesheets können Sie die Stile für bestimmte Widgets ändern. Im Folgenden finden Sie einige Beispiele für CSS-Stile, die auf bestimmte Widgets angewendet werden.

Schaltfläche-Textelement

1
2	.ui-button .ui-button-text { display: block; line-height: 1.4; font-size: 11px; }

CSS generiert die Schaltflächen mithilfe eines Blockelementfelds, legt die Textzeilenhöhe und die Schriftgröße der Schaltflächen fest. Wenn Ihre Webseite eine große Textschrift verwendet, kann die Größe der Schaltflächen zu groß werden. Wenn Sie die Schriftgröße der Schaltflächen ändern, wird die Schaltflächengröße reduziert.

1
2	.ui-button-text-only .ui-button-text { padding: .4em 1em; }

CSS legt den Abstand des Texts einer Schaltfläche fest, die keine Symbole enthält (nur Textschaltfläche)

1
2	.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 3em; }

CSS legt die Auffüllung des primären Symbols in dieser Reihenfolge fest: oben, rechts, unten, links.

1
2	.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 3em .4em 3em; }

CSS legt die Auffüllung des sekundären Symbols in dieser Reihenfolge fest: oben, rechts, unten, links.

1
2	.ui-button-text-icons .ui-button-text { padding-left: 3em; padding-right: 3em; }

CSS legt den linken und rechten Abstand des Texts einer Schaltfläche fest, die ein primäres und sekundäres Symbol enthält.

Tabs

1
2	.ui-tabs .ui-tabs-nav li a:hover { color: #009999; text-decoration: none; }

CSS legt die Hover- / Mouse-Over-Link-Farbe für das Tabs-Widget fest. Dadurch wird die .ui-state-hover-Klasse nur für das Tabs-Widget überschrieben. Diese Codezeile ist nicht im standardmäßigen ThemeRoller Theme Theme CSS-Stylesheet enthalten. Wenn Sie möchten, dass die Hover- / Mouse-Over-Linkfarbe der Menüregisterkarten beim Mouseover eine andere Farbe hat, fügen Sie den obigen Code direkt unter der Zeile hinzu, die die Klasse ".ui-tabs .ui-tabs-nav li a" enthält.

Datepicker

1
2	.ui-datepicker .ui-datepicker-header { position:relative; padding:2px 0px 2px 0px; border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; }

CSS formatiert den DatePicker-Header-Container mit Auffüllung oben, rechts, unten, links, einem dunkelgrünen Rahmen, dunkelgrüner Hintergrundfarbe und einem bestimmten Hintergrundbild, das eine horizontale Position von 50% und eine vertikale Position von 50% hat und nur horizontal wiederholt wird.

Progress Bar

1
2	.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; }

CSS formatiert den DatePicker-Header-Container mit einem dunkelgrünen Rahmen, einer dunkelgrünen Hintergrundfarbe und einem bestimmten Hintergrundbild, das eine horizontale Position von 50% und eine vertikale Position von 50% aufweist und nur horizontal wiederholt wird.

Dialog

1
2	.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; }

CSS formatiert den Kopfzeilencontainer des Dialogfelds mit einem dunkelgrünen Rahmen, einer dunkelgrünen Hintergrundfarbe und einem bestimmten Hintergrundbild, das eine horizontale Position von 50% und eine vertikale Position von 50% aufweist und nur horizontal wiederholt wird.

Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole

Demo 7 in den Quelldateien verwendet benutzerdefinierte Symbole anstelle der jQuery UI ThemeRoller-Standardsymbole. Um dies zu erreichen, musste der Abschnitt Icons des jQuery UI CSS-Stylesheets stark modifiziert werden.

Im Abschnitt /* States and images */ des Abschnitts Icons des jQuery UI CSS-Stylesheets wurden die ersten drei Codezeilen nicht geändert:

 
/* states and images */ 
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }  
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_cccccc_256x240.png); } 
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }

Die verbleibenden fünf Codezeilen in den /*-Zuständen und Bildern */ wurden entfernt und die Klassen in neue benutzerdefinierte CSS-Codezeilen aufgenommen. Die benutzerdefinierten Codezeilen wurden nach Widget-Typ unterteilt:

Zusätzlich zum Hinzufügen benutzerdefinierter CSS-Codezeilen muss die "jquery-functions.js" geändert werden, um die neuen CSS-Klassen widerzuspiegeln, die für die benutzerdefinierten Symbole erstellt wurden. Dies wird in früheren Abschnitten dieses Tutorials behandelt.

Mit den Codeblöcken in den folgenden Tutorial-Abschnitten können Sie jedem Widget wie angegeben benutzerdefinierte Symbole hinzufügen.

Custom CSS Style Sheet Reference - Benutzerdefinierte Symbole - Accordion #1

1
2	/* Custom Icons Accordion #1 */
3	.ui-state-default .ui-icon-green-circle-arrow-e, .ui-state-hover .ui-icon-green-circle-arrow-e, .ui-state-focus .ui-icon-green-circle-arrow-e { background-image: url(images/next_1.png); }
4	.ui-state-active .ui-icon-green-circle-arrow-s {background-image: url(images/down_1.png); }

Neue UI-Klassen:

.ui-state-default .ui-icon-green-circle-arrow-e - Symbol, das in den Standardmäßig-Status-Accordion-Feldern angezeigt wird.
.ui-state-hover .ui-icon-green-circle-arrow-e - Symbol, das beim Mouseover auf den Accordion-Feldern angezeigt wird.
.ui-state-focus .ui-icon-green-circle-arrow-e - Symbol, das auf den Accordion-Feldern mit Tastaturfokus angezeigt wird.
.ui-state-active .ui-icon-green-circle-arrow-s - Symbol, das im aktiven/ausgewählten Accordion-Bedienfeld angezeigt wird.

Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Accordion #2

1
2	/* Custom Icons Accordion #2 */
3	.ui-state-default .ui-icon-cog-plus, .ui-state-hover .ui-icon-cog-plus, .ui-state-focus .ui-icon-cog-plus { background-image: url(images/cog_add.png); }
4	.ui-state-active .ui-icon-cog-minus {background-image: url(images/cog_delete.png); }

Neue UI-Klassen:

.ui-state-default .ui-icon-cog-plus - Symbol, das in den Standard-Accordion-Bedienfeldern angezeigt wird.
.ui-state-hover .ui-icon-cog-plus - Symbol, das beim Mouseover auf den Accordion-Feldern angezeigt wird.
.ui-state-focus .ui-icon-cog-plus - Symbol, das auf den Accordion-Feldern mit Tastaturfokus angezeigt wird.
.ui-state-active .ui-icon-cog-minus - Symbol, das im aktiven/ausgewählten Accordion-Bedienfeld angezeigt wird.

Custom CSS Style Sheet Reference - Benutzerdefinierte Symbole - Accordion #3

1
2	/* Custom Icons Accordion #3 */
3	.ui-state-default .ui-icon-green-add, .ui-state-hover .ui-icon-green-add, .ui-state-focus .ui-icon-green-add { background-image: url(images/add.png); }
4	.ui-state-active .ui-icon-red-delete {background-image: url(images/delete.png); }

Neue UI-Klassen:

.ui-state-default .ui-icon-green-add - Symbol, das in den Standardstatus-Accordionfenstern angezeigt wird.
.ui-state-hover .ui-icon-green-add - Symbol, das beim Mouseover auf den Accordionfeldern angezeigt wird.
.ui-state-focus .ui-icon-green-add - Symbol, das auf den Accordionfeldern im Tastaturfokus angezeigt wird.
.ui-state-active .ui-icon-red-delete - Symbol, das im aktiven/ausgewählten Accordionbedienfeld angezeigt wird.

Custom CSS Style Sheet Reference - Benutzerdefinierte Symbole - Accordion #4

 
/* Custom Icons Accordion #4 */ 
.ui-state-default .ui-icon-custom-next { background-image: url(images/next_2.png); }  
.ui-state-hover .ui-icon-custom-next, .ui-state-focus .ui-icon-custom-next {background-image: url(images/next_3.png); }  
.ui-state-active .ui-icon-custom-down {background-image: url(images/down_2.png); }

Neue UI-Klassen wurden erstellt, damit die benutzerdefinierten Symbole hinzugefügt werden können:

.ui-state-default .ui-icon-custom-next – Symbol, das in den Standardstatus-Accordionfeldern angezeigt wird.
.ui-state-hover .ui-icon-custom-next - Symbol, das beim Mouseover auf den Accordionfeldern angezeigt wird.
.ui-state-focus .ui-icon-custom-next - Symbol, das auf den Accordionfeldern mit Tastaturfokus angezeigt wird.
.ui-state-active .ui-icon-custom-down - Symbol, das im aktiven/ausgewählten Accordionbedienfeld angezeigt wird.

Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Schaltflächen

Schaltflächen - Standard

 
/* Custom Icons Buttons - Default State */ 
.ui-state-default .ui-icon-custom-gear { background-image: url(images/process_1.png); }  
.ui-state-default .ui-icon-custom-gear-2 { background-image: url(images/process_info.png); }  
.ui-state-default .ui-icon-custom-locked { background-image: url(images/lock_1.png); }  
.ui-state-default .ui-icon-custom-arrow-down { background-image: url(images/orange_arrow_down.png); }

Neue UI-Klassen wurden erstellt, damit die benutzerdefinierten Symbole hinzugefügt werden können:

.ui-state-default .ui-icon-custom-gear
.ui-state-default .ui-icon-custom-gear-2
.ui-state-default .ui-icon-custom-locked
.ui-state-default .ui-icon-custom-arrow-down

Schaltflächen - Hover

 
/* Custom Icons Buttons - Hover */ 
.ui-state-hover .ui-icon-custom-gear { background-image: url(images/process_accept.png); }  
.ui-state-hover .ui-icon-custom-gear-2 { background-image: url(images/process_1.png); }  
.ui-state-hover .ui-icon-custom-arrow-down { background-image: url(images/green_arrow_down.png); }

Neue UI-Klassen wurden erstellt, damit die benutzerdefinierten Symbole hinzugefügt werden können:

.ui-state-hover .ui-icon-custom-gear
.ui-state-hover .ui-icon-custom-gear-2
.ui-state-hover .ui-icon-custom-arrow-down

Schaltflächen - Fokus / Aktiv

 
/* Custom Icons Buttons - Focus /  Active */ 
.ui-state-focus .ui-icon-custom-gear, .ui-state-active .ui-icon-custom-gear { background-image: url(images/process_info.png); }  
.ui-state-focus .ui-icon-custom-gear-2, .ui-state-active .ui-icon-custom-gear-2 { background-image: url(images/process_accept.png); }  
.ui-state-focus .ui-icon-custom-arrow-down, .ui-state-active .ui-icon-custom-arrow-down { background-image: url(images/blue_arrow_down.png); }

Neue UI-Klassen wurden erstellt, damit die benutzerdefinierten Symbole hinzugefügt werden können:

.ui-state-focus .ui-icon-custom-gear
.ui-state-active .ui-icon-custom-gear
.ui-state-focus .ui-icon-custom-gear-2
.ui-state-active .ui-icon-custom-gear-2
.ui-state-focus .ui-icon-custom-arrow-down
.ui-state-active .ui-icon-custom-arrow-down

In Demo 7 werden in den Quelldateien fünf Schaltflächen angezeigt, einige der Schaltflächen verwenden jedoch die gleichen Klassen. Jede neue Klasse zeigt ein benutzerdefiniertes Symbol auf der Schaltfläche an, auf die sie angewendet wurde.

Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Datepicker

1
2	/* Custom Icons Datepicker */
3	.ui-datepicker-prev .ui-icon-circle-triangle-w {background-image: url(images/back_1.png); }
4	.ui-datepicker-next .ui-icon-circle-triangle-e {background-image: url(images/next_4.png); }

Der Datepicker verwendet die oben genannten Klassen als Standard. Anstatt benutzerdefinierte Klassen für den Datepicker zu erstellen, werden die ursprünglichen UI-Klassen verwendet und das Symbolbild wurde geändert.

Im Abschnitt /* Positioning */ des Abschnitts Icons des CSS-Stylesheets der jQuery-Benutzeroberfläche wurden zwei Codezeilen auskommentiert:

/*.ui-icon-circle-triangle-e { background-position: -48px -192px; } Commented out, using custom icons */

/*.ui-icon-circle-triangle-w { background-position: -80px -192px; } Commented out, using custom icons */

Diese Zeilen wurden auskommentiert, damit benutzerdefinierte Symbole im Datepicker-Widget verwendet werden konnten. Der Datepicker verwendet standardmäßig diese beiden Symbolklassen. Da benutzerdefinierte Symbole anstelle des CSS-Bildsprites verwendet werden, müssen diese Zeilen entfernt werden.

Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Highlight / Error

1
2	/* Custom Icons Highlight / Error */
3	.ui-state-highlight .ui-icon-custom-info {background-image: url(images/info.png); }
4	.ui-state-error .ui-icon-custom-alert, .ui-state-error-text .ui-icon-custom-alert {background-image: url(images/warning.png); }

Um benutzerdefinierte Symbole für Highlight und Error anzuzeigen, wurden die folgenden neuen UI-Klassen erstellt:

.ui-state-highlight .ui-icon-custom-info
.ui-state-error .ui-icon-custom-alert
.ui-state-error-text .ui-icon-custom-alert

Benutzerdefinierte CSS-Stylesheet-Referenz - Benutzerdefinierte Symbole - Dialogfeldschaltfläche

1
2	/* Custom Dialog Button */
3	.ui-state-default .ui-icon-custom-newwin { background-image: url(images/windows.png); }
4	.ui-state-hover .ui-icon-custom-newwin, .ui-state-focus .ui-icon-custom-newwin, .ui-state-active .ui-icon-custom-newwin { background-image: url(images/window_info.png); }

Für die verschiedenen Zustände der Dialogfeldschaltfläche wurden benutzerdefinierte UI-Klassen erstellt:

.ui-state-default .ui-icon-custom-newwin
.ui-state-hover .ui-icon-custom-newwin
.ui-state-focus .ui-icon-custom-newwin
.ui-state-active .ui-icon-custom-newwin

Links to jQuery / jQuery UI Website

Schlussfolgerung

Das Ziel dieses Tutorials ist es, Webentwicklern, die neu in jQuery UI und dem jQuery UI CSS Framework sind, zu zeigen, wie sie jQuery UI Widgets gestalten und benutzerdefinierte CSS schreiben, damit sie ihre eigenen jQuery UI Themes erstellen können.

Ich hoffe, dass dieses Tutorial Ihnen geholfen hat, jQuery UI in Ihre benutzerdefinierten Webdesigns zu integrieren! Wenn Sie Fragen haben, senden Sie diese bitte über das Kommentar-Absenden-Formular.

Kredite

Die benutzerdefinierten Symbole, die in den Tutorial-Demos verwendet werden, sind Mark James, www.famfamfam.com, DryIcons und Iconza zu verdanken