jQuery UI przykład - składany panel (akordeon)
W obrębie ograniczonej przestrzeni do wyświetlania prezentacji treści informacji składany panel.
Aby uzyskać więcej informacji na temat części akordeonu, zobacz dokumentację API członek panelu składane (akordeon Widget) .
Domyślną funkcją
Kliknij na głowie, aby rozwinąć / treść upadek jest podzielony na różne części logiki, jak zakładek (kart) to samo. Opcjonalnie można ustawić, gdy wskaźnika myszy czy przełączyć do otwierania różnych części ON / OFF statusu.
Podstawowe znaczniki HTML są serią tytule (znaczniki H3) i zawartości div, więc zawartość może być używany bez konieczności przechodzenia przez JavaScript.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI akordeon (akordeon) - Domyślna funkcja </ 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 = "akordeon">
<H3> Część 1 </ h3>
<Div>
<P>
Mauris mauris ante blandit et, ultrices a, suscipit Eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida się, condimentum siedzieć
amet, nunc. Nam NIBH. Donec suscipit eros. Nam mi. Proin Viverra leo ut
odio. Curabitur malesuada. Vestibulum velit eu ante scelerisque vulputate.
</ P>
</ Div>
<H3> Część 2 </ h3>
<Div>
<P>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, ból w aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum Tellus libero ac Justo. Vivamus non quam. W
suscipit faucibus urna.
</ P>
</ Div>
<H3> Sekcja 3 </ h3>
<Div>
<P>
Nam enim Risus, molestie et Porta ac, aliquam ac, Risus. Quisque lobortis.
Phasellus Pellentesque purus. Phasellus ac libero w Massa. Aenean w pede
ac Tellus Pellentesque sempre. Sed ac felis. Sed Commodo, magna Quis
Lacinia ornare, quam ante aliquam nisi EU iaculis leo purus venenatis DUI.
</ P>
<Ul>
<Li> Lista jeden element </ li>
<Li> przedmiot dwa </ li>
<Li> przedmiot trzy </ li>
</ Ul>
</ Div>
<H3> Część 4 </ h3>
<Div>
<P>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et fames malesuada ac egestas turpis. Vestibulum ante ipsum PRIMIS w
faucibus Orci luctus et ultrices Zapytanie cubilia Curae; Aenean Lacinia
mauris vel est.
</ P>
<P>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat Lectus.
Klasa aptent taciti sociosqu ad litora torquent za conubia nostra, za
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
zawartość Folding
Standardowo panele zwiń zawsze pozostanie częścią jest otwarta. Aby dać wszystkie części są złożone, można ustawić collapsible opcję true. Kliknij na aktualnie otwartej sekcji, aby zwinąć jego okienka zawartości.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI akordeon (akordeon) - zawartość Folding </ 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 ({
składane: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "akordeon">
<H3> Część 1 </ h3>
<Div>
<P> Mauris mauris ante blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida się, condimentum sit amet, nunc. Nam NIBH. Donec suscipit eros. Nam mil. Proin Viverra leo ut odio. Curabitur malesuada. Vestibulum velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Część 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, ból w aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac Justo. Vivamus non quam. W suscipit faucibus urna. < / p>
</ Div>
<H3> Sekcja 3 </ h3>
<Div>
<P> Nam enim Risus, molestie et Porta ac, aliquam ac, Risus. Quisque lobortis. Phasellus Pellentesque purus ww pede. Phasellus ac libero ac Tellus Pellentesque sempre. Sed ac felis. Sed Commodo Massa. Aenean, magna Quis Lacinia ornare , quam ante aliquam nisi EU iaculis leo purus venenatis dui. </ p>
<Ul>
<Li> Lista jeden element </ li>
<Li> przedmiot dwa </ li>
<Li> przedmiot trzy </ li>
</ Ul>
</ Div>
<H3> Część 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac egestas turpis Vestibulum ante ipsum PRIMIS w faucibus Orci luctus et ultrices Zapytanie cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat Lectus. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra, za inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Niestandardowe ikony
Poprzez icons Opcje, aby dostosować ikonę tytułu, icons opcji, aby zaakceptować domyślny tytuł i aktywować (otwarty) klasy państwowej. Użyj ramy UI CSS jakiejkolwiek klasy lub utworzyć niestandardową klasę użyć obrazu tła.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI akordeon (akordeon) - niestandardowe ikony </ 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 () {
Ikony var = {
Nagłówek: "ui-icon-circle strzałki-E"
activeHeader: "ui-icon-circle-strzałka-s"
};
$ ( "#accordion") .accordion ({
Ikony: Ikony
});
$ ( "#toggle") .button (). Kliknij (function () {
if ($ ( "#accordion") .accordion ( "Opcja", "Ikony")) {
$ ( "#accordion") .accordion ( "Opcja", "Ikony", null);
} Else {
$ ( "#accordion") .accordion ( "Opcja", "Ikony", ikony);
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "akordeon">
<H3> Część 1 </ h3>
<Div>
<P> Mauris mauris ante blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida się, condimentum sit amet, nunc. Nam NIBH. Donec suscipit eros. Nam mil. Proin Viverra leo ut odio. Curabitur malesuada. Vestibulum velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Część 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, ból w aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac Justo. Vivamus non quam. W suscipit faucibus urna. < / p>
</ Div>
<H3> Sekcja 3 </ h3>
<Div>
<P> Nam enim Risus, molestie et Porta ac, aliquam ac, Risus. Quisque lobortis. Phasellus Pellentesque purus ww pede. Phasellus ac libero ac Tellus Pellentesque sempre. Sed ac felis. Sed Commodo Massa. Aenean, magna Quis Lacinia ornare , quam ante aliquam nisi EU iaculis leo purus venenatis dui. </ p>
<Ul>
<Li> Lista jeden element </ li>
<Li> przedmiot dwa </ li>
<Li> przedmiot trzy </ li>
</ Ul>
</ Div>
<H3> Część 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac egestas turpis Vestibulum ante ipsum PRIMIS w faucibus Orci luctus et ultrices Zapytanie cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat Lectus. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra, za inceptos himenaeos. </ p>
</ Div>
</ Div>
<Button id = "Przełącz"> ikonę przełączania </ button>
</ Body>
</ Html>
Wypełnienie przestrzeni
Ponieważ panel składany jest złożony z elementów blokowych i domyślnie szerokość wypełnia dostępną przestrzeń poziomą. Aby wypełnić pionową przestrzeń przydzieloną przez kontener, ustawiony heightStyle opcję "fill" , skrypt automatycznie ustawić wysokość rozmiaru panelu składane kontenera nadrzędnego.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI akordeon (akordeon) - wypełnienie przestrzeni </ 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>
# Akordeon-Resizer {
padding: 10px;
width: 350px;
height: 220px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
heightStyle: "wypełnić"
});
});
$ (Function () {
$ ( "# Akordeon-Resizer") .resizable ({
minHeight: 140,
MinWidth: 200,
rozmiar: function () {
$ ( "#accordion") .accordion ( "Refresh");
}
});
});
</ Script>
</ Head>
<Body>
<H3 class = "Docs"> Ponownie ustawić pojemnik zewnętrzny: </ h3>
<Div id = "akordeon-Resizer" class = "ui-widget-content">
<Div id = "akordeon">
<H3> Część 1 </ h3>
<Div>
<P> Mauris mauris ante blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida się, condimentum sit amet, nunc. Nam NIBH. Donec suscipit eros. Nam mil. Proin Viverra leo ut odio. Curabitur malesuada. Vestibulum velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Część 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, ból w aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac Justo. Vivamus non quam. W suscipit faucibus urna. < / p>
</ Div>
<H3> Sekcja 3 </ h3>
<Div>
<P> Nam enim Risus, molestie et Porta ac, aliquam ac, Risus. Quisque lobortis. Phasellus Pellentesque purus ww pede. Phasellus ac libero ac Tellus Pellentesque sempre. Sed ac felis. Sed Commodo Massa. Aenean, magna Quis Lacinia ornare , quam ante aliquam nisi EU iaculis leo purus venenatis dui. </ p>
<Ul>
<Li> Lista jeden element </ li>
<Li> przedmiot dwa </ li>
<Li> przedmiot trzy </ li>
</ Ul>
</ Div>
<H3> Część 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac egestas turpis Vestibulum ante ipsum PRIMIS w faucibus Orci luctus et ultrices Zapytanie cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat Lectus. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra, za inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
Nieautomatyczny wysokość
Ustawianie heightStyle: "content" , dzięki czemu zagięte panele zachowują swoją pierwotną wysokość.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI akordeon (akordeon) - nieautomatyczny Wysokość </ 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: "content"
});
});
</ Script>
</ Head>
<Body>
<Div id = "akordeon">
<H3> Część 1 </ h3>
<Div>
<P> Mauris mauris ante blandit et, ultrices A, susceros. Nam mi. Proin Viverra leo ut odio. Curabitur malesuada. Vestibulum się velit ue ante scelerisque vulputate. </ P>
</ Div>
<H3> Część 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, ból w aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac Justo. Vivamus non quam. W suscipit faucibus urna. < / p>
</ Div>
<H3> Sekcja 3 </ h3>
<Div>
<P> Nam enim Risus, molestie et Porta ac, aliquam ac, Risus. Quisque lobortis. Phasellus Pellentesque purus ww pede. Phasellus ac libero ac Tellus Pellentesque sempre. Sed ac felis. Sed Commodo Massa. Aenean, magna Quis Lacinia ornare , quam ante aliquam nisi EU iaculis leo purus venenatis dui. </ p>
<Ul>
<Li> element listy </ li>
<Li> element listy </ li>
<Li> element listy </ li>
<Li> element listy </ li>
<Li> element listy </ li>
<Li> element listy </ li>
<Li> element listy </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
Po otwarciu unosić
Kliknij na głowie, aby rozwinąć / treść upadek jest podzielony na różne części logiki, jak zakładek (kart) to samo. Opcjonalnie można ustawić, gdy wskaźnika myszy czy przełączyć do otwierania różnych części ON / OFF statusu.
Podstawowe znaczniki HTML są serią tytule (znaczniki H3) i zawartości div, więc zawartość może być używany bez konieczności przechodzenia przez JavaScript.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI akordeon (akordeon) - po najechaniu otwarty </ 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 ({
wydarzenie: "kliknij hoverintent"
});
});
/ *
* HoverIntent | Copyright 2011 Brian Cherne
* Http://cherne.net/brian/resources/jquery.hoverIntent.html
* Zmodyfikowany przez zespół jQuery UI
* /
$ .event.special.hoverintent = {
Konfiguracja: function () {
$ (This) .bind ( "mouseover" jQuery.event.special.hoverintent.handler);
}
zniszczeń: function () {
$ (This) .unbind ( "mouseover" jQuery.event.special.hoverintent.handler);
}
Ładowarka: function (event) {
var currentX, currentY, limit czasu,
args = argumenty,
target = $ (event.target)
previousX = event.pageX,
previousY = event.pageY;
utwór function (event) {
currentX = event.pageX;
currentY = event.pageY;
};
Funkcja clear () {
cel
.unbind ( "mousemove" track)
.unbind ( "mouseout", jasne);
clearTimeout (timeout);
}
handler function () {
var prop,
orig = zdarzenia;
if ((Math.abs (previousX - currentX) +
Math.abs (previousY - currentY)) <7) {
clear ();
event = $ .Event ( "hoverintent");
for (prop w oryg) {
if (! (prop w razie)) {
Impreza [prop] = oryg [prop];
}
}
// Uniemożliwić dostęp do oryginalnego zdarzenia, ponieważ nowe zdarzenie zostanie uruchomiona asynchronicznie, stare zdarzenia nie jest już dostępny (# 6028)
usuwać event.originalEvent;
target.trigger (event);
} Else {
previousX = currentX;
previousY = currentY;
timeout = setTimeout (handler, 100);
}
}
timeout = setTimeout (handler, 100);
target.bind ({
mousemove: utwór,
mouseout: jasne
});
}
};
</ Script>
</ Head>
<Body>
<Div id = "akordeon">
<H3> Część 1 </ h3>
<Div>
<P>
Mauris mauris ante blandit et, ultrices a, suscipit Eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida się, condimentum siedzieć
amet, nunc. Nam NIBH. Donec suscipit eros. Nam mi. Proin Viverra leo ut
odio. Curabitur malesuada. Vestibulum velit eu ante scelerisque vulputate.
</ P>
</ Div>
<H3> Część 2 </ h3>
<Div>
<P>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, ból w aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum Tellus libero ac Justo. Vivamus non quam. W
suscipit faucibus urna.
</ P>
</ Div>
<H3> Sekcja 3 </ h3>
<Div>
<P>
Nam enim Risus, molestie et Porta ac, aliquam ac, Risus. Quisque lobortis.
Phasellus Pellentesque purus. Phasellus ac libero w Massa. Aenean w pede
ac Tellus Pellentesque sempre. Sed ac felis. Sed Commodo, magna Quis
Lacinia ornare, quam ante aliquam nisi EU iaculis leo purus venenatis DUI.
</ P>
<Ul>
<Li> Lista jeden element </ li>
<Li> przedmiot dwa </ li>
<Li> przedmiot trzy </ li>
</ Ul>
</ Div>
<H3> Część 4 </ h3>
<Div>
<P>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et fames malesuada ac egestas turpis. Vestibulum ante ipsum PRIMIS w
faucibus Orci luctus et ultrices Zapytanie cubilia Curae; Aenean Lacinia
mauris vel est.
</ P>
<P>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat Lectus.
Klasa aptent taciti sociosqu ad litora torquent za conubia nostra, za
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
Sort (Sortable)
Przeciągnij tytuł panelu, aby zmienić kolejność.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI akordeon (akordeon) - Sortowanie (Sortable) </ 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>
/ * Przy zamawianiu, nie ma problemów układu IE (patrz # 5413) * /
.Grupa {zoom: 1}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion")
.accordion ({
Nagłówek: "> div> h3"
})
.sortable ({
Oś "Y"
rękojeść: "h3"
stop: funkcja (event, ui) {
// Przy sortowaniu, IE nie może być zarejestrowany rozmycie, więc wyzwalacz focusOut obsługi usunąć .ui-State-focus
ui.item.children ( "H3") .triggerHandler ( "focusOut");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "akordeon">
<Div class = "grupa">
<H3> Część 1 </ h3>
<Div>
<P> Mauris mauris ante blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida się, condimentum sit amet, nunc. Nam NIBH. Donec suscipit eros. Nam mil. Proin Viverra leo ut odio. Curabitur malesuada. Vestibulum velit eu ante scelerisque vulputate. </ p>
</ Div>
</ Div>
<Div class = "grupa">
<H3> Część 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, ból w aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac Justo. Vivamus non quam. W suscipit faucibus urna. < / p>
</ Div>
</ Div>
<Div class = "grupa">
<H3> Sekcja 3 </ h3>
<Div>
<P> Nam enim Risus, molestie et Porta ac, aliquam ac, Risus. Quisque lobortis. Phasellus Pellentesque purus ww pede. Phasellus ac libero ac Tellus Pellentesque sempre. Sed ac felis. Sed Commodo Massa. Aenean, magna Quis Lacinia ornare , quam ante aliquam nisi EU iaculis leo purus venenatis dui. </ p>
<Ul>
<Li> Lista jeden element </ li>
<Li> przedmiot dwa </ li>
<Li> przedmiot trzy </ li>
</ Ul>
</ Div>
</ Div>
<Div class = "grupa">
<H3> Część 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac egestas turpis Vestibulum ante ipsum PRIMIS w faucibus Orci luctus et ultrices Zapytanie cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat Lectus. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra, za inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>