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

3.4 Content Formatting

     c. Collapsible content

2 Collapsible Option

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

• collapsed boolean
  default: true
  ในส่วนที่แสดงไอคอนใน header จะแสดงเป็นไอคอน “-”
  ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

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

• collapseCueText string
  default: " click to collapse contents"
  ข้อความนี้จะใช้ในการให้ข้อเสนอแนะให้กับผู้ใช้ด้วยซอฟต์แวร์อ่านหน้าจอ ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.collapsible.prototype.options.collapseCueText = " collapse with a click";
  });
   

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

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

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

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

• expandCueText string
  default: " click to expand contents"
  ข้อความนี้จะใช้ในการให้ข้อเสนอแนะให้กับผู้ใช้ด้วยซอฟต์แวร์อ่านหน้าจอ ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

  
  $( document ).bind( "mobileinit", function(){
      $.mobile.collapsible.prototype.options.expandCueText = " expand with a click";
  });
   

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

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

• heading string
  default: "h1,h2,h3,h4,h5,h6,legend"
  element หัวข้อแรกจะเป็น headerภายใน collapsibleโดยทันที ในการกำหนดค่าoptionนี้จะต้องผูก optionกับ mobileinit event เข้าไว้ด้วยกัน

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

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

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

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

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

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

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

• mini boolean
  default: false
  กำหนดขนาดให้กะทัดรัดมากขึ้นได้จาก mini version ถ้ากำหนดเป็น false พื้นที่บางส่วนของ collapsibleจะรับค่ามาจาก collapsibleแม่

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

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

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