jQuery UI Beispiel - Faltplatte (Akkordeon)
Innerhalb eines begrenzten Platzanzeige für Informationsgehalt zusammenklappbare Tafel präsentiert.
Weitere Details über das Akkordeon Teil, der API - Dokumentation Faltplatte Teil (ein Akkordeon das Widget) .
Die Standardfunktion
Klicken Sie auf den Kopf zu Inhalt zeigen / verdecken Inhalt wird in verschiedene Teile der Logik unterteilt, wie Registerkarten (Tabs) gleich. Sie können optional eingerichtet werden, wenn die Maus ob schwebt zu wechseln, um die verschiedenen Teile des Ein / Aus-Status zu öffnen.
Basic HTML-Tags sind eine Reihe von Titel (H3-Tags) und Content-div, so dass der Inhalt kann ohne Umweg über JavaScript verwendet werden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Akkordeon (Akkordeon) - Die Standardfunktion </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#accordion") .accordion ();
});
</ Script>
</ Head>
<Body>
<Div id = "Akkordeon">
<H3> Teil 1 </ h3>
<Div>
<P>
Mauris mauris ante, blandit et, ultrices ein, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sitzen
amet, nunc. Nam ein nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum eine velit eu ante scelerisque vulputate.
</ P>
</ Div>
<H3> Teil 2 </ h3>
<Div>
<P>
Sed nicht urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor bei aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum Tellus libero ac justo. Vivamus nicht quam. In
suscipit faucibus urna.
</ P>
</ Div>
<H3> Abschnitt 3 </ h3>
<Div>
<P>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</ P>
<Ul>
<Li> Liste item ein </ li>
<Li> Liste item zwei </ li>
<Li> Liste item drei </ li>
</ Ul>
</ Div>
<H3> Teil 4 </ h3>
<Div>
<P>
Cras Diktum. Pellentesque habitant morbi Tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</ P>
<P>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra, pro
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
Folding Inhalt
In der Standardeinstellung Zusammenbruch Panels bleiben immer ein Teil offen ist. Um allen Teilen gefaltet sind, kann so eingestellt werden collapsible Option auf true. Klicken Sie auf den aktuell geöffneten Abschnitt seiner Inhaltsfenster zu kollabieren.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Akkordeon (Akkordeon) - Folding Inhalt </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
zusammenklappbar: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "Akkordeon">
<H3> Teil 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sit amet, nunc. Nam ein nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum eine velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Teil 2 </ h3>
<Div>
<P> Sed nicht urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor bei aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus nicht quam. In suscipit faucibus urna. < / p>
</ Div>
<H3> Abschnitt 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </ p>
<Ul>
<Li> Liste item ein </ li>
<Li> Liste item zwei </ li>
<Li> Liste item drei </ li>
</ Ul>
</ Div>
<H3> Teil 4 </ h3>
<Div>
<P> Cras Diktum Pellentesque habitant morbi Tristique senectus et netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu nisl. Nullam. ut libero. Integer dignissim consequat lectus. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra, pro inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Benutzerdefinierte Symbole
Durch icons Optionen das Titelsymbol anpassen, icons zu Option den Standardtitel übernehmen und aktivieren (offen) Zustandsklasse. Verwenden Sie den UI-CSS-Framework von jeder Klasse oder eine benutzerdefinierte Klasse erstellen ein Hintergrundbild zu verwenden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Akkordeon (Akkordeon) - Benutzerdefinierte Symbol </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var Icons = {
header: "ui-icon-Kreis-Pfeil-e",
activeHeader: "ui-icon-Kreis-Pfeil-s"
};
$ ( "#accordion") .accordion ({
Symbole: Symbole
});
$ ( "#toggle") .Taste (). Klicken Sie auf (function () {
if ($ ( "#accordion") .accordion ( "Option", "Symbole")) {
$ ( "#accordion") .accordion ( "Option", "Symbole", null);
} Else {
$ ( "#accordion") .accordion ( "Option", "Symbole", Icons);
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "Akkordeon">
<H3> Teil 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sit amet, nunc. Nam ein nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum eine velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Teil 2 </ h3>
<Div>
<P> Sed nicht urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor bei aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus nicht quam. In suscipit faucibus urna. < / p>
</ Div>
<H3> Abschnitt 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </ p>
<Ul>
<Li> Liste item ein </ li>
<Li> Liste item zwei </ li>
<Li> Liste item drei </ li>
</ Ul>
</ Div>
<H3> Teil 4 </ h3>
<Div>
<P> Cras Diktum Pellentesque habitant morbi Tristique senectus et netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu nisl. Nullam. ut libero. Integer dignissim consequat lectus. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra, pro inceptos himenaeos. </ p>
</ Div>
</ Div>
<Button id = "Toggle"> Toggle-Symbol </ button>
</ Body>
</ Html>
Füllraum
Da die Klapptafel von Block-Level-Elementen zusammengesetzt, und standardmäßig füllt die Breite des verfügbaren horizontalen Raum. Um den vertikalen Abstand von dem Container zugewiesen füllen, setzen heightStyle Option "fill" , wird das Skript automatisch die Höhe der Faltplatte Größe des übergeordneten Containers festgelegt.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Akkordeon (Akkordeon) - füllen den Raum </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Akkordeon-Resizer {
padding: 10px;
Breite: 350px;
Höhe: 220px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
heightStyle: "füllen"
});
});
$ (Function () {
$ ( "# Akkordeon-Resizer") .resizable ({
minHeight: 140,
minWidth: 200,
Größe ändern: function () {
$ ( "#accordion") .accordion ( "Refresh");
}
});
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> Den äußeren Behälter: </ h3>
<Div id = "Akkordeon-Resizer" class = "ui-Widget-content">
<Div id = "Akkordeon">
<H3> Teil 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sit amet, nunc. Nam ein nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum eine velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Teil 2 </ h3>
<Div>
<P> Sed nicht urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor bei aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus nicht quam. In suscipit faucibus urna. < / p>
</ Div>
<H3> Abschnitt 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </ p>
<Ul>
<Li> Liste item ein </ li>
<Li> Liste item zwei </ li>
<Li> Liste item drei </ li>
</ Ul>
</ Div>
<H3> Teil 4 </ h3>
<Div>
<P> Cras Diktum Pellentesque habitant morbi Tristique senectus et netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu nisl. Nullam. ut libero. Integer dignissim consequat lectus. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra, pro inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
Nicht automatische Höhen
Einstellung heightStyle: "content" , so dass die gefalteten Platten ihre ursprüngliche Höhe behalten.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Akkordeon (Akkordeon) - nicht automatisch Höhe </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
heightStyle: "Inhalt"
});
});
</ Script>
</ Head>
<Body>
<Div id = "Akkordeon">
<H3> Teil 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices ein, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum eine velit eu ante scelerisque vulputate. </ P>
</ Div>
<H3> Teil 2 </ h3>
<Div>
<P> Sed nicht urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor bei aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus nicht quam. In suscipit faucibus urna. < / p>
</ Div>
<H3> Abschnitt 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </ p>
<Ul>
<Li> Liste item </ li>
<Li> Liste item </ li>
<Li> Liste item </ li>
<Li> Liste item </ li>
<Li> Liste item </ li>
<Li> Liste item </ li>
<Li> Liste item </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
Im geöffneten Zustand schweben
Klicken Sie auf den Kopf zu Inhalt zeigen / verdecken Inhalt wird in verschiedene Teile der Logik unterteilt, wie Registerkarten (Tabs) gleich. Sie können optional eingerichtet werden, wenn die Maus ob schwebt zu wechseln, um die verschiedenen Teile des Ein / Aus-Status zu öffnen.
Basic HTML-Tags sind eine Reihe von Titel (H3-Tags) und Content-div, so dass der Inhalt kann ohne Umweg über JavaScript verwendet werden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Akkordeon (Akkordeon) - Beim Schweben öffnen </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
Veranstaltung: "Klick hoverintent"
});
});
/ *
* HoverIntent | Copyright 2011 Brian Cherne
* Http://cherne.net/brian/resources/jquery.hoverIntent.html
* Durch die jQuery UI-Team Geändert
* /
$ .event.special.hoverintent = {
Setup: function () {
$ (This) .bind ( "Mouseover", jQuery.event.special.hoverintent.handler);
},
Teardown: function () {
$ (This) .unbind ( "Mouseover", jQuery.event.special.hoverintent.handler);
},
Handler: function (event) {
var CurrentX, CurrentY, timeout,
args = Argumente,
target = $ (event.target),
previousX = event.pageX,
previousY = event.pageY;
Funktion Track (event) {
CurrentX = event.pageX;
CurrentY = event.pageY;
};
Funktion clear () {
Ziel
.unbind ( "mousemove-", Spur)
.unbind ( "mouseout", klar);
clear (Timeout);
}
Funktion Handler () {
var Stütze,
orig = Ereignis;
if ((Math.abs (previousX - CurrentX) +
Math.abs (previousY - CurrentY)) <7) {
clear ();
event = $ .Event ( "hoverintent");
für (prop in orig) {
if (! (prop in Ereignis)) {
event [Prop] = orig [Prop];
}
}
// Verhindern den Zugriff auf das ursprüngliche Ereignis, weil das neue Ereignis asynchron ausgelöst wird, das alte Ereignis ist nicht mehr verfügbar (# 6028)
löschen event.originalEvent;
target.trigger (event);
} Else {
previousX = CurrentX;
previousY = CurrentY;
timeout = setTimeout (Handler, 100);
}
}
timeout = setTimeout (Handler, 100);
target.bind ({
mousemove-: bahn,
mouseout: klar
});
}
};
</ Script>
</ Head>
<Body>
<Div id = "Akkordeon">
<H3> Teil 1 </ h3>
<Div>
<P>
Mauris mauris ante, blandit et, ultrices ein, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sitzen
amet, nunc. Nam ein nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum eine velit eu ante scelerisque vulputate.
</ P>
</ Div>
<H3> Teil 2 </ h3>
<Div>
<P>
Sed nicht urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor bei aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum Tellus libero ac justo. Vivamus nicht quam. In
suscipit faucibus urna.
</ P>
</ Div>
<H3> Abschnitt 3 </ h3>
<Div>
<P>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</ P>
<Ul>
<Li> Liste item ein </ li>
<Li> Liste item zwei </ li>
<Li> Liste item drei </ li>
</ Ul>
</ Div>
<H3> Teil 4 </ h3>
<Div>
<P>
Cras Diktum. Pellentesque habitant morbi Tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</ P>
<P>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra, pro
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
Sort (Sortable)
Ziehen Sie den Titel auf die Platte neu zu ordnen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Akkordeon (Akkordeon) - Sortierung (sortierbar) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
/ * Bei der Bestellung gibt es IE Layout-Probleme (siehe # 5413) * /
.group {Zoom: 1}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion")
.accordion ({
header: "> div> h3"
})
.sortable ({
Achse: "y",
Griff: "h3",
Stopp: function (event, ui) {
// Wenn Sie sortieren, IE nicht verwischen können registriert werden, so dass der Auslöser focusout Handler .ui-state-Fokus zu entfernen
ui.item.children ( "h3") .triggerHandler ( "focusout");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "Akkordeon">
<Div class = "Gruppe">
<H3> Teil 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sit amet, nunc. Nam ein nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum eine velit eu ante scelerisque vulputate. </ p>
</ Div>
</ Div>
<Div class = "Gruppe">
<H3> Teil 2 </ h3>
<Div>
<P> Sed nicht urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor bei aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus nicht quam. In suscipit faucibus urna. < / p>
</ Div>
</ Div>
<Div class = "Gruppe">
<H3> Abschnitt 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </ p>
<Ul>
<Li> Liste item ein </ li>
<Li> Liste item zwei </ li>
<Li> Liste item drei </ li>
</ Ul>
</ Div>
</ Div>
<Div class = "Gruppe">
<H3> Teil 4 </ h3>
<Div>
<P> Cras Diktum Pellentesque habitant morbi Tristique senectus et netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu nisl. Nullam. ut libero. Integer dignissim consequat lectus. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra, pro inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>