jQuery UI contoh - panel lipat (Accordion)
Dalam tampilan ruang yang terbatas untuk menyajikan konten informasi panel dilipat.
Untuk rincian lebih lanjut tentang bagian akordeon, lihat dokumentasi API anggota panel lipat (sebuah Accordion Widget) .
Fungsi standar
Klik di kepala untuk memperluas / konten runtuhnya dibagi menjadi berbagai bagian logika, seperti tab (tab) sama. Anda dapat mengatur ketika mouse di apakah akan beralih untuk membuka berbagai bagian on / off status.
tag HTML dasar adalah serangkaian judul (tag H3) dan konten div, sehingga konten yang dapat digunakan tanpa melalui JavaScript.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI akordeon (Accordion) - Fungsi standar </ 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> $ (Fungsi () { $ ( "#accordion") .accordion (); }); </ Script> </ Kepala> <Body> <Div id = "akordeon"> <H3> Part 1 </ h3> <Div> <P> Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum duduk amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate. </ P> </ Div> <H3> Part 2 </ h3> <Div> <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. </ P> </ Div> <H3> bagian 3 </ h3> <Div> <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero 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> Daftar satu item </ li> <Li> Daftar barang dua </ li> <Li> Daftar barang tiga </ li> </ Ul> </ Div> <H3> Bagian 4 </ h3> <Div> <P> Lembaga Pemeringkat Kredit diktum. Pellentesque habitant morbi tristique senectus et netus et James malesuada ac egestas turpis. Vestibulum ante ipsum primis di faucibus Orci luctus et ultrices Enquiry cubilia Curae; Aenean Lacinia mauris vel est. </ P> <P> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat LECTUS. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos himenaeos. </ P> </ Div> </ Div> </ Body> </ Html>
konten lipat
Secara default, panel runtuhnya selalu tetap bagian terbuka. Untuk memberikan semua bagian dilipat, dapat diatur collapsible
pilihan untuk benar. Klik pada bagian saat ini terbuka untuk runtuh panel isinya.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI akordeon (Accordion) - konten 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> $ (Fungsi () { $ ( "#accordion") .accordion ({ dilipat: true }); }); </ Script> </ Kepala> <Body> <Div id = "akordeon"> <H3> Part 1 </ h3> <Div> <P> Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum sit amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate. </ p> </ Div> <H3> Part 2 </ h3> <Div> <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. < / p> </ Div> <H3> bagian 3 </ h3> <Div> <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero 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> Daftar satu item </ li> <Li> Daftar barang dua </ li> <Li> Daftar barang tiga </ li> </ Ul> </ Div> <H3> Bagian 4 </ h3> <Div> <P> Cras diktum Pellentesque habitant morbi tristique senectus et netus et malesuada James ac turpis egestas Vestibulum ante ipsum primis di faucibus Orci luctus et ultrices Enquiry cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat LECTUS. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos himenaeos. </ p> </ Div> </ Div> </ Body> </ Html>
Ikon kustom
Melalui icons
pilihan untuk menyesuaikan ikon judul, icons
pilihan untuk menerima gelar default dan mengaktifkan (terbuka) kelas negara. Menggunakan kerangka UI CSS kelas apapun, atau membuat kelas khusus untuk menggunakan gambar latar belakang.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI akordeon (Accordion) - ikon Kustom </ 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> $ (Fungsi () { ikon var = { tajuk: "ui-icon-lingkaran-panah-e", activeHeader: "ui-icon-lingkaran-panah-s" }; $ ( "#accordion") .accordion ({ Ikon: Ikon }); $ ( "#toggle") .button (). Klik (function () { if ($ ( "#accordion") .accordion ( "pilihan", "ikon")) { $ ( "#accordion") .accordion ( "Option", "ikon", null); } Lain { $ ( "#accordion") .accordion ( "Option", "ikon", ikon); } }); }); </ Script> </ Kepala> <Body> <Div id = "akordeon"> <H3> Part 1 </ h3> <Div> <P> Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum sit amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate. </ p> </ Div> <H3> Part 2 </ h3> <Div> <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. < / p> </ Div> <H3> bagian 3 </ h3> <Div> <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero 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> Daftar satu item </ li> <Li> Daftar barang dua </ li> <Li> Daftar barang tiga </ li> </ Ul> </ Div> <H3> Bagian 4 </ h3> <Div> <P> Cras diktum Pellentesque habitant morbi tristique senectus et netus et malesuada James ac turpis egestas Vestibulum ante ipsum primis di faucibus Orci luctus et ultrices Enquiry cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat LECTUS. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos himenaeos. </ p> </ Div> </ Div> <Tombol id = "beralih"> ikon ubah </ button> </ Body> </ Html>
ruang mengisi
Sejak panel lipat terdiri dari unsur-unsur blok-tingkat, dan secara default lebarnya mengisi ruang horisontal yang tersedia. Untuk mengisi ruang vertikal dialokasikan oleh wadah, mengatur heightStyle
pilihan "fill"
, script secara otomatis akan mengatur tinggi dari ukuran panel lipat dari wadah induk.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI akordeon (Accordion) - mengisi ruang </ 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"> <Gaya> # Accordion-resizer { padding: 10px; width: 350px; height: 220px; } </ Style> <Script> $ (Fungsi () { $ ( "#accordion") .accordion ({ heightStyle: "isi" }); }); $ (Fungsi () { $ ( "# Accordion-resizer") .resizable ({ minHeight: 140, MinWidth: 200, mengubah ukuran: function () { $ ( "#accordion") .accordion ( "Refresh"); } }); }); </ Script> </ Kepala> <Body> <Class H3 = "docs"> menyesuaikan wadah luar: </ h3> <Div id = "akordeon-resizer" class = "ui-widget-content"> <Div id = "akordeon"> <H3> Part 1 </ h3> <Div> <P> Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum sit amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate. </ p> </ Div> <H3> Part 2 </ h3> <Div> <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. < / p> </ Div> <H3> bagian 3 </ h3> <Div> <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero 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> Daftar satu item </ li> <Li> Daftar barang dua </ li> <Li> Daftar barang tiga </ li> </ Ul> </ Div> <H3> Bagian 4 </ h3> <Div> <P> Cras diktum Pellentesque habitant morbi tristique senectus et netus et malesuada James ac turpis egestas Vestibulum ante ipsum primis di faucibus Orci luctus et ultrices Enquiry cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat LECTUS. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos himenaeos. </ p> </ Div> </ Div> </ Div> </ Body> </ Html>
tinggi non-otomatis
Pengaturan heightStyle: "content"
, sehingga panel dilipat mempertahankan ketinggian asli mereka.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI akordeon (Accordion) - tinggi non-otomatis </ 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> $ (Fungsi () { $ ( "#accordion") .accordion ({ heightStyle: "content" }); }); </ Script> </ Kepala> <Body> <Div id = "akordeon"> <H3> Part 1 </ h3> <Div> <P> Mauris mauris ante, blandit et, ultrices sebuah, susceros. Nam mi. Proin viverra leo ut Odio Curabitur malesuada. Vestibulum. A velit eu ante scelerisque vulputate. </ P> </ Div> <H3> Part 2 </ h3> <Div> <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. < / p> </ Div> <H3> bagian 3 </ h3> <Div> <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero 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> Daftar barang </ li> <Li> Daftar barang </ li> <Li> Daftar barang </ li> <Li> Daftar barang </ li> <Li> Daftar barang </ li> <Li> Daftar barang </ li> <Li> Daftar barang </ li> </ Ul> </ Div> </ Div> </ Body> </ Html>
Ketika terbuka melayang
Klik di kepala untuk memperluas / konten runtuhnya dibagi menjadi berbagai bagian logika, seperti tab (tab) sama. Anda dapat mengatur ketika mouse di apakah akan beralih untuk membuka berbagai bagian on / off status.
tag HTML dasar adalah serangkaian judul (tag H3) dan konten div, sehingga konten yang dapat digunakan tanpa melalui JavaScript.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI akordeon (Accordion) - Ketika melayang terbuka </ 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> $ (Fungsi () { $ ( "#accordion") .accordion ({ acara: "klik hoverIntent" }); }); / * * HoverIntent | Copyright 2011 Brian Cherne * Http://cherne.net/brian/resources/jquery.hoverIntent.html * Diubah oleh tim jQuery UI * / $ .event.special.hoverintent = { setup: function () { $ (Ini) .bind ( "mouseover", jQuery.event.special.hoverintent.handler); }, teardown: function () { $ (Ini) .unbind ( "mouseover", jQuery.event.special.hoverintent.handler); }, handler: function (event) { var CurrentX, CurrentY, timeout, args = argumen, target = $ (event.target), previousX = event.pageX, previousY = event.pageY; Fungsi track (event) { CurrentX = event.pageX; CurrentY = event.pageY; }; fungsi yang jelas () { target .unbind ( "MouseMove", track) .unbind ( "mouseout", jelas); clearTimeout (timeout); } fungsi pengendali () { var prop, orig = acara; if ((Math.abs (previousX - CurrentX) + Math.abs (previousY - CurrentY)) <7) { jelas (); Acara = $ .Event ( "hoverIntent"); untuk (prop di orig) { if (! (prop di event)) { Acara [prop] = orig [prop]; } } // Mencegah akses ke acara asli, karena acara baru akan dipicu asynchronous, acara tua tidak lagi tersedia (# 6028) menghapus event.originalEvent; target.trigger (event); } Lain { previousX = CurrentX; previousY = CurrentY; timeout = setTimeout (handler, 100); } } timeout = setTimeout (handler, 100); target.bind ({ mousemove: track, mouseout: jelas }); } }; </ Script> </ Kepala> <Body> <Div id = "akordeon"> <H3> Part 1 </ h3> <Div> <P> Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum duduk amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate. </ P> </ Div> <H3> Part 2 </ h3> <Div> <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. </ P> </ Div> <H3> bagian 3 </ h3> <Div> <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero 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> Daftar satu item </ li> <Li> Daftar barang dua </ li> <Li> Daftar barang tiga </ li> </ Ul> </ Div> <H3> Bagian 4 </ h3> <Div> <P> Lembaga Pemeringkat Kredit diktum. Pellentesque habitant morbi tristique senectus et netus et James malesuada ac egestas turpis. Vestibulum ante ipsum primis di faucibus Orci luctus et ultrices Enquiry cubilia Curae; Aenean Lacinia mauris vel est. </ P> <P> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat LECTUS. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos himenaeos. </ P> </ Div> </ Div> </ Body> </ Html>
Urutkan (Sortable)
Tarik judul untuk panel untuk menyusun ulang.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI akordeon (Accordion) - menyortir (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"> <Gaya> / * Ketika memesan, ada masalah tata letak IE (lihat # 5413) * / .group {zoom: 1} </ Style> <Script> $ (Fungsi () { $ ( "#accordion") .accordion ({ tajuk: "> div> h3" }) .sortable ({ axis: "y", menangani: "h3", berhenti: function (event, ui) { // Ketika Anda menyortir, IE tidak dapat didaftarkan blur, sehingga memicu focusout handler untuk menghapus Ui-negara-focus ui.item.children ( "h3") .triggerHandler ( "focusout"); } }); }); </ Script> </ Kepala> <Body> <Div id = "akordeon"> <Class Div = "group"> <H3> Part 1 </ h3> <Div> <P> Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum sit amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate. </ p> </ Div> </ Div> <Class Div = "group"> <H3> Part 2 </ h3> <Div> <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. < / p> </ Div> </ Div> <Class Div = "group"> <H3> bagian 3 </ h3> <Div> <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero 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> Daftar satu item </ li> <Li> Daftar barang dua </ li> <Li> Daftar barang tiga </ li> </ Ul> </ Div> </ Div> <Class Div = "group"> <H3> Bagian 4 </ h3> <Div> <P> Cras diktum Pellentesque habitant morbi tristique senectus et netus et malesuada James ac turpis egestas Vestibulum ante ipsum primis di faucibus Orci luctus et ultrices Enquiry cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat LECTUS. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos himenaeos. </ p> </ Div> </ Div> </ Div> </ Body> </ Html>