Beispiel für ein JqueryUI-Akkordeon

Die jQueryUI bietet ein zusammenklappbares Widget namens Akkordeon ist eine Hierarchieansicht, sodass nur die Wurzeln jedes Zweigs sichtbar sind. Es wird häufig zur Verwaltung großer Inhalts- und Navigationslisten auf der Website verwendet. Wir können problemlos eine zusammenklappbare Unterteilung innerhalb einer Webseite erstellen, die zum Erstellen von Akkordeon-Navigation, Inhaltsfeldern usw. verwendet wird. Es handelt sich um auf jQueryUI basierende zusammenklappbare Inhaltsfelder, die die Informationen auf begrenztem Raum anzeigen, in logische Abschnitte unterteilt sind und wie Registerkarten aussehen.

Das Akkordeon-Widget enthält eine Reihe von Containern, die bis auf einen alle geschlossen sind. Jeder Container enthält eine Überschrift, die den Container öffnet und den Inhalt anzeigt. Wenn wir auf die Überschrift klicken, wird deren Inhalt angezeigt. Wenn wir auf die andere Überschrift klicken, wird der aktuelle Inhalt ausgeblendet und neuer Inhalt angezeigt.

lesen Sie auch:

  • JQuery Keydown, Keypress und Keyup
  • JQUEry-Einstellungs-Dropdown-Wert
  • JQuery prepend() und prependTo()

Die Akkordeonmethode kann in folgenden Formen angewendet werden:

  • $(Selektor, Kontext). Akkordeon (Optionen)
  • $(Selektor, Kontext). Akkordeon(„Aktionen“, [params])

Das folgende Beispiel demonstriert die einfache Akkordeontechnik:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
   $(function(){
      $("#myaccordion").accordion();
   });
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Simple Accordion Example</h2>
<div id="myaccordion">
<h2>Heading One</h2>
<div>
	HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
	JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
	CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</body>
</html>
  • Das obige Skript verwendet ein Akkordeon-Widget, das ein zusammenklappbarer Inhaltshalter ist und in Abschnitte unterteilt ist, ähnlich wie Tabs.
  • Die Accordion-Methode verwendet den ID-Selektor „#myaccordion“, definiert verschiedene Inhaltsabschnitte, die aktiviert werden, und zeigt den Inhalt an, wenn der Benutzer auf den jeweiligen Abschnitt klickt.

Führen Sie die JQueryUI Simple Accordion-Demo aus

Beispiel für ein einfaches JQueyUI-Akkordeon

Akkordeon-Widget-Optionen

Die Akkordeon-Methode enthält folgende Optionen:

Option Beschreibung Standardwert

aktivEs gibt die aktuell geöffnete Inhaltsregisterkarte an.0
animierenEs zeigt an, wie die Panels animiert werden.{ }
zusammenklappbarEs ermöglicht das Ausblenden des Panels durch Klicken darauf, wenn es auf „true“ gesetzt ist.FALSCH
deaktiviertEs deaktiviert das Akkordeon, wenn es auf „true“ gesetzt ist, dh es stoppt den zusammenklappbaren Betrieb.FALSCH
EreignisEs wählt einen Akkordeon-Header aus, um das jeweilige Panel zu aktivieren.klicken
HeaderEs gibt das Header-Element für das Accordion-Element an.> li > :first-child,> :not(li):even
heightStyleEs gibt die Höhe des Akkordeons und des Panels an.Auto
SymboleEs gibt die Symbole für die Kopfzeilen an.{ „header“: „ui-icon-triangle-le“, „activeHeader“: „ui-icon-triangle-ls“}

Das folgende Beispiel demonstriert die Verwendung von Header-, reduzierbaren und aktiven Optionen:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
   $(function(){
      $("#myaccordion").accordion({
             header: 'h2',
	         collapsible: true,
	         active: false,
      });
   });
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Simple Accordion Example</h2>
<div id="myaccordion">
<h2>Heading One</h2>
<div>
	HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
	JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
	CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</body>
</html>
  • Das Skript nutzt Akkordeon-Optionen, z. B. Header, Reduzierbar und Aktiv, und das Akkordeon-Widget verwendet den ID-Selektor „#myaccordion“, um Aktionen der oben angegebenen Optionen auszuführen.
  • Die Header-Option gibt einen Selektor für das Header-Element an, um das Standardmuster zu überschreiben. Im Skript verweist das Widget auf den Header „h2“, um die Header-Elemente zu identifizieren.
  • Die Option „Reduzierbar“ ermöglicht das Reduzieren des aktiven Abschnitts durch Klicken darauf, wenn sie auf „true“ gesetzt ist.
  • Die aktive Option gibt den Index des Menüs an, wenn das Bedienfeld aktuell geöffnet ist.

Führen Sie die JQueryUI-Akkordeon-Optionsdemo aus

Beispiel für JQueyUI-Akkordeonoptionen

Das folgende Beispiel demonstriert die Verwendung von heightStyle- und Event-Optionen:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
   $(function(){
      $("#myaccordion").accordion({
	         heightStyle: "content",
	         event: "mouseover"
      });
   });
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Simple Accordion Example</h2>
<div id="myaccordion">
<h2>Heading One</h2>
<div>
	HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
	JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
	CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</body>
</html>
  • Das obige Programm enthält Akkordeon-Widget-Optionen wie heightStyle und event.
  • Die Option heightStyle steuert die Höhe des Akkordeons und jedes Panels. Hier haben wir den Wert von heightStyle auf content gesetzt, wobei jedes Panel so hoch ist wie sein Inhalt.
  • Die Option „event“ gibt das Ereignis an, das zum Auswählen eines Akkordeon-Headers verwendet wird. Wenn wir mit der Maus über das jeweilige Element fahren, wird der darin vorhandene Inhalt angezeigt.

