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

3.6 Listviews

   List basics & API

1.6 List dividers

   สามารถจัดกลุ่มรายการเพื่อจัดระเบียบโดยเพิ่ม data-role="list-divider"ลงในรายการ โดยรูปแบบของรายการจะเป็น bar ที่มีสีเริ่มต้นเป็นสีฟ้า แต่สามารถระบุสีได้ใน ul หรือ ol ด้วย attribute: data-dividertheme

List dividers

CD ไฟล์: List dividers.html

List formatting

CD ไฟล์: List formatting.html

1.7 Auto dividers

   สามารถจับกลุ่มรายการได้โดยอัตโนมัติ ด้วยการเพิ่ม attribute: data-autodividers="true" ซึ่งค่าเริ่มต้นของการจับกลุ่ม ข้อความจะถูกสร้างด้วยตัวอักษรตัวแรกของข้อความ แต่สามารถตั้งค่าได้จาก option : autodividersSelector เช่นเพิ่มตัวเลือกที่กำหนดเอง ด้วย element :id="mylistview"

$("#mylistview").listview({
  autodividers: true,
  // the selector function is passed a <li> element from the listview;
  // it should return the appropriate divider text for that <li>
  autodividersSelector: function ( li ) {
    var out = /* generate a string based on the content of li */; return out; }
});

CD ไฟล์: Autodividers.html

1.8 Search filter

   jQuery Mobile มีวิธีที่ง่ายในการค้นหา โดยเพิ่ม attribute: data-filter="true"ซึ่งจะมี ช่องสำหรับค้นหาอยู่ด้านบนList และในช่องจะมีข้อความ"Filter items..."เป็นค่าเริ่มต้น
   การกำหนดค่าข้อความในการป้อนข้อมูล การค้นหาสามารถผูก optionกับ mobileinit eventได้ โดยใช้ option : $.mobile.listview.prototype.options.filterPlaceholder หรือเพิ่ม data attribute : data-filter-placeholder ลงใน listview โดยค่าเริ่มต้นสีธีมของช่องค้นหาจะใช้สีเดียวกับสีของcontainer แม่ แต่สามารถกำหนดสีธีมได้เองด้วยการใช้ data attribute : data-filter-theme
   ถ้าต้องการที่จะเปลี่ยนวิธีที่การค้นหา เช่นการค้นหาที่คลุมเครือหรือจับคู่จากตัวอักษร ตัวแรกของข้อความ สามารถกำหนดค่า callback ภายในโดยกำหนด $.mobile.listview.prototype.options.filterCallback หรือหลังจากที่เครื่องมือนี้สร้างด้วย $("#mylist").listview('option', 'filterCallback', yourFilterFunction)
   ฟังก์ชั่นที่กำหนดไว้สำหรับ callback จะได้รับได้สามอาร์กิวเมนต์ คือ
1. ข้อความของ list item ปัจจุบัน
2. ค่าที่ถูกค้นหา
3. list item ที่ filtered ค่าเริ่มต้นของ callback ที่กรองรายการโดยไม่ต้อง searchValue เป็น substringจะระบุดังนี้

function( text, searchValue, item ){
  return text.toString().toLowerCase().indexOf( searchValue ) === -1;
};

CD ไฟล์: Search filter bar.html

Search filter with dividers

CD ไฟล์: Search filter with dividers.html

Search filter hidden data

   โดยเริ่มต้น การค้นหาจะกรองเนื้อหาของแต่ละรายการ แต่ถ้าไม่ต้องการให้กรองการค้นหา สามารถทำได้โดยเพิ่ม attribute:data-filtertext
   คุณลักษณะนี้จะเป็นประโยชน์สำหรับการอนุญาตให้ใช้สัญลักษณ์และชื่อเต็มของบริษัท ในการค้นหาหรือตัวย่อของชื่อประเทศ

หมายเหตุ:ถ้าเพิ่มแอตทริบิวต์นี้เนื้อหาของรายการจะถูกละเว้น

เช่น

<li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
<li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>

CD ไฟล์: Search filter hidden data.html

1.9 Text formatting & counts

   framework จะเรียกใช้การจัดรูปแบบข้อความสำหรับรูปแบบรายการที่เหมือนกัน เช่นส่วนหัว / คำอธิบายข้อมูล,ข้อมูลรองและนับผ่าน semantic HTML markup

• การเพิ่มตัวบ่งชี้การนับในด้านขวาของรายการ โดยครอบตัวเลขด้วย class: ui-li-count
• หากต้องการเพิ่มลำดับข้อความ ให้ใช้ headings เพิ่มความสำคัญของตัวอักษร และใช้ย่อหน้าเพื่อลดความสำคัญ
• สามารถเพิ่มข้อมูลเพิ่มเติมทางขวาของรายการแต่ละรายการได้ โดยครอบเนื้อหาด้วย class : ui-li-aside

CD ไฟล์: Count bubble.html

1.10 Thumbnails & icons

   สามารถเพิ่ม thumbnails ในด้านซ้ายของ list itemได้ และเพิ่มรูปซึ่งมีขนาดภาพถึง 80 พิกเซลภายใน list item ได้ง่ายๆ โดยใช้ค่ามาตราฐานของไอคอน ขนาด16x16 pixel ด้วยการเพิ่ม class : ui-li-iconลงในelement ของรูปภาพ

Thumbnails

CD ไฟล์: Thumbnails .html

Icons

CD ไฟล์: Icons.html

1.11 Inset lists

   หากหน้าเว็บมีเนื้อหาหลากหลายประเภท สามารถแบ่งประเภทของข้อมูล และใส่Listเข้าไปเพื่อแสดงเนื้อหาได้ โดยเพิ่ม attribute : data-inset="true" ลงใน<ul> หรือ <ol>

Inset Styled lists

CD ไฟล์: Inset Styled lists.html