คู่มือการออกแบบแอพมือถือ / คู่มือเริ่มต้นของ Dev เพื่อ jQuery Mobile

ในช่วง 2-3 ปีที่ผ่านมาเราได้เห็นการเติบโตอย่างมากของเบราว์เซอร์และระบบปฏิบัติการสำหรับเว็บไซต์มือถือ แพลตฟอร์ม iOS และ Android ของ Google เป็นที่สะดุดตาที่สุด แต่คนอื่น ๆ เช่น PalmOS และ Blackberry ยังคงอยู่ในส่วนผสม จนกระทั่งเมื่อไม่นานมานี้มันเป็นเรื่องยากมากที่จะจับคู่ธีมมือถือเดียวกับแพลตฟอร์มเหล่านี้ทั้งหมด.

JavaScript เป็นการเริ่มต้น แต่ยังไม่มีไลบรารีที่ครบวงจรอย่างแท้จริงมาจนถึงทุกวันนี้ jQuery Mobile ใช้คุณสมบัติที่ดีที่สุดทั้งหมดของ jQuery และพอร์ตเหล่านั้นไปยังแหล่งเว็บบนมือถือ ไลบรารีเป็นเหมือนเฟรมเวิร์กซึ่งรวมถึงแอนิเมชั่นเอฟเฟกต์การเปลี่ยนภาพและสไตล์ CSS อัตโนมัติสำหรับองค์ประกอบ HTML พื้นฐาน ในคู่มือนี้ฉันหวังว่าจะแนะนำแพลตฟอร์มในแบบที่คุณสามารถรู้สึกสะดวกสบายในการออกแบบแอพมือถือ jQuery ของคุณเอง.

คุณสมบัติและการรองรับระบบปฏิบัติการ

เหตุผลที่ฉันแนะนำให้เรียน jQuery Mobile ผ่านเฟรมเวิร์กอื่นคือความเรียบง่าย รหัสนี้สร้างขึ้นบนแกน jQuery และมีทีมงานของนักพัฒนาที่เขียนสคริปต์และแก้ไขข้อบกพร่อง จากคุณสมบัติหลายอย่างรวมถึงการสนับสนุน HTML5 ลิงค์การนำทางที่ใช้อาแจ็กซ์และตัวจัดการเหตุการณ์แบบสัมผัส / ปัด.

การสนับสนุนแตกต่างกันระหว่างโทรศัพท์และแบ่งออกเป็นแผนภูมิ 3 หมวดหมู่จาก A-C A เป็นระดับสูงสุดที่มีการสนับสนุนอย่างเต็มที่ของ jQuery Mobile, B มีทุกอย่างยกเว้น Ajax ในขณะที่ C เป็น HTML พื้นฐานที่ไม่มีจาวาสคริปต์ โชคดีที่ระบบปฏิบัติการที่เป็นที่นิยมส่วนใหญ่ได้รับการสนับสนุนอย่างสมบูรณ์ - ฉันได้เพิ่มรายการด้านล่างของตัวอย่างเพียงไม่กี่ตัวอย่าง.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

หากคุณต้องการเรียนรู้เพิ่มเติมลองอ่านในหน้าเอกสารทางการของพวกเขา มันไม่ได้เขียนด้วยภาษาพูดพล่อยๆและจริง ๆ แล้วรู้สึกง่ายมากที่จะติดตาม ตอนนี้เรามาเน้นที่พื้นฐานของการเขียนหน้ามือถือ jQuery และวิธีที่เราสามารถสร้างแอปพลิเคชันขนาดเล็ก!

เทมเพลต HTML มาตรฐาน

ในการทำให้แอปมือถือเครื่องแรกของคุณทำงานโดยมีเทมเพลตชุดที่คุณควรเริ่มด้วย ซึ่งรวมถึงรหัสฐาน jQuery พร้อมกับ mobile JS และ CSS ซึ่งโฮสต์ภายนอกทั้งหมดจาก jQuery CDN ลองดูโค้ดตัวอย่างของฉันด้านล่าง.

องค์ประกอบต่างประเทศเท่านั้นที่นี่ควรเป็นเมตาแท็กสองแท็ก ด้านบน วิวพอร์ต แท็กจะอัปเดตเบราว์เซอร์มือถือเพื่อใช้เอฟเฟกต์การซูมแบบเต็ม การตั้งค่า width = ความกว้างของอุปกรณ์ จะตั้งค่าความกว้างของหน้ากระดาษเท่ากับความกว้างของหน้าจอโทรศัพท์ และที่ดีที่สุดคือไม่ปิดการใช้งานคุณสมบัติการซูมเนื่องจาก jQuery Mobile สามารถปรับให้เข้ากับการเลื่อนหน้าจอ.