Führen Sie JQueryUI Accordion Options Demo1 aus

Beispiel für JQueyUI-Akkordeonoptionen1

Akkordeon-Widget-Methoden

Die folgende Tabelle zeigt einige der Methoden, die mit dem Akkordeon-Widget verwendet werden:

Methodenbeschreibung

zerstören()Dadurch wird die Akkordeonfunktion vollständig entfernt.
deaktivieren()Diese Methode deaktiviert den reduzierbaren Vorgang, dh sie deaktiviert alle Inhaltsbereiche.
aktivieren()Diese Methode ermöglicht die Akkordeon-Bedienung, dh es reaktiviert alle Menüs.
Optionen()Es gibt die Optionseigenschaft zurück. Es legt den Akkordeonbetrieb mit dem angegebenen Optionsnamen fest.
AktualisierungEs fügt die Header und Panels im DOM hinzu oder entfernt sie und akzeptiert keine Argumente.
widget()Es definiert das Akkordeon-Widget-Element mit dem jQuery-Objekt.

Das folgende Beispiel demonstriert die Verwendung der Aktivierungs- und Deaktivierungsmethoden:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#enable, #disable{
color: red;
border: 1px solid green;
}
</style>
<script type="text/javascript">
$(function() {
	$("#myAccordion").accordion();

	$("#enable").click(function() {
		$("#myAccordion").accordion("enable");
	});

	$("#disable").click(function() {
		$("#myAccordion").accordion("disable");
	});
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Using Accordion Methods</h2>
<div id="myAccordion">
<h2>Heading One</h2>
<div>
	HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
	JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
	CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.Styles define how to display HTML elements. External Style Sheets can save a lot of work.External Style Sheets are stored in CSS files.
</div>
</div><br>
<button id="enable">Enable the Accordion!</button>
<button id="disable">Disable the Accordion!</button>
</body>
</html>
  • Das Programm verwendet die Akkordeonmethoden „enable()“ und „disable()“.
  • Die Methode „enable“ aktiviert das Accordion-Element, dh sie reaktiviert alle Menüs.
  • Wir fügen einen Click-Handler für die Aktivierungsschaltfläche hinzu, indem wir die Zeile „$(„#enable“).click(function())“ verwenden, und aktivieren das Akkordeon mithilfe der Zeile „$(„#myAccordion“).accordion(“enable“ );“.
  • Wie bei „enable“ fügen wir einen Click-Handler für die Deaktivierungsschaltfläche hinzu, indem wir die Zeile „$(“#disable“).click(function())“ verwenden, und deaktivieren das Akkordeon mithilfe der Zeile „$(“#myAccordion“).accordion( „deaktivieren“);“ .
  • Verwandeln Sie das angegebene Element in ein Akkordeon, indem Sie den ID-Selektor „#myAccordion“ innerhalb der Akkordeon-Methode verwenden, wie im Skript gezeigt.

Führen Sie die JQueryUI-Akkordeonmethoden-Demo aus
Beispiel für JQueyUI-Akkordeonmethoden

Akkordeon-Widget-Ereignisse

Die folgende Tabelle zeigt Ereignisse, die mit dem Akkordeon-Widget verwendet werden:

Eventbeschreibung

aktivieren(Ereignis, ui)Dieses Ereignis wird ausgelöst, wenn der Accordion-Vorgang startet und nach der Aktivierung eines Panels ausgelöst wird.
create(event, ui)Es wird ausgelöst, wenn ein Akkordeon erstellt wird.
beforeActivate(event, ui)Dieses Ereignis wird vor der Aktivierung eines Panels ausgelöst.

Das folgende Beispiel zeigt die Verwendung der Ereignisse „activate“ und „beforeActivate“:

<!doctype html>
<head>
<title>Example of Accordion</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"  rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
  $(function () {
    $("#myAccordion").accordion({
		  collapsible: true,
		  active: true,
		  activate: function (event, ui) { alert("activate"); },
		  beforeActivate: function (event, ui) { alert("before activate"); }
    });
});
</script>
<body>
<h2>Using Accordion Events</h2>
<ul>
 <div id="myAccordion">
	 <li>
		<h2>First Heading</h3>
		 <div>
			 <ul>
				 <li>A</li>
				 <li>B</li>
			 </ul>
		 </div>
	 </li>
	 <li>
		 <h2>Second Heading</h2>
		 <div>
			 <ul>
				 <li>C</li>
				 <li>D</li>
			 </ul>
		 </div>
	 </li>
 </div>
</ul>
</body>
</html>
  • Das Skript verwendet Akkordeon-Ereignisse wie „activate“- und „beforeActivate“-Ereignisse.
  • Das Aktivierungsereignis wird ausgelöst, wenn ein Menü aktiviert wird. Es wird ausgelöst, nachdem die Animation abgeschlossen ist. Es wird nicht für das erste Panel ausgelöst, wenn das Akkordeon-Widget erstellt wird. Wenn ein Panel aktiviert wird, zeigt es die Meldung über das Warnfeld an, wie im Skript angegeben.
  • Das Ereignis beforeActivate wird ausgelöst, bevor ein Panel aktiviert wird. Wenn wir in der Anfangsphase auf das Bedienfeld klicken, wird im Warnfeld die Meldung „Vor der Aktivierung“ angezeigt.
  • Verwandeln Sie das angegebene Element in ein Akkordeon, indem Sie den ID-Selektor „#myAccordion“ innerhalb der Akkordeon-Methode verwenden, wie im Skript gezeigt.

Führen Sie die JQueryUI Accordion Events-Demo aus

Beispiel für JQueyUI-Akkordeonereignisse
Beispiel für JQueyUI-Akkordeonereignisse1

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen