ถัดไป ก่อนหน้า

3.6 Listviews

   List basics & API

Inset search filter bar

CD ไฟล์: Inset search filter bar.html

1.12 Lists with forms

   เป็นการแสดง List แบบต่างๆในรูปแบบตาราง

Lists with forms

CD ไฟล์: Lists with forms.html

Inset lists with forms

CD ไฟล์: Inset with Forms.html

1.13 Collapsible lists

   Listviews สามารถใช้ร่วมกับ collapsibleได้ โดยFrameworkจะตัดเส้นขอบด้านล่างของรายการล่าสุดและปรับมุมเนื้อหาพอดีกับ collapsible แต่สามารถสร้างเส้นขอบได้ด้วยการกำหนด data-content-theme ให้กับรายการ

Inset, individual collapsible

   ตัวอย่างการใช้ data-role="collapsible" ครอบพื้นที่ของ Listview

CD ไฟล์: Inset-individual collapsible.html

Inset, collapsible set

   สามารถใช้ listview ภายใน collapsible set เพื่อจัดกลุ่มข้อมูลได้

CD ไฟล์: Inset-collapsible set .html

Non-inset, collapsible set

   กำหนด data-inset="false" จะทำให้ collapsibleไม่มีเส้นขอบและมีขนาดเต็มหน้าจอ

CD ไฟล์: Non-inset_collapsible set.html

Non-inset, individual collapsibles

CD ไฟล์: Non-inset_individual collapsibles.html

1.14 List performance test

   การทดสอบประสิทธิภาพของList โดยแสดงรายการจำนวนมากๆ จากตัวอย่างในไฟล์ List performance test.html จะแสดงรายการทั้งหมด 500 รายการ

CD ไฟล์: List performance test.html

1.15 Theming lists

   สีธีมมาตราฐานสามารถนำมาใช้กับ List ได้ โดย List จะสืบทอดสีธีมมาจากเพจ/เนื้อหาหลัก ซึ่งมีสีธีมเริ่มต้นเป็นสีเงิน (swatch "c") แต่ธีมของ List dividers และ split buttons มีสีธีมเริ่มต้นเป็นสีน้ำเงิน (swatch "b")

CD ไฟล์: Theming lists.html

Theming list items

   สามารถเปลี่ยนสีธีมของปุ่มต่างๆ โดยเพิ่ม attribute :data-theme ลงใน List

CD ไฟล์: Themelist_item.html

สามารถเพิ่มสีลงใน <li> ได้ เช่น

<li data-theme="a"><a href="index.html">Trash <span class="ui-li-count">>34</span></a></li>

CD ไฟล์: Theming list items.html

Theming dividers

   สามารถใส่สีธีมโดยเพิ่ม data-divider-theme ใน list dividers ได้

CD ไฟล์: Theming dividers.html

Theming count bubbles

   สามารถใส่สีธีมโดยเพิ่ม data-count-theme ใน count bubbles ได้

CD ไฟล์: Theming count bubbles.html

Theming icons

CD ไฟล์: Theming icons.html

Theming split buttons

   เมื่อใช้ split button สีค่าเริ่มต้นของไอคอน จะเป็นสีน้ำเงิน

CD ไฟล์: Theming split buttons.html

   สามารถเปลี่ยนสีธีมของsplit button ได้โดยเพิ่ม attribute : data-split-theme ลงในListview เช่น  ul data-role="listview" data-inset="true" data-split-theme="a"> และสามารถเปลี่ยนสีของไอคอนได้โดยเพิ่ม attribute : data-theme
เช่น <a href="index.html" data-theme="e">Purchase album</a>

ตัวอย่างหน้าจอ

   สามารถเปลี่ยนรูปของไอคอน ในsplit buttonได้โดยเพิ่ม attribute :data-split-icon ลงในListview เช่น <ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete"> และสามารถเพิ่ม attribute : data-icon เพื่อใส่รูปภาพให้กับไอคอนได้ เช่น <li data-icon="alert">

ตัวอย่างหน้าจอ