เมตาแท็กถัดไป X-UA-เข้ากันได้ เพียงบังคับให้ Internet Explorer แสดง HTML ในการทำซ้ำครั้งล่าสุด เบราว์เซอร์รุ่นเก่าและอุปกรณ์พกพาโดยเฉพาะจะพยายามแก้ไขข้อบกพร่องในการแสดงผลที่ไม่คุ้นเคย.

การสร้างเนื้อหาร่างกาย

ตอนนี้เป็นที่ซึ่ง jQuery mobile สามารถเล่ห์เหลี่ยมได้ หน้า HTML แต่ละหน้าไม่จำเป็นต้องมี 1 หน้าในเว็บไซต์มือถือ เฟรมเวิร์กใช้ประโยชน์จากคุณลักษณะข้อมูลของ HTML5 ซึ่งคุณสามารถสร้างได้อย่างรวดเร็วโดยต่อท้าย ข้อมูล- ล่วงหน้า ในแบบเดียวกัน ข้อมูลบทบาท = "หน้า" สามารถตั้งค่าหลาย divs ในไฟล์ HTML เดียวให้คุณมากกว่าหนึ่งหน้า.

จากนั้นคุณจะย้ายไปมาระหว่างหน้าเหล่านี้ด้วยจุดยึดลิงก์และรหัสเฉพาะ การตั้งค่านี้เป็นความคิดที่ดีสำหรับแอพพื้นฐานที่ใช้งานง่าย หากคุณต้องการเพียง 3-5 หน้าทำไมไม่เก็บมันไว้ในไฟล์เดียว? เว้นแต่คุณจะมีเนื้อหาที่เขียนจำนวนมากซึ่งในกรณีนี้ลองใช้ PHP รวมถึงเพื่อประหยัดเวลา.

ตรวจสอบตัวอย่างรหัสด้านล่างหากคุณทำหาย.

 
 
 
แถบชื่อเรื่องยอดนิยม
 
 
 
แสดงหน้าอื่น??
 
คำใบ้: คลิกปุ่มด้านล่าง!
 
เกี่ยวกับเรา
 
  
 
 
 
หน้า 2 ที่นี่
 
 
 
เพียงแค่เนื้อหาพิเศษบางอย่างเช่นกัน.
 
ฉันหมายความว่าคุณสามารถ ย้อนกลับ เวลาไหนก็ได้.
 
 
   

ลองดูที่ลิงค์จุดยึดจากหน้าดัชนีสักครู่ แจ้งให้ทราบล่วงหน้าฉันได้เพิ่มคุณสมบัติ ข้อมูลบทบาท = "ปุ่ม" เพื่อตั้งค่าลิงค์เป็นปุ่ม แต่แทนที่จะใช้สไตล์เริ่มต้นที่เรารวมไว้ ข้อมูลธีม = "C". สิ่งนี้สลับระหว่าง 1 จาก 5 (ธีม a-e) เทมเพลตซึ่งมาในรูปแบบแพคเกจโดยค่าเริ่มต้นเป็นสไตล์ CSS ภายใน jQ Mobile.

ปุ่มของฉันครอบคลุมช่วงกว้างของหน้ากระดาษทั้งหมด ในการลบพฤติกรรมที่เราต้องตั้งค่าองค์ประกอบจากบล็อกเพื่อแสดงแบบอินไลน์ คุณลักษณะสำหรับการทำเช่นนี้คือ ข้อมูลแบบอินไลน์ = "true" ซึ่งคุณสามารถผนวกเข้ากับปุ่มยึดใด ๆ.

บาร์ส่วนหัวและท้ายกระดาษ

คุณควรเพิ่มส่วนหัวและส่วนท้ายของแอปพลิเคชันของคุณไว้ด้านบนและด้านล่าง สไตล์การออกแบบนี้มักเกิดจากแอพ iOS ซึ่งเป็นที่นิยมครั้งแรกโดยใช้ Mobile App Store ของ Apple jQ Mobile ใช้คุณสมบัติของ data-role เพื่อกำหนดเนื้อหาส่วนหัวท้ายกระดาษและหน้า ลองมาดูสั้น ๆ ที่พื้นที่เหล่านี้.

ปุ่มแถบด้านบน

