blok boleh lipat jQuery Mobile
Blok Kandungan Boleh Dilipat
Blok boleh dilipat membolehkan anda menyembunyikan atau menunjukkan kandungan - berguna untuk menyimpan maklumat separa.
Untuk membuat blok kandungan boleh lipat, anda perlu menambah atribut data-role="collapsible" pada bekas. Di dalam bekas (div), tambahkan elemen tajuk (H1-H6), diikuti dengan teg HTML yang anda mahu kembangkan:
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠块</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> </div> </div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Secara lalai, kandungan diruntuhkan. Untuk mengembangkan kandungan pada pemuatan halaman, gunakan data-collapsed="false":
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠块</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-collapsed="false"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> </div> </div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div> </body> </html>
Run Instance»
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
Blok boleh lipat bersarang
Blok kandungan boleh lipat boleh bersarang antara satu sama lain:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>嵌套的可折叠块</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> <div data-role="collapsible"> <h1>点击我 - 我是嵌套的可折叠块！</h1> <p>我是嵌套的可折叠块中被展开的内容。</p> </div> </div> </div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
| Boleh Dilipat blok kandungan boleh bersarang seberapa banyak yang anda perlukan. |
|---|
Koleksi boleh lipat
Koleksi boleh lipat ialah blok boleh lipat yang dikumpulkan bersama (seperti akordion). Apabila blok baharu dikembangkan, semua blok lain runtuh.
Buat beberapa blok kandungan boleh lipat, kemudian kelilingi blok kandungan boleh lipat dengan bekas baharu dengan data-role="collapsible-set":
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠集</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsibleset"> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> </div> </div> <div data-role="footer"> <h1>页脚内容</h1> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Lagi Contoh
Batalkan bucu bulat dan jidar melalui atribut pemasukan data
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠的 data-inset</h1> </div> <div data-role="main" class="ui-content"> <h2>带有圆角的可折叠内容块:</h2> <div data-role="collapsible"> <h1>这是有圆角的可折叠内容块。</h1> <p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉外边距与圆角。</p> </div> <h2>没有圆角的可折叠内容块：</h2> <div data-role="collapsible" data-inset="false"> <h1>这是没有圆角的可折叠内容块。</h1> <p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉外边距与圆角。</p> </div> <br> <h2>没有圆角的可折叠集合:</h2> <div data-role="collapsibleset"> <div data-role="collapsible" data-inset="false"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible" data-inset="false"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible" data-inset="false"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible" data-inset="false"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Contoh Jalankan »
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
Cara membatalkan bucu bulat dan jidar pada blok boleh lipat.
Blok boleh lipat mini melalui atribut data-mini
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠块</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-mini="true"> <h1>点击我 - 我是可折叠的！</h1> <p>我是可折叠的内容。</p> </div> </div> <div data-role="footer"> <h1>页脚</h1> </div> </div> </body> </html>
Jalankan instance»
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
Cara untuk menjadikan blok boleh lipat lebih kecil.
Tukar ikon melalui ikon-diruntuhkan-data dan-ikon-diperluaskan
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠块</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"> <h1>data-collapsed-icon 规定按钮的图标。</h1> <p>data-expanded-icon 规定内容被展开时按钮的图标。</p> </div> </div> <div data-role="footer"> <h1>页脚</h1> </div> </div> </body> </html>
Jalankan instance »
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Cara menukar ikon blok boleh lipat (lalai ialah + dan -).
Gunakan lipatan dalam tetingkap timbul
Buat item lipatan dalam tetingkap timbul.
Ubah suai kedudukan ikon
Cara mengubah suai kedudukan ikon dalam item yang dilipat (lalai adalah di sebelah kiri).
