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

3.2 Toolbars

     b. Headers
Header structure
โครงสร้างของ Header
   Header เป็น toolbar ที่อยู่บนสุดของเพจ โดยส่วนใหญ่จะมี title และปุ่ม แสดงอยู่ ซึ่งตำแหน่ง ของHeader จะถูกกำหนดให้เป็นแบบ fixed mode ทำให้ Header จะอยู่บนสุดของเพจตลอดเวลา
   ข้อความของ title จะเป็นตัวอักษรแบบปกติ แต่สามารถใช้ H1ใน Headerได้ โดยมีระดับ ของheading ตั้งแต่ H1-H6
Default header features
คุณสมับติเริ่มต้นของheader เริ่มต้น header จะถูกกำหนดให้มีธีมเป็นสีดำ

CD ไฟล์: Default header.html

การเพิ่มปุ่ม(Adding buttons)
   องค์ประกอบพื้นฐานของ header จะมีปุ่มอยู่ด้านข้างหัวเรื่อง และ เพื่อการประหยัดพื้นที่ ปุ่มใน toolbars จะถูกกำหนดให้เป็น inline styling โดยปุ่มจะมีเพียงข้อความและไอคอนเท่านั้น
ตำแหน่งเริ่มต้นของปุ่ม(Default button positioning)
   ปุ่มจะถูกกำหนดให้ลิงค์แรกปรากฎในช่องด้านซ้ายและลิงค์ที่สองในด้านขวาโดยอัตโนมัติ เช่น ปุ่ม Cancel จะปรากฏในช่องทางด้านซ้ายและปุ่ม Saveจะปรากฏในช่องด้านขวาตามลำดับ
CD ไฟล์: Defaultbuttonposition.html

การทำปุ่มให้โดดเด่น(Making buttons visually stand out)
   ปุ่มจะนำสีของbar มาใช้โดยอัตโนมัติ ดังนั้นถ้าลิงค์ใน header bar เป็นสีดำ สีของปุ่มก็จะเป็นสีดำ การทำปุ่มให้เด่นทำได้โดยกำหนดสีให้ปุ่มๆนั้นด้วยการเพิ่ม attribute ที่ชื่อว่า data-theme และเลือกสีให้กับปุ่ม
CD ไฟล์: Making button theme.html

ควบคุมตำแหน่งของปุ่มด้วย class(Controlling button position with classes)
   ตำแหน่งของปุ่มสามารถควบคุม เพื่อระบุตำแหน่งของปุ่มได้ โดยเพิ่ม class: ui-btn-left หรือ ui-btn-right ลงไปในปุ่ม โดยการเพิ่มclassนี้จะเป็นประโยชน์เมื่อต้องการให้ปุ่มเฉพาะด้านซ้ายหรือขวา
CD ไฟล์: Control button position with class.html

เพิ่มปุ่มใน toolbar โดยไม่ใช้ heading(Adding buttons to toolbars without heading)
   Heading ใน header bar มีบาง marginจะส่งผลทำให้ bar ขยายขึ้น ถ้าหากไม่ใช้ Headingจะต้องเพิ่ม class="ui-title" ซึ่งจะทำให้ bar แสดงความสูงได้อย่างถูกต้อง
CD ไฟล์: Add button without heading.html

การเพิ่มปุ่ม Back(Adding Back buttons)
   jQuery Mobile มีคุณสมบัติการสร้างและเพิ่มปุ่ม " back "ลงในheader โดยอัตโนมัติ แม้ว่าค่าเริ่มต้นจะถูกปิดใช้งาน ซึ่งจะเป็นประโยชน์มากในการติดตั้งโปรแกรม chromeless เช่นการรันแอปพลิเคชัน webview เมื่อ plugin's addBackBtn ถูกกำหนดให้เป็น true frameworkจะสร้างปุ่ม back ในheader ให้โดยอัตโนมัติ และสามารถกำหนดค่าจากมาร์กอัป โดยเพิ่ม attribute : data-add-back-btn="true" ลงในdiv ของเพจ
   ถ้าหากใช้ attribute data-rel="back" การคลิกจะล้อเลียนกับปุ่ม back ซึ่งจะทำให้กลับไป ยังเว็บไซต์ก่อนหน้า และเพิกเฉยต่อค่าที่กำหนดใน attribute href แต่จะเป็นประโยชน์เมื่อมีการลิงค์ กลับไปที่ชื่อของเพจ เช่นลิงค์ที่ระบุว่า "home" หรือปุ่ม "back" ที่ถูกสร้างโดย JavaScript เช่นปุ่มclose ซึ่งจะให้ความหมายว่า attribute href จะชี้ไปยังURLของเพจที่อ้างอิง ซึ่งเป็นประโยชน์ต่อผู้ใช้ที่ ใช้เบราว์เซอร์ระดับเกรด C
   ถ้าต้องการกลับไปยังเว็บไซต์ก่อนหน้า อาจใช้เพียง attribute : data-direction="reverse" ก็ได้
การปรับแต่งtext ของปุ่ม back(Customizing the back button text)
   ถ้าต้องการตั้งค่าtext ให้กับปุ่ม back สามารถใช้ attribute : data-back-btn-text="previous" หรือเลือกตั้งค่าผ่านปลั๊กอินของเพจจาก

$.mobile.page.prototype.options.backBtnText = "previous";

รูปแบบเริ่มต้นของปุ่ม back(Default back button style)
   ถ้าต้องการตั้งค่า role-theme ให้กับปุ่ม back สามารถกำหนดด้วย

$.mobile.page.prototype.options.backBtnTheme = "a";

และสามารถตั้งค่าใน mobileinit event handler ได้
การกำหนด header ได้ด้วยตนเอง(Custom header configurations)
   สามารถทำได้โดยสร้างรูปแบบครอบพื้นที่ส่วนนั้นไว้ เช่น สร้าง divครอบเนื้อหาภายใน header ซึ่งสามารถสร้างรูปแบบของ lay out ขึ้นเองได้ นอกจากนี้ยังสร้างbarขึ้นเองได้โดยไม่ต้องใช้ data-role ของheader เช่นเพิ่ม class : ui-bar เพื่อใช้มาตรฐาน padding ของ bar และ กำหนดธีมได้เอง เช่น กำหนดให้เป็นสีน้ำเงินด้วย ui-bar-b
CD ไฟล์: Custom header configurations.html

หมายเหตุ:.ui-barไม่ควรเพิ่มลงในheaderหรือfooterbarsจะส่งผลให้element:full-width ถูกแยกออกจาก container หลัก  ควรเพิ่ม padding ภายใน element : full-width  ที่ครอบเนื้อหาของtoolbar และประยุกต์ paddingใหม่เข้าไปแทนที่

CD ไฟล์:Custom header Other configurations.html

สร้าง style ของ message bars
CD ไฟล์: Build message bars style.html