โดยค่าเริ่มต้นแถบด้านบนจะสนับสนุนชุดลิงก์สอง (2) ลิงก์ในลักษณะเดียวกันกับแอพมือถืออื่น ๆ iOS ใช้ค่าเริ่มต้นเป็น “กลับ” ปุ่มทางซ้ายและบ่อยครั้งที่ “ตัวเลือก” หรือ “การตั้งค่า” ทางขวา.

 
 การตั้งค่า 
หน้า 2 ที่นี่
 
 

รหัสด้านบนเป็นเพียงการมุ่งเน้นไปที่ภาชนะ div สำหรับหน้าเกี่ยวกับของเราพร้อมกับเนื้อหาส่วนหัว แอตทริบิวต์ HTML เพิ่มเติม ข้อมูลเพิ่มหลัง btn = "true" จะทำงานเมื่อเพิ่มลงในบทบาทข้อมูลหน้าเท่านั้น วัตถุประสงค์คือเพื่อรวมปุ่มย้อนกลับซึ่งทำงานคล้ายกับปุ่มย้อนกลับของเบราว์เซอร์ของคุณ.

เราสามารถเพิ่มปุ่มย้อนกลับด้วยตนเองด้วยรหัสที่คล้ายกันตามที่เราใช้ในพื้นที่เนื้อหา แต่ฉันรู้สึกว่าการติดตั้งใช้เวลานานขึ้นโดยเฉพาะในหลาย ๆ หน้า ลิงก์จุดยึดทั้งหมดภายในส่วนหัวจะเริ่มต้นในตำแหน่งปุ่มซ้าย / ขวา โดยใช้ class = "UI-btn ขวา" นี่คือการวางตำแหน่งปุ่มการตั้งค่าของฉันใหม่เพื่อให้มีพื้นที่ว่างสำหรับปุ่มย้อนกลับ นอกจากนี้ฉันกำลังใช้ชุดรูปแบบรองเพื่อให้ความกล้าหาญพิเศษบางอย่าง!

การนำทางส่วนท้าย

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

ตัวอย่างที่ดีที่สุดที่ฉันเคยเห็นใช้พื้นที่ส่วนท้ายเป็นระบบนำทางที่มีลิงก์แท็บปรากฏขึ้นเพื่อควบคุมการนำทางหน้า มีตัวเลือกมากมายที่คุณสามารถเลือกเอฟเฟ็กต์เต็มหน้าจอเพิ่มไอคอนปรับตำแหน่งและคุณสมบัติอื่น ๆ ได้เช่นกัน แต่ลองสร้างส่วนท้ายของวิที่เรียบง่ายด้วยปุ่ม 3 ปุ่มเพื่อรับทราบวิธีการทำงานของมัน.

• ดูตัวอย่างการสาธิตสด

ดังนั้นนี่คือรหัสท้ายกระดาษสำหรับส่วนเกี่ยวกับหน้า. ข้อมูลบทบาท = "navbar" ควรเพิ่มลงในองค์ประกอบคอนเทนเนอร์ซึ่งเป็นรายการที่ไม่มีการเรียงลำดับและไม่ใช่องค์ประกอบ UL เอง แต่ละลิงก์ภายในรายการถือว่าเป็นแถบแท็บซึ่งจะถูกแบ่งเท่า ๆ กันตามจำนวนลิงก์ทั้งหมด คลาสเพิ่มเติมของ UI ร่างกาย-B เพียงแค่เพิ่มเอฟเฟ็กต์ความงามในขณะที่เราสลับระหว่างสไตล์ที่มีอยู่ไม่กี่แบบ.

หากคุณสังเกตเห็นปุ่มแรกฉันมีคุณลักษณะ ข้อมูลทิศทาง = "ย้อนกลับ". แม้ว่าฉันจะสามารถใช้การตั้งค่าปุ่มย้อนกลับเหมือนก่อนหน้านี้เพื่อกลับสู่หน้าแรกฉันได้ใช้ ID หน้าของ #ดัชนี. โดยค่าเริ่มต้นหน้าต่างแอปจะเปลี่ยนไปทางขวาซึ่งดูไม่มีรสนิยมที่ดีเนื่องจากคุณคาดว่าภาพเคลื่อนไหวจะเลื่อนไปข้างหลัง คุณสามารถเล่นเอฟเฟกต์ภาพเคลื่อนไหวเหล่านี้ได้มากขึ้นหากคุณมีเวลา ตรวจสอบหน้าข้อมูลการเปลี่ยนภาพในเอกสาร jQuery.

หน้า Ajax และไดนามิก

ส่วนแรกได้เปิดประเด็นสำคัญในการสร้างแอพมือถือด้วย jQuery แต่ฉันต้องการเริ่มแอพใหม่ที่โหลดข้อมูลจากหน้าภายนอก ฉันจะใช้สคริปต์ PHP ที่ง่ายมากในการบรรลุ $ _REQUEST [] ตัวแปรและแสดงภาพ Dribbble ขนาดเล็กตามลำดับ หน้าจอด้านล่างควรให้แนวคิดแก่คุณเกี่ยวกับสิ่งที่เรากำลังจะสร้าง.

ก่อนอื่นฉันจะสร้างหน้า index.html บนเทมเพลตเริ่มต้น สำหรับหน้าจอหลักนี้ฉันใช้การตั้งค่ามุมมองรายการเพื่อแสดงแต่ละลิงก์ตามลำดับ สิ่งนี้ทำในพื้นที่เนื้อหาด้วย ข้อมูลบทบาท = "ListView" คุณลักษณะบนภาชนะรายการ การตัดสิ่งที่ส่วนหัวเหมือนกันก่อนหน้านี้ฉันเพิ่มรหัสทั้งหมดจากหน้าดัชนีใหม่ด้านล่างนี้.

 
 
 
ภาพตุลาคม 2011
 
 
 
 
ภาพแรก
 
ภาพที่สอง
 
ภาพที่สาม
 
ภาพที่สี่
 
 
  
   

แต่ละจุดยึดลิงก์ในมุมมองรายการของฉันชี้ไปที่ไฟล์เดียวกัน - index.php แต่เรากำลังผ่านพารามิเตอร์ imgid เป็นตัวแปรขอ ในไฟล์ image.php เราใช้ ID และทดสอบกับค่าที่ตั้งไว้ 4 ค่า หากการจับคู่ใด ๆ ที่เราใช้ URL ภาพและชื่อที่ตรงกันมิฉะนั้นเราก็จะแสดง Dribbble shot เริ่มต้น.

สคริปต์ตัวโหลดรูปภาพ

สคริปต์ image.php ยังคงมีเทมเพลต jQuery มือถือเริ่มต้นไว้ในรหัส จริงๆแล้วมันจะแบ่งปันส่วนหัวและส่วนท้ายที่คล้ายกันมากยกเว้นการเพิ่มแอตทริบิวต์ลิงก์กลับของเรา ข้อมูลเพิ่มหลัง btn = "true". โปรดสังเกตว่าปุ่มนี้จะปรากฏต่อเมื่อเรามาจาก index.html ก่อน! ลองโหลด image.php โดยตรงและจะไม่มีอะไรปรากฏขึ้นเนื่องจากไม่มี “กลับ” เพื่อย้ายไป.

ฉันคิดว่าเราสามารถเข้าใจโค้ดได้มากขึ้นโดยการตรวจสอบตรรกะ PHP ของฉันก่อน เราใช้ สวิตซ์ / กรณี วิธีการตรวจสอบกับ 4 ID ที่แตกต่างกันและให้ชื่อส่วนหัว, URL ภาพและลิงค์ต้นฉบับของศิลปิน.

ดูเหมือนจะตรงไปตรงมามาก - แม้แต่ผู้พัฒนา PHP มือใหม่ก็สามารถติดตามได้! และถ้าคุณไม่เข้าใจรหัส jQuery ก็ไม่สำคัญดังนั้นอย่ากังวล เราควรเปลี่ยนตอนนี้และดูเทมเพลตที่ฉันสร้างขึ้นภายในหน้าใหม่นี้ รหัส HTML ทั้งหมดจะถูกเพิ่มหลังจากบล็อก PHP ทั้งหมดข้างต้น ฉันใช้รหัสของ “ภาพ” สำหรับคอนเทนเนอร์และแม้แต่การตั้งค่าส่วนหัวให้เปลี่ยนแปลงด้วยภาพใหม่แต่ละภาพ.

 
 
 
 
 
 ดูต้นฉบับ
 
 
  
 

คุณอาจเห็นว่าการสาธิตนี้ง่ายเพียงใด แต่จุดประสงค์ทั้งหมดก็เพื่อแสดงให้เห็นถึงความยืดหยุ่นของ jQuery mobile สามารถเพิ่ม PHP เข้ากับมิกซ์ได้อย่างง่ายดายและคุณสามารถปพลิเคชันที่เนี้ยบจริงๆออกมาได้ด้วยการพัฒนาเพียงไม่กี่ชั่วโมง.

การออกแบบแฟนซีที่มีรูปขนาดย่อของรายการ

เอฟเฟ็กต์ที่เพิ่มเข้ามาครั้งสุดท้ายที่เราสามารถนำไปใช้ได้คือการใช้รูปขนาดย่อเพื่อทำให้หน้ารายชื่อมีชีวิตชีวาขึ้น ฉันจะแยกข้อความออกเป็นส่วนหัวและกล่องคำอธิบายเพื่อแสดงทั้งชื่องานศิลป์และชื่อศิลปิน.

ในการเริ่มเปิด Photoshop และสร้างเอกสาร 80 × 80 พิกเซล ฉันจะปรับขนาดภาพแต่ละภาพใหม่อย่างรวดเร็วและบันทึกภาพขนาดย่อเพื่อให้ตรงกับภาพแต่ละภาพ จากนั้นอัปเดตรายการมุมมองรายการเราควรรวมองค์ประกอบอีกสองสามรายการ.

ลองดูโค้ดด้านล่างและตัวอย่างของฉันเพื่อดูว่าฉันหมายถึงอะไร.

[ตัวอย่างการสาธิตสด]

 
 
  
งาน Wunderkit
 
โดย Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
โดย Scott Hill
 
  
แอพฟอรัมสำหรับ Facebook
 
โดย Ionut Zamfir
 
  
พูดเบาและรวดเร็ว
 
โดย Sam Jones
 
 
 

ชั้นเรียนสำหรับ UI-li หัวข้อ และ UI-li-รายละเอียด จะถูกเพิ่มเป็นค่าเริ่มต้นในสไตล์ชีต jQuery Mobile สิ่งนี้คล้ายกับคลาสรูปภาพ UI-li-นิ้วหัวแม่มือ ซึ่งปรับขนาดแต่ละแถบมุมมองรายการโดยอัตโนมัติตามความสูงของรูปภาพ ตอนนี้จากที่นี่คุณสามารถสร้างเพิ่มเติมในส่วนหน้าด้วยภาพเคลื่อนไหวเอฟเฟ็กต์หน้าสไตล์ชีต ฯลฯ.

หรือคุณอาจเริ่มสร้างระบบแบ็กเอนด์เพื่ออัพโหลดภาพใหม่และตัดแต่งภาพขนาดย่อเพื่อรวมไว้ในรายการโดยอัตโนมัติ มีความยืดหยุ่นมากกับ jQuery Mobile คุณแทบจะไม่สามารถติดป้ายกำกับว่าเป็นไลบรารี JavaScript เพียงอย่างเดียว เป็นมากกว่ากรอบ HTML5 / CSS / jQuery ทั้งหมดสำหรับการสร้างแอพมือถือที่รวดเร็วและปรับขนาดได้.

ข้อสรุป

ในการเขียนบทความนี้ทีมงาน jQuery Mobile ได้นำ RC1.0 ของไลบรารี่โค้ดออกมาอย่างเป็นทางการแล้ว ซึ่งหมายความว่าส่วนใหญ่หากไม่ใช่การแก้ไขข้อบกพร่องหลักทั้งหมดได้ถูกบีบและตอนนี้ผู้ทดสอบกำลังเตรียมพร้อมสำหรับการเปิดตัวเต็มรูปแบบ ด้วยเหตุนี้คุณจะไม่พบข้อมูลจำนวนมากบนเว็บ.

แต่เมื่อเดือนที่ผ่านมานักพัฒนาเว็บไซต์ต่างก็มั่นใจว่าจะมีแนวโน้มที่ดีขึ้น แอปพลิเคชั่นมือถือและแม้กระทั่งเลย์เอาต์เว็บมือถือกำลังได้รับความนิยมเพิ่มขึ้นอย่างมากในสมาร์ทโฟน นักพัฒนาเว็บไม่มีเวลาเรียนรู้ภาษาการเขียนโปรแกรมเต็มรูปแบบสำหรับการสร้างแอพ Android / iOS ดังนั้น jQuery Mobile เป็นทางเลือกที่เพรียวบางซึ่งรวมถึงการสนับสนุนซอฟต์แวร์ส่วนใหญ่ของอุตสาหกรรมโทรศัพท์มือถือและเติบโตอย่างต่อเนื่องในแต่ละวันด้วยชุมชนนักพัฒนาที่ใช้งานอยู่.