Mobile App Design / Dev Building Navigation ด้วย jQuery
ตอนนี้สมาร์ทโฟนติดตั้งเว็บเบราว์เซอร์ที่มีประสิทธิภาพมาก JavaScript มีประสิทธิภาพมากกว่าที่เคยมีมาและสามารถขยายได้ด้วยความช่วยเหลือของไลบรารีโค้ดเช่น jQuery เมื่อคุณเพิ่มในข้อกำหนดล่าสุดของ HTML5 / CSS3 เป็นไปได้ที่จะสร้างแอปพลิเคชันเว็บมือถือที่เร็วมากด้วยรหัสส่วนหน้าพื้นฐานบางอย่าง.
ในบทช่วยสอนนี้ฉันจะแสดงวิธีการสร้างเว็บไซต์ / webapp บนมือถือ เราจะใช้การสืบค้นสื่อ CSS3 สำหรับการกำหนดเป้าหมายอุปกรณ์เฉพาะและความละเอียดหน้าจอ บวกกับ jQuery นิดหน่อยช่วยทำให้เมนูเคลื่อนไหวและโหลดเนื้อหาหน้าภายนอกโดยใช้การโทร Ajax ยิ่งไปกว่านั้นโครงร่างสามารถขยายเพื่อแสดงอย่างถูกต้องในเบราว์เซอร์เดสก์ท็อปปกติเช่น Chrome หรือ Firefox.
- การสาธิตสด
- รหัสแหล่งที่มา
การกำหนดโครงสร้างหน้า
มาเริ่มกันที่หน้า HTML ก่อนแล้วใช้สไตล์ CSS โดยใช้กฏ ฉันจะข้ามเมตาแท็กที่ผิดปกติส่วนใหญ่ในส่วนหัวเนื่องจากไม่มีผลกระทบต่อแอปเว็บโดยตรง อย่างไรก็ตามมีบางอย่างที่ฉันควรพูดถึงคือจากตัวอย่างด้านล่าง:
X-UA-เข้ากันได้ ใช้เพื่ออธิบายว่าเอกสารของคุณควรแสดงผลอย่างไรในเบราว์เซอร์บางประเภท มันเป็นสถานการณ์ที่น่าสนใจเมื่อเขียนโค้ดใน HTML5 ดังนั้นฉันจึงไม่ต้องกังวลเกี่ยวกับเรื่องนี้มากเกินไป อย่างไรก็ตามเมตาดาต้า วิวพอร์ต แท็กสำคัญมาก ตั้งค่าหน้าต่างเบราว์เซอร์มือถือเป็น 100% แทนเอฟเฟกต์มาตรฐานแบบซูม.
นอกจากนี้ยังเป็นไปได้ที่จะปิดใช้งานการซูมผู้ใช้ด้วยค่าเนื้อหา ผู้ใช้สามารถปรับขนาด = ไม่มี
. แต่ในกรณีนี้เราแค่ต้องการตั้งค่าความกว้างเต็มหน้าจอให้เท่ากับความกว้างของอุปกรณ์ของเรา แท็กเว็บแอปของ Apple จะอนุญาตให้บันทึกเว็บไซต์เป็นไอคอนหน้าจอหลักไปยัง iPhone หรือ iPod Touch ของคุณ ไม่จำเป็นอย่างสิ้นเชิง แต่ก็คุ้มค่าที่จะมี.
เนื้อหาภายในร่างกาย
ข้างในแท็ก body ฉันได้เซ็ต div wrapper ด้วย ID #W
. ข้างในฉันแบ่งเลย์เอาต์ออกเป็นสอง divs เพิ่มเติมโดยใช้ ID #pagebody
และ #navmenu
. ความกว้างของหน้าทั้งหมดถูก จำกัด ที่ 640px โดยตัวเลือกเพื่อให้โครงร่างปรับขนาดเป็นจำนวนที่ จำกัด.
เมนูการนำทางจะได้รับค่าดัชนี z ต่ำกว่าดังนั้น #pagebody
อยู่ด้านบนเสมอ สิ่งนี้มีความสำคัญเนื่องจากรหัส JavaScript จะเลื่อนไปตามส่วนของหน้าจำนวนพิกเซลเพื่อเปิดเผยการนำทางที่อยู่ด้านล่าง.
ฉันใช้สัญลักษณ์แฮช (#) หน้าหน้า. html แต่ละหน้าเพื่อหยุดพฤติกรรมที่ไม่ดีใน Mobile Safari เมื่อใดก็ตามที่คุณจะคลิกลิงก์แถบ URL จะปรากฏขึ้นและกดลงเนื้อหา แต่เมื่ออ้างอิง ID ไม่มีการโหลดซ้ำยกเว้นผ่านการเรียกใช้ JavaScript.
การวางตำแหน่ง CSS
มีเนื้อหาที่สับสนไม่มากในโค้ด CSS ของเรา การวางตำแหน่งส่วนใหญ่ทำด้วยตนเองแล้วจัดการผ่าน jQuery แต่มีบางส่วนที่น่าสนใจในเอกสารของเรา.
/ ** @group core ** / #w # pagebody ตำแหน่ง: ญาติ; ซ้าย: 0; ความกว้างสูงสุด: 640px; ความกว้างขั้นต่ำ: 320px; ดัชนี z: 99999; #w #navmenu พื้นหลัง: # 475566; ความสูง: 100%; จอแสดงผล: บล็อก; ตำแหน่ง: คงที่; ความกว้าง: 300px; ซ้าย: 0px; ด้านบน: 0px; ดัชนี z: 0;
ส่วนบนสุดนี้กำหนดสไตล์สำหรับทั้งสองส่วนของหน้า เมนูการนำทางของเรามีความกว้างเพียง 300px ดังนั้นจึงมีพื้นที่เหลือพอสำหรับการดูเนื้อหาของหน้า ปุ่มเมนูเปิด / ปิดยังตั้งอยู่ทางด้านซ้ายและสามารถเข้าถึงได้เสมอ ส่วนสำคัญที่นี่คือค่าคุณสมบัติ z-index และการใช้งาน ตำแหน่ง: คงที่;
บน navmenu ของเรา.
ส่วนหัวของแถบเครื่องมือด้านบนก็เป็นส่วนที่น่าสนใจเช่นกัน นี่ถูกตั้งค่าไว้ที่ตำแหน่งคงที่ดังนั้นมันจะเลื่อนไปพร้อมกับเนื้อหาของหน้า สิ่งนี้จะจำลองเอฟเฟกต์ที่คล้ายกันตามที่คุณพบในแถบชื่อแอพ iOS.
/ ** @group header ** / #w #pagebody ส่วนหัว # toolbarnav display: block; ตำแหน่ง: คงที่; ซ้าย: 0px; ด้านบน: 0px; ดัชนี z: 9999; พื้นหลัง: # 0b1851 url ('img / tabbar-solid-bg.png') บนซ้ายไม่ทำซ้ำ รัศมีเส้นขอบ: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; เส้นขอบล่างล่างขวารัศมี: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; ขอบล่างซ้ายรัศมี: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-radius-รัศมี: 0; ความสูง: 44px; ความกว้าง: 100%; ความกว้างสูงสุด: 640px; #w #pagebody ส่วนหัว # toolbarnav h1 จัดข้อความ: กลาง; padding-top: 10px; แพ็ดดิงขวา: 40px; สี: # e6e8f2; น้ำหนักตัวอักษร: ตัวหนา; ขนาดตัวอักษร: 2.1em; ข้อความเงา: 1px 1px 0px # 313131;
กฎมือถือ
สังเกตได้ง่ายฉันยังใช้รูปพื้นหลังสำหรับพื้นผิวแถบส่วนหัวสีน้ำเงิน นี่คือขนาดที่ 640 × 44 พิกเซลเพื่อให้สอดคล้องกับโครงสร้างเค้าโครงที่สอดคล้องกัน แต่ฉันได้พัฒนารูปภาพ @ 2x สำหรับหน้าจอเรตินาของ iPhone / iPad คุณสามารถดูทั้งสองภาพด้านล่างหรือคว้าพวกเขาจากซอร์สโค้ดสาธิตของฉัน.
- System/demo/img/[email protected]
- System/demo/img/[email protected]
ฉันตั้งค่า CSS มือถือสำหรับฟังก์ชั่นนี้ในไฟล์อื่นที่ชื่อว่า responsive.css. มันมีแบบสอบถามสื่อสองที่แทนที่แถบชื่อ bg และไอคอนปุ่มเมนูสำหรับอุปกรณ์เรตินา.
/ ** จอแสดงผลเรตินา ** / @media เฉพาะหน้าจอและ (-webkit-min-device-ratio-pixel: อัตราส่วน 2) หน้าจอเท่านั้นและ (min - moz-device-pixel-ratio: 1.5), หน้าจอเท่านั้นและ ( อัตราส่วนอุปกรณ์ต่ำสุดพิกเซล: 1.5) #w #pagebody ส่วนหัว พื้นหลัง: # 0b1851 url ('img/[email protected] ') บนซ้ายไม่ทำซ้ำ ขนาดพื้นหลัง: 640px 44px; #w #pagebody header # menu-btn background: url ('img/[email protected] ') ไม่ทำซ้ำ ขนาดพื้นหลัง: 53px 30px;
การออกแบบลูกศรเมนู
ในพื้นที่การนำทางฉันได้รวมไอคอนลูกศรเล็ก ๆ ไว้ทางด้านขวาของลิงก์เมนูแต่ละรายการด้วย สิ่งนี้สามารถแทนที่ด้วยรูปภาพจากครีเอทีฟคอมมอนส์ใด ๆ ก็ได้ แต่ผู้ที่หลงใหลใน CSS3 ส่วนใหญ่จะรักการทดสอบวิธีนี้.
#w #navmenu เป็น a :: after content: "; display: block; width: 6px; height: 6px; border-right: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; ตำแหน่ง: สัมบูรณ์; ขวา : 30px; top: 45%; -webkit-transform: หมุน (45deg); -moz-transform: หมุน (45deg); -o-transform: หมุน (45deg); transform: หมุน (45deg); #w #navmenu ul li a: hover :: after เส้นขอบสี: # cad0e6;
เรากำลังใช้ แปลง
เพื่อสร้างเส้นขอบเล็ก ๆ หลังเนื้อหา ฉันยังติดตั้ง ตำแหน่ง: สัมบูรณ์;
เพื่อให้เราสามารถย้ายเส้นขอบเหล่านี้ได้อย่างอิสระรอบ ๆ รายการลิงค์ด้านใน มันง่ายมากที่จะเปลี่ยนสีเส้นขอบในสถานะโฮเวอร์ซึ่งให้ความรู้สึกแบบไดนามิกมากขึ้น มันยอดเยี่ยมมากที่คุณสามารถทำได้โดยใช้กฎพื้นฐาน HTML5 และ CSS3.
แต่ตอนนี้ขอย้ายเข้าไปอยู่ในบิตและชิ้นส่วนของรหัส JavaScript จำไว้ว่าต้องมีการรวมไว้ในไลบรารี jQuery เพื่อให้โค้ดของฉันทำงานได้อย่างถูกต้อง.
jQuery Animated
ในการเขียนรหัสที่กำหนดเองเหล่านี้ฉันได้สร้างเอกสารใหม่ที่ชื่อว่า script.js. อย่าลังเลที่จะเขียนสิ่งเหล่านี้โดยตรง >