คำแนะนำง่ายๆเกี่ยวกับ jQuery Mobile Framework

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

แต่สิ่งที่ดีขึ้นเมื่อเปิดตัว jQuery เนื่องจากช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชัน JavaScript ที่น่าทึ่งซึ่งสามารถทำงานได้อย่างสะดวกสบายในที่ต่างๆ

หลังจากนั้นทีม jQuery ได้พัฒนาสิ่งต่างๆให้สูงขึ้นด้วยการพัฒนา jQuery UI ซึ่งทำให้นักพัฒนาสามารถสร้างเว็บแอปพลิเคชันที่ดูดีบนแกน jQuery ที่มีอยู่ได้

ยังดีกว่าในปี 2010 jQuery Mobile ได้รับการแนะนำซึ่งทำให้การพัฒนาดีขึ้นและมีประสิทธิภาพมากขึ้น

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

jQuery Mobile ใช้ประโยชน์จากฟังก์ชันของ HTML5, CSS3, jQuery และ jQuery UI ในเฟรมเวิร์กเดียวที่ช่วยให้นักพัฒนาสามารถบรรลุความสอดคล้องกันในแพลตฟอร์มและอุปกรณ์ต่างๆ

คุณสมบัติพื้นฐานของ jQuery Mobile

1. ความเรียบง่ายและการใช้งานที่ยอดเยี่ยม

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

งานที่ซับซ้อนซึ่งต้องใช้โค้ด JavaScript หลายบรรทัดเช่นการโทร Ajax และการจัดการ DOM สามารถรับรู้ได้อย่างง่ายดายด้วยโค้ดไม่กี่บรรทัดใน jQuery มือถือ

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

$(document).on("pagecreate","#mypagetest",function(){ $("span").on("click",function(){ $(this).hide(); }); });

ในโค้ดด้านบนพารามิเตอร์#mypagetestหมายถึง id ของเพจที่ระบุเหตุการณ์ของเพจ นอกจากนี้เมธอดon ()ยังใช้เพื่อแนบตัวจัดการเหตุการณ์

นอกจากนี้ความเรียบง่ายยังช่วยให้นักพัฒนาสามารถแบ่งแอปพลิเคชันออกเป็นหลายหน้า ด้วยกรอบการทำงานนักพัฒนาสามารถ "เขียนน้อยลงและทำได้มากขึ้น"

2. การเพิ่มประสิทธิภาพที่ก้าวหน้าและการย่อยสลายอย่างสง่างาม

การเพิ่มประสิทธิภาพแบบก้าวหน้าและการย่อยสลายอย่างงดงามเป็นคุณสมบัติหลักที่ขับเคลื่อนความคล่องตัวของ jQuery Mobile ช่วยให้สามารถรองรับทั้งอุปกรณ์ระดับไฮเอนด์และอุปกรณ์ที่มีความสามารถน้อย (เช่นอุปกรณ์ที่ขาดการสนับสนุน JavaScript)

เฟรมเวิร์กช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันที่สามารถเข้าถึงได้โดยเบราว์เซอร์และอุปกรณ์จำนวนมากที่สุดไม่ว่าจะเป็น Internet Explorer 6 หรือ Android หรือ iPhone รุ่นใหม่ล่าสุด

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

3. รองรับอินพุตที่ใช้งานง่าย

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

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

ตัวอย่างเช่นวิธีสร้างปุ่มช่องทำเครื่องหมายโดยใช้ jQuery Mobile โปรดสังเกตว่ามีการเพิ่มแอตทริบิวต์data-mini = "true"เพื่อสร้างปุ่มเวอร์ชันย่อ

  Click here to agree 

นอกเหนือจากทั้งหมดนี้เพื่อให้แน่ใจว่าประสบการณ์ของผู้ใช้จะได้รับการปรับให้เหมาะสมบนอุปกรณ์พกพาเฟรมเวิร์กนี้มีระบบการนำทางที่ขับเคลื่อนด้วย Ajax ซึ่งช่วยให้การเปลี่ยนหน้าแบบเคลื่อนไหวเกิดขึ้นได้อย่างราบรื่น

ด้วยเหตุการณ์การเปลี่ยนแปลงของ jQuery Mobile คุณสามารถทำให้การเปลี่ยนแปลงจากหน้าที่ใช้งานอยู่ปัจจุบันเป็นหน้าใหม่ได้

ตัวอย่างเช่นคุณสามารถใช้เหตุการณ์pagebeforeshow (ทริกเกอร์ในหน้า "ถึง") และเหตุการณ์pagebeforehide (เรียกในหน้า "จาก") เมื่อเปลี่ยนจากหน้าหนึ่งไปเป็นหน้าถัดไป เหตุการณ์ทั้งสองจะถูกทริกเกอร์ก่อนที่ภาพเคลื่อนไหวการเปลี่ยนแปลงจะเริ่มขึ้น

มาดูกันว่าสามารถนำไปใช้ได้อย่างไร:

$(document).on("pagebeforeshow","#myfirstpage",function(){ // When entering myfirstpage alert("myfirstpage is about to appear"); }); $(document).on("pagebeforehide","#myfirstpage",function(){ // When leaving myfirstpage alert("myfirstpage is about to disappear"); });

4. การเข้าถึง

นอกจากความสามารถข้ามแพลตฟอร์มแล้ว jQuery สำหรับมือถือถูกสร้างขึ้นโดยคำนึงถึงความสามารถในการเข้าถึงได้ง่าย

เฟรมเวิร์กนี้มาพร้อมกับการสนับสนุนสำหรับแอปพลิเคชั่นอินเทอร์เน็ตที่สมบูรณ์แบบ (WAI-ARIA) เพื่อช่วยเหลือผู้พิการโดยใช้โปรแกรมอ่านหน้าจอและเทคโนโลยีอำนวยความสะดวกอื่น ๆ เข้าถึงหน้าเว็บได้อย่างง่ายดาย

5. ขนาดน้ำหนักเบา

ขนาดน้ำหนักเบาของ Mobile jQuery (ประมาณ 40KB เมื่อย่อขนาด) เพิ่มความรวดเร็ว นอกจากนี้ความจริงที่ว่ามันใช้การอ้างอิงภาพน้อยที่สุดยังช่วยเร่งความสามารถของมันอย่างมาก

6. วิดเจ็ตธีมและ UI

jQuery Mobile มีระบบธีมในตัวที่ช่วยให้นักพัฒนาสามารถกำหนดรูปแบบแอปพลิเคชันของตนเองได้ ด้วย jQuery Mobile Themeroller นักพัฒนาสามารถปรับแต่งแอปพลิเคชันของตนได้อย่างมีประสิทธิภาพเพื่อให้เหมาะกับสีรสนิยมและความชอบ

เฟรมเวิร์กยังมาพร้อมกับวิดเจ็ตข้ามแพลตฟอร์มที่เป็นนวัตกรรมต่างๆที่ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันที่ปรับแต่งได้ดี

วิดเจ็ตที่มีอยู่บางส่วน ได้แก่ แถบเครื่องมือปุ่มกล่องโต้ตอบและวิดเจ็ตป๊อปอัปที่ใช้กันทั่วไป

7. การตอบสนอง

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

โครงสร้างหน้าพื้นฐานของ jQuery Mobile

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

คุณสามารถใช้ jQuery mobile เพื่อสร้างหน้าเว็บมุมมองรายการประเภทต่างๆแถบเครื่องมือองค์ประกอบและปุ่มแบบฟอร์มที่หลากหลายกล่องโต้ตอบรวมถึงฟังก์ชันอื่น ๆ

Importantly, since jQuery Mobile is created on top of jQuery core, it lets developers leverage jQuery UI code and access key facilities. These include robust animation and image effects for web pages, DOM manipulation, event handling, and Ajax for server communication.

Let's get a feel for how jQuery mobile development code looks.

For example, in this time of the COVID-19 pandemic when most people are working from home or from co-working spaces, let's create a simple web page that demonstrates some team management mistakes that people make.

Here is the code:

   jQuery Mobile Example 

fCC jQuery Mobile Sample

COVID-19 Work-From-Home Team Management Mistakes To Avoid

    • Using Unnecessary Tools
    • Foregoing Team Evaluations
    • Micromanaging
    • Hiring Too Quickly
    • Not Having Contingencies

    alfrickopidi.com, 2020 - Copyright

    Here is the output when the above mobile jQuery lines of code are opened on a browser:

    Notably, when the browser is decreased or increased, the size of the items in the list also adjusts appropriately. Therefore, the web page can be easily accessed in various devices with different screen resolutions without worrying about lack of consistency. The size of the items will change accordingly to suit the type of device.

    As you can see in the above code sample, the document is a simple HTML5 that includes the following three things:

    • Files from the jQuery Mobile CSS (jquery.mobile-1.4.5.min.css)
    • Files from the jQuery repository (jquery-1.11.1.min.js)
    • Files from the jQuery Mobile repository (jquery.mobile-1.4.5.min.js)

    These files are directly linked to the jQuery CDN. Another alternative is to head over to the download page to get these files and host them on a private server.

    Importantly, including the "viewport" metatag during jQuery mobile developmentinstructs devices that the page width and the device screen width are equivalent (width=device-width).

    The tag also instructs the browser to zoom in to 100 per cent (scale=1). If the scale is changed to 2, for instance, the browser will zoom the web page by 50 per cent.

    A closer examination of the code reveals some strange "data-"attributes scattered throughout it. This is an improved feature of HTML5 that enables developers to pass organized data across an application – for example, the data-role="header" attribute defines the head section of the web page.

    The above example just scratches the surface of the things developers can achieve using jQuery Mobile. The framework's documentation is easy to follow and describes its many features, including linking pages, incorporating animated page transitions, and designing buttons.

    Conclusion

    jQuery for mobile is a resource-rich framework built with jQuery, HTML5, and CSS capabilities to handle certain cross-platform, cross-device and cross-browser compatibility issues effectively.

    The framework offers great opportunities for creating mobile and web applications that are powerful, fully responsive, and future-ready.

    Will you give it a try?