โฮมเพจ » การเข้ารหัส » Mobile App Design / Dev Building Navigation ด้วย jQuery

    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 คุณสามารถดูทั้งสองภาพด้านล่างหรือคว้าพวกเขาจากซอร์สโค้ดสาธิตของฉัน.

    ฉันตั้งค่า 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);); 

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

    องค์ประกอบสองอย่างที่เรากำหนดเป้าหมายนั้นมีชื่อว่า topbar และ pagebody. พื้นที่เนื้อหาภายในที่มีพื้นหลังสีขาวเป็นหน้าเต็มรูปแบบ อย่างไรก็ตามเรามีตำแหน่งของแถบหัวเรื่องไว้ที่ด้านบนของหน้า ซึ่งหมายความว่าจะไม่ทำให้เคลื่อนไหวโดยธรรมชาติกับหน้าเว็บและเราจำเป็นต้องใช้การโทรแยกต่างหาก การเปิดถูกตั้งค่าให้กดไปทางซ้าย 290px (เกือบเต็มความกว้าง nav 300px) และฟังก์ชั่นปิดจะดึงกลับ.

    โหลดเนื้อหาแบบไดนามิก

    โค้ดด้านบนนั้นง่ายพอที่จะดูแลอนิเมชั่น และตามหลักเหตุผลแล้วนั่นคือทั้งหมดที่คุณต้องการสำหรับเว็บไซต์มือถือง่ายๆ - แต่ฉันต้องการเพิ่มอีกนิด.

    ทุกครั้งที่ผู้ใช้คลิกที่ลิงค์เมนูเราต้องการปิดการนำทางปัจจุบันและแสดง gif ที่โหลดขณะที่เราค้นหาเนื้อหาของหน้า จากนั้นเมื่อเสร็จแล้วเราจะลบภาพ gif และโหลดทั้งหมดข้างใน สิ่งนี้ยอดเยี่ยมเพราะเราสามารถใช้หน้า. html คงที่สำหรับเนื้อหาได้ ไม่มี PHP หรือ Ruby หรือ Perl หรือภาษาแบ็กเอนด์ที่จะทำให้สิ่งต่าง ๆ ยุ่งเหยิง.

    จัดการการคลิก

    ก่อนอื่นเราต้องการทดสอบเมื่อผู้ใช้คลิกที่ปุ่มนำทาง สิ่งนี้จะหยุดค่า href ปกติจากการโหลดและเราสามารถใช้ฟังก์ชั่นของเราเองเพื่อแสดงเนื้อหาภายนอก.

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

    ตอนนี้เรากำลังเปิดตัวเลือกสมอเรือใด ๆ กับคลาส navlink. เมื่อใดก็ตามที่ผู้ใช้คลิกที่ลิงค์ใดลิงค์หนึ่งเราจะหยุดไม่ให้โหลดและตั้งค่าตัวแปรสำหรับ URL แบบเต็ม ฉันยังได้ตั้งค่าตัวแปรสำหรับเนื้อหา HTML เพื่อรวมตัวโหลดอิมเมจมาตรฐาน หากคุณต้องการปรับแต่งของคุณเองฉันขอแนะนำ Ajaxload.

    Ajax .load ()

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

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

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

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

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

    ข้อสรุป

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

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