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 โดยตัวเลือกเพื่อให้โครงร่างปรับขนาดเป็นจำนวนที่ จำกัด.

 
  
HK มือถือ
 
 
 
ยินดีต้อนรับสู่เว็บไซต์มือถือ!
 
 
 
 
 
ลิงค์เมนู
 
 
 
บ้าน
 
เกี่ยวกับเรา
 
โฆษณา
 
เขียนเพื่อเรา
 
รายชื่อผู้ติดต่อ
 
นโยบายความเป็นส่วนตัว
 
 
 

เมนูการนำทางจะได้รับค่าดัชนี 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. อย่าลังเลที่จะเขียนสิ่งเหล่านี้โดยตรง > แท็กหรือดาวน์โหลดตัวอย่างของฉันจากซอร์สโค้ดสาธิต.

$ (เอกสาร). ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // เรียกใช้ตัวแปรเป็น // viewport.width / viewport.height 

function openme () $ (function () topbar.animate (ซ้าย: "290px", ระยะเวลา: 300, คิว: false); pagebody.animate (ซ้าย: "290px", ระยะเวลา: 300 , คิว: false););  function closeme () var closeme = $ (function () topbar.animate (left: "0px", ระยะเวลา: 180, คิว: false); pagebody.animate (ซ้าย: "0px", ระยะเวลา: 180, คิว: false);); 

// การโหลดเนื้อหาของหน้าสำหรับการนำทาง $ ("a.navlink"). live ("คลิก", ​​ฟังก์ชั่น (e) e.preventDefault (); var linkurl = $ (นี่) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 

closeme (); $ (ฟังก์ชั่น () topbar.css ("top", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * ไม่มีการติดต่อกลับ * /), 1200);