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

3.4 Content Formatting

     d. Collapsible set

2 Collapsible set Option

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

• collapsedIcon string
  default: "plus"
     กำหนดไอคอนในส่วนหัวของ collapsible เมื่อกำลังจะถูกหุบ ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน เปิดการใช้งานโดยกำหนด data-collapsed-icon="arrow-r"

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.collapsibleset.prototype.options.collapsedIcon = "arrow-r";
  });
  

• expandedIcon string
  default: "minus"
     กำหนดไอคอนในส่วนหัวของ collapsible เมื่อกำลังจะถูกขยาย ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน เปิดการใช้งานโดยกำหนด data-expanded-icon="arrow-d"

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.collapsibleset.prototype.options.expandedIcon = "arrow-d";
  });
  

• iconpos string
  default: "left"
     ตำแหน่งไอคอนของ collapsibleใน header สามารถกำหนดค่าได้ดังนี้ left, right, top, bottom, none, notext

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.collapsibleset.prototype.options.iconpos = "right";
  });
  

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

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

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

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

• mini boolean
  default: false
     กำหนดขนาดให้กะทัดรัดมากขึ้นได้จาก mini version ถ้ากำหนดเป็น false พื้นที่บางส่วนของ collapsibleจะรับค่ามาจาก collapsibleแม่ ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน เปิดการใช้งานโดยกำหนด data-mini="true"

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

• theme string
  default: null, inherited from parent
  กำหนดสีธีมให้กับ blockเนื้อหาของ collapsible โดยจะรับตัวอักษรเพียงตัวเดียวตั้งแต่ a-z    ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

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

3 Collapsible set Medthod

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

• refresh update the collapsible set
     ถ้าจัดการ collapsible ด้วย JavaScript จะต้องเรียกใช้ method refresh เพื่อปรับปรุงรูปแบบ

  
  $( ".selector" ).collapsibleset( "refresh" );	
  

     การกำหนดให้ ขยาย(expand)หรือยุบ(collapse) จะต้องเรียกใช้method ในแต่ละ collapsibleและmethodการยุบสามารถเรียกใช้เพื่อรวมหลายๆitem เข้าไว้เป็นชุดได้

  
  $( "#myCollapsibleSet" ).children().trigger( "collapse" );
  

4 Collapsible set Events

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

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

   Collapsibleset plugin มีevent ที่สามารถกำหนดเองได้ดังนี้

• create เรียกใช้ เมื่อสร้างcollapsible
  

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