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

จุดประสงค์ของบทนี้

• Configuring defaults
• Events
• Methods & Utilities
• Data attribute reference
• Theme framework

4.1 Configuring defaults

การกำหนดค่าเริ่มต้น (Configuring defaults)

   jQuery Mobile แตกต่างจาก jQuery และ jQuery UI โดย jQuery Mobile จะนำมาร์กอัปที่มี การปรับปรุงมาประยุกต์ใช้อย่างอัตโนมัติ โดยจะนำมาใช้ในการตั้งค่าเริ่มต้นพื้นฐานของ jQuery Mobile ซึ่งถูกออกแบบมาเพื่อทำงานร่วมกับ common scenarios ทำให้ง่ายต่อการกำหนดค่า เมื่อเริ่มใช้ jQuery Mobile จะเรียก mobileinit event ขึ้นมาแทนที่ค่าเริ่มต้น โดยผูกติดกับ mobileinit

$(document).bind("mobileinit", function(){
  //apply overrides here 
});

   เพราะ mobileinit event จะถูกเรียกทันที ฉะนั้นต้องผูก event handler ก่อนที่จะมีการโหลด jQuery Mobile ตามคำสั่งที่เชื่อมโยงไปยังไฟล์ JavaScript

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

   สามารถแทนที่การตั้งค่าเริ่มต้นโดยการextend objectที่ชื่อว่า $.mobile ซึ่งจะอยู่ใน method $.extend ของ jQuery

$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
    foo: bar});
});

   หรือ ตั้งค่าได้โดยใช้ object property notation (คุณสมบัติของวัตถุ)

$(document).bind("mobileinit", function(){
  $.mobile.foo = bar;
});

การกำหนดตัวเลือก (Configurable options)

   ค่าเริ่มต้นต่อไปนี้จะกำหนดผ่าน object ที่ชื่อว่า $.mobile

• activeBtnClass string, default: "ui-btn-active"
     เป็น Class CSS ที่ใช้สำหรับ "active"สถานะของปุ่ม
• activePageClass string, default: "ui-page-active"
     เป็น Class CSS ที่ใช้สำหรับหน้าเพจปัจจุบัน หรือเพจที่มีการเปลี่ยนแปลง
• ajaxEnabled boolean, default: true
     ถ้าเป็นไปได้ jQuery Mobile จะคลิกลิงค์และส่งแบบฟอร์มผ่าน Ajax โดยอัตโนมัติ แต่ถ้ามีปัญหา URL อาจถูก disable และอาจจะโหลดเป็นคำขอเป็น HTTP ธรรมดา
• allowCrossDomainPages boolean, default: false
     เมื่อ jQuery Mobile พยายามที่จะโหลดเพจภายนอก (external page) จะร้องขอผ่าน $.mobile.loadPage() ซึ่งสามารถอนุญาตให้ร้องขอข้ามโดเมนได้ โดยตั้งค่า$.mobile.allowCrossDomainPages ให้มีค่าเป็น true
  เนื่องด้วย jQuery Mobile framework จะคอยฟังว่าเพจไหนถูกมองจากbrowser's location hash มีโอกาสเป็นไปได้ที่สคริปต์สำหรับการcross-site(XSS)จะถูกโจมตีถ้าโค้ดXSS ในการร้องขอสามารถ ควบคุมhashได้ก็สามารถที่จะตั้งค่าเพื่อให้URLร้องขอข้ามโดเมนได้ซึ่งเป็นอีกทางเลือกหนึ่ง จึงเป็นเหตุผลหลักที่การตั้งค่าเริ่มต้นสำหรับ $. mobile.allowCrossDomainPages กำหนดให้เป็น false ใน PhoneGap ต้องมี "phone home" โดยโหลด assets off a remote server โดยที่ $.support.cors และ $.mobile.allowCrossDomainPages จะถูกกำหนดให้เป็น true
• autoInitializePage boolean, default: true
     เมื่อใดที่ DOM พร้อม เฟรมเวิคจะเรียกใช้ $.mobile.initializePage อัตโนมัติ ถ้าไม่พร้อม เพจจะไม่ initialize และจะถูกซ่อนไว้จนกว่า $.mobile.initializePage จะถูกเรียกใช้
• buttonMarkup.hoverDelay integer, default: 200
     กำหนด delay ในการสัมผัสอุปกรณ์ โดยเพิ่ม การอยู่ใกล้ และ down classes ของการสัมผัสปุ่มโดยลดการ delay จะทำให้รู้สึกว่าUI มีการตอบสนองที่ดีขึ้นเร็วขึ้น แต่บ่อยครั้งที่จะส่งผลให้ Downstate ซึ่งจะถูกนำมาใช้ในการเลื่อนของเพจ (page scrolling)
• defaultDialogTransition string, default: 'pop'
     กำหนดค่าเริ่มต้นการเปลี่ยนแปลงของ dialog ที่ใช้ Ajax และสามารถกำหนดให้เป็น none เพื่อไม่ให้มีการเปลี่ยนแปลง
• defaultPageTransition string, default: 'fade'
     กำหนดค่าเริ่มต้นของการเปลี่ยนแปลงของเพจที่ใช้ Ajax

  หมายเหตุ: ในเวอร์ชัน 1.1. ค่าเริ่มต้นเปลี่ยนจาก'slide' เป็น 'fade' และกำหนดให้เป็น 'none' เพื่อไม่ให้มีการเปลี่ยนแปลง

• getMaxScrollForTransition integer, default: 3
     กำหนด scroll position breakpoint สำหรับการเปลี่ยนแปลง ถ้า scroll position มีค่าสูงกว่าความสูงของหน้าต่างคูณด้วยค่าที่ได้จากการตั้งค่า การเปลี่ยนแปลงจะถูกกำหนดให้เป็น "none"
• gradeA function that returns a boolean, default: a function returning the value of $.support.mediaquery
     เงื่อนไขใด ๆ ที่สนับสนุนจะต้องพบในการกระทำลำดับต่อไป
• hashListeningEnabled boolean, default: true
     jQuery Mobileจะมีการฟังและควบคุมการเปลี่ยนของ location.hash แบบอัตโนมัติการปิดการใช้งานนี้จะป้องกัน jQuery Mobileจากการเปลี่ยนของ hash ซึ่งช่วยให้ควบคุมการใช้ deep-links ใน documentเพื่อเลื่อน scrollไปยัง ID ที่ต้องการได้
• ignoreContentEnabled boolean, default: false
  

     คำเตือน : เมื่อกำหนดค่าของคุณสมบัตินี้เป็น true จะทำให้ประสิทธิภาพของการทำงานลดลง
  หากมีการกำหนดค่า   frameworkจะทำการปรับปรุงอัตโนมัติ โดยส่วนไหนที่เป็นมาร์กอัป
  จะถูกละเว้น   การตั้งค่านี้และแอตทริบิวต์ข้อมูลที่มาพร้อมกับให้ผู้ใช้เป็นคนควบคุมกลไก
  การทำงานมากกว่า section ของ มาร์กอัป
  

• linkBindingEnabled boolean, default: true
     jQuery Mobile จะผูกการคลิกบน anchor tags ใน document การกำหนดตัวเลือกนี้มีค่าเป็นfalse จะป้องกันการควบคุมการคลิก ของ anchorทั้งหมด รวมทั้งการ active ปุ่ม และการสลับลิงค์ด้วย
• loadingMessage string, default: "loading"
     ตั้งค่าข้อความที่ปรากฏขึ้นเมื่อเพจมีการโหลด หากการตั้งค่าให้เป็น false ข้อความจะไม่ปรากฏเลย
  *ถูกยกเลิกในเวอร์ชัน 1.2 โดยใช้ $.mobile.loader.prototype.options.textVisible แทน
• loadingMessageTextVisible boolean, default: false
     เมื่อแสดงข้อความการ loading ควรจะมองเห็นข้อความปรากฏอยู่เสมอ แม้กระทั้งในกรณีที่การโหลดผิดพลาด
  *ถูกยกเลิกในเวอร์ชัน 1.2 โดยใช้ $.mobile.loader.prototype.options.textVisible แทน
• loadingMessageTheme string, default: "a"
     Theme ของ message box ของการ loading
  *ถูกยกเลิกในเวอร์ชัน 1.2 โดยใช้ $.mobile.loader.prototype.options.theme แทน
• maxTransitionWidth integer, boolean, default: false
     กำหนดความกว้างสูงสุดสำหรับการเปลี่ยนแปลงซึ่งจะเป็นตัวเลขที่เป็นกำหนดความกว้างของPixel และมีค่าเริ่มต้นเป็น False ถ้าหน้าต่างกว้างกว่าค่าตัวเลขที่กำหนดไว้ การเปลี่ยนแปลงจะ ถูกกำหนดให้เป็น "none"
• minScrollBack integer, default: 250
     จะจำระยะ Minimum scroll เมื่อกลับมายังหน้าเพจเดิม
• ns string, default: ""
     namespace ที่ใช้ data attributes เช่น data-role จะสามารถกำหนดค่าให้กับสตริง รวมทั้งกำหนดค่าเริ่มต้นเป็นค่าว่างได้ ซึ่งจะเห็นได้ชัดเจน เมื่อมีการเรียกใช้ mynamespace- เช่นเรียกใช้ data-mynamespace-foo="..." ในการทำแผนที่ ถ้าใช้ data- namespacing จะต้องทำการอัพเดท หรือแทนที่ selector หนึ่งตัวใน themeของ CSS ถ้าจะใช้ selector เหล่านี้อาจจะต้องรวม namespace เข้าไว้ด้วยกัน

  
  .ui-mobile [data-mynamespace-role=page], .ui-mobile [data-mynamespace-role=dialog], .ui-page { ...