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

3.2 Toolbars

     e. Fixed toolbars

2 Fixed toolbars Option

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

• visibleOnPageShow boolean
  default: true
      เป็นoption ที่กำหนดการเปิดเผยว่าสามารถเปิดเผยได้หรือไม่ ในขณะที่มีการแสดงเพจ
     เปิดเผยได้ = "false"

  $("[data-role=header]").fixedtoolbar({ visibleOnPageShow: false });

• disablePageZoom boolean
  default: true
     เป็นoption ที่กำหนดว่าควรปิดการใช้งาน scaling บนหน้าเว็บไซต์หรือไม่
     ปิดการใช้งาน = "false"

  $("[data-role=header]").fixedtoolbar({ disablePageZoom: false });

• transition string
  default: "slide" (สิ้นสุดการใช้ slideUp และ slideDown)
      เป็น Optionการเปลี่ยนแปลงที่ควรจะใช้สำหรับการแสดงและซ่อน fixed toolbar
      สามารถกำหนดได้คือ "none", "fade", "slide" หรือจะสร้าง cssขึ้นเองก็ได้

  $("[data-role=header]").fixedtoolbar({ transition: "fade" });

• fullscreen boolean
  default: true
      ถ้ามีการเปิดใช้งานแบบ Fullscreen เมื่อมีการสัมผัสหน้าจอจะไม่กลับไปเป็น static positioning แต่จะหายไปจากหน้าจอทั้งหมด แถบเครื่องมือนี้เหมาะสำหรับappsที่แสดงภาพหรือวิดีโอ ที่ต้องการให้แสดงผลเต็มหน้าจอ
     ข้อมูลแบบเต็มจอ = "true"

  $("[data-role=header]").fixedtoolbar({ fullscreen: true });

  หมายเหตุ: option นี้ผู้ใช้ไม่สามารถกำหนดได้แล้ว เนื่องจากจะสนับสนุนเฉพาะ  toolbar element เท่านั้น

• tapToggle boolean
  default: true
      เปิดใช้งานหรือปิดการใช้งาน ความสามารถในการสลับการแสดงผลด้วยการสัมผัสบนหน้าจอ หรือการคลิกจากผู้ใช้สามารถสลับด้วยการสัมผัสได้ = "true"
  

  $("[data-role=header]").fixedtoolbar({ tapToggle: true });

  
   หมายเหตุ : เดิมลักษณะการทำงานนี้ถูกกำหนดโดยโค้ดดังนี้ $.mobile.fixedToolbars.setTouchToggleEnabled(false); แต่ version 1.1 ไม่สนับสนุน syntaxนี้
   

• tapToggleBlacklist string
  default: "a, button, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" เมื่อมีการสัมผัสจะไม่ทำให้ list สลับไปมา
  

  $("[data-role=header]").fixedtoolbar({ tapToggleBlacklist: "a, button, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" });

• hideDuringFocus string
  default: "input, select, textarea"
  กำหนดให้ซ่อนListที่ถูกเลือก ยกเว้นในกรณีที่กำหนดให้มีรูปแบบเป็น fixed toolbar

  $("[data-role=header]").fixedtoolbar({ hideDuringFocus: "input, select, textarea" });

• updatePagePadding boolean
  default: true
     จะมีการปรับความสูงตามระดับของเนื้อหาโดยอัตโนมัติและเมื่อมีการเลื่อนในตำแหน่งบนสุดหรือล่างสุดของเพจ
     ถ้าเปิดการใช้งาน จะมีการอัพเดท pedding ตลอดเมื่อมีการเปลี่ยนแปลง เช่น การแสดงหน้าเพจ ,ขณะที่มีการเปลี่ยนหน้าเพจ รวมถึงการปรับขนาด จึงควรปิดการใช้งาน optionนี้ และกำหนดหน่วยในcss ให้เป็น em เช่น .ui-page-header-fixed { padding-top: 4.5em; } อัพเดท paddingของเพจได้ ="false"

  $("[data-role=header]").fixedtoolbar({ updatePagePadding: false });

• supportBlacklist function
  default: truedefault: function that returns a boolean value
     บ่อยครั้งที่platformจะสนับสนุนการ fixed position แค่บางส่วน ซึ่งเป็นสิ่งที่แย่กว่า การที่ไม่สนับสนุนเลย ถ้าจำเป็นต้องใช้งานฟังก์ชันนี้ คือเมื่อมีการเรียกใช้ ต้องให้ฟังก์ชันส่งค่ากลับ เป็นค่า true หรือ false โดยปกำหนดบน mobileinit เพื่อที่จะใช้ปลั๊กอินที่สร้างขึ้น

  
  $( document ).bind("mobileinit", function(){
    $.mobile.fixedtoolbar.prototype.options.supportBlacklist = function(){
      var result;
      // logic to determine whether result should be true or false
      return result;
    };
  })
  

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

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