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

3.6 Listviews

   List basics & API

Examples of all basic list swatches

1 Swatch "a" on listview

2 Swatch "b" on listview

3 Swatch "c" on listview

4 Swatch "d" on listview

5 Swatch "e" on listview

1.16 Calling the listview plugin

   สามารถเรียกใช้ listview plugin บน selector อื่นๆ เช่นเดียวกับการเรียกใช้ปลั๊กอินของ jQuery
$('#mylist').listview();

1.17 Updating lists

   สามารถเพิ่ม items ไปยัง listview โดยต้องเรียกใช้ method : refresh()เพื่อปรับปรุงรูปแบบ และสร้างรายการที่ซ้อนกัน เช่น
$('#mylist').listview('refresh');

หมายเหตุ: method refresh() จะมีผลต่อโหนดใหม่ผนวกเข้ากับรายการ(list)เท่านั้น
ในรายการใดที่ได้รับการปรับปรุงแล้วจะถูกละเว้น ซึ่งหมายความว่า ถ้าคุณเปลี่ยนเนื้อหาหรือ attributes 
ของรายการที่ปรับปรุงไปแล้ว รายการนั้นจะไม่ปรากฎ หากต้องการปรับปรุง list item สามารถใส่ fresh markupก่อนที่จะเรียกใช้ method refresได้
และ สามารถเพิ่มclass: ui-screen-hidden ลงใน element :li ได้ ในกรณีที่ต้องการซ่อนlist item

1 Listviews Option

   Listview plugin มี options ดังต่อไปนี้

• countTheme string
  default: "c"
     กำหนดแถบสีสำหรับ list item ประเภท count bubbles โดยจะรับตัวอักษรเพียงตัวเดียวตั้งแต่ a-z ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.countTheme = "a";
  });
  

• dividerTheme string
  default: "b"
     กำหนดแถบสีสำหรับ list item ประเภท dividers โดยจะรับตัวอักษรเพียงตัวเดียวตั้งแต่ a-z ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.dividerTheme = "a";
  });
  

• filter boolean
  default: false
     เพิ่ม search filter bar ลงใน listview เพื่อกำหนดค่าของทุกๆกรณีของเครื่องมือนี้ ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.filter = true;
  });
  

• filterCallback function
     ฟังก์ชันนี้กำหนดให้แถวถูกซ่อนเมื่อ textboxของ search fiilter มีการเปลี่ยนแปลง โดยฟังก์ชันจะยอมรับข้อความจาก ข้อความของList item หรือค่าที่ได้จาก data-filtertext และการค้นหาจากตัวอักษร ซึ่งจะคืนค่าเป็น "true"เพื่อซ่อนitem หรือ false เพื่อต้องการให้แสดงให้เห็น ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.filterCallback = function( text, searchValue )  
      {
          // only show items that *begin* with the search string
          return text.toLowerCase().substring( 0, searchValue.length ) !==  
          searchValue;
      };});
  

• filterPlaceholder string
  default: "Filter items..."
     ข้อความ placeholder ใช้ใน search filter bar เพื่อกำหนดค่าของทุกๆกรณีของเครื่องมือนี้ ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.filterPlaceholder = "Search...";
  });
  

• filterTheme string
  default: "c"
     กำหนดแถบสีสำหรับ list item ประเภท search filter bar โดยจะรับตัวอักษรเพียงตัวเดียวตั้งแต่ a-z ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.filterTheme = "a";
  });
  

• headerTheme string
  default: "b"
     กำหนดแถบสีในส่วนheader สำหรับ list item ประเภท nested list โดยจะรับตัวอักษรเพียงตัวเดียวตั้งแต่ a-z ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.headerTheme = "a";
  });
  

• initSelector CSS selector string
  default: ":jqmData(role='listview')"
     ใช้ในการกำหนด selectors (element types, data roles ,ฯลฯ ) ที่จะเป็นค่าเริ่มต้นของ collapsible โดยอัตโนมัติ ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.initSelector = ".mylistview";
  });
  

• inset boolean
  default: false
     เป็นการเพิ่มlist item ประเภท inset list เพื่อกำหนดค่าของทุกๆกรณีของเครื่องมือนี้ ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน เปิดการใช้งานโดยกำหนด data-inset="true

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.inset = true;
  });
  

• splitIcon string
  default: "arrow-r"
     ไอคอนจาก icon set นำมาประยุกต์ใช้เพื่อสร้าง split list button ทั้งหมด เพื่อกำหนดค่าของทุกๆกรณีของเครื่องมือนี้ ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.splitIcon = "star";
  });
  

• splitTheme string
  default: "b"
     กำหนดแถบสีสำหรับ list item ประเภท split list button โดยจะรับตัวอักษรเพียงตัวเดียวตั้งแต่ a-z ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.splitTheme = "a";
  });
  

• theme string
  default: null, inherited from parent
     กำหนดแถบสีสำหรับ list item ประเภท split list button โดยจะรับตัวอักษรเพียงตัวเดียวตั้งแต่ a-z หากไม่กำหนดสีอย่างชัดเจน โดยค่าเริ่มต้นจะใช้สีเดียวกับสีของcontainer หลัก

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.listview.prototype.options.theme = "a";
  		}
  

2 Listviews Medthod

   Listview plugin มี method ดังต่อไปนี้

• childPages retrieve the sub-page
  default: null, inherited from parent
     เมทธอดนี้จะส่งเพจย่อยที่มีอยู่ทั้งหมดในรายการที่ซ้อนกันกลับคืนมาทันที

  
  $('.selector').listview('childPages');
  

• refresh update the listview
  default: null, inherited from parent
     ถ้าจัดการ collapsible ด้วย JavaScript จะต้องเรียกใช้ method refresh เพื่อปรับปรุงรูปแบบ

  
  $('.selector').listview('refresh');
  

3 Listviews Events

   Listview plugin มี events ดังต่อไปนี้

   ผูก event ใน <ul> หรือ<ol> โดยใช้ virtual events หรือผูกกับ JavaScript events, like change, focus, blur ฯลฯ จากโค้ดดังต่อไปนี้

$( ".selector" ).listview({
   create: function(event, ui) { ... }
});