jQuery Mobile - คำถามสัมภาษณ์

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

• สร้างเว็บแอปพลิเคชันในลักษณะที่จะทำงานในลักษณะเดียวกันบนอุปกรณ์มือถือแท็บเล็ตและเดสก์ท็อป

• เข้ากันได้กับกรอบงานอื่น ๆ เช่น PhoneGap, Whitelight เป็นต้น

• มีชุดอินพุตแบบสัมผัสที่เป็นมิตรและวิดเจ็ต UI

• นำเสนอฟังก์ชันการทำงานสำหรับแพลตฟอร์มมือถือแท็บเล็ตและเดสก์ท็อปทั้งหมดและเพิ่มการโหลดหน้าเว็บที่มีประสิทธิภาพและการรองรับอุปกรณ์ที่กว้างขึ้น

• สร้างขึ้นบน jQuery Core และ "เขียนน้อยลงทำมากขึ้น" เฟรมเวิร์ก UI

• เป็นโอเพ่นซอร์สข้ามแพลตฟอร์มและข้ามเบราว์เซอร์ที่เข้ากันได้

• มันเขียนด้วย JavaScript และใช้คุณสมบัติของทั้ง jQuery และ jQueryUI สำหรับการสร้างไซต์แบบอิสระบนมือถือ

• รวม HTML5, CCS3, jQuery และ jQueryUI ไว้ในเฟรมเวิร์กเดียวสำหรับการสร้างเพจที่มีสคริปต์น้อยที่สุด

• รวมถึงระบบนำทาง Ajax ที่ใช้การเปลี่ยนหน้าแบบเคลื่อนไหว

• ง่ายต่อการเรียนรู้และพัฒนาแอปพลิเคชันหากคุณมีความรู้เกี่ยวกับคุณลักษณะ HTML5, CSS3

• มันเข้ากันได้กับข้ามแพลตฟอร์มและข้ามเบราว์เซอร์ดังนั้นคุณไม่ต้องกังวลกับการเขียนโค้ดที่แตกต่างกันสำหรับความละเอียดของอุปกรณ์แต่ละเครื่อง

• ใช้ HTML5 ร่วมกับ JavaScript เพื่อให้พัฒนาเว็บแอปพลิเคชันได้ง่าย

• สร้างขึ้นในลักษณะที่อนุญาตให้รหัสเดียวกันปรับขนาดจากหน้าจอมือถือไปยังหน้าจอเดสก์ท็อปโดยอัตโนมัติ

• มีตัวเลือกที่ จำกัด สำหรับธีม CSS เพื่อให้ไซต์ดูคล้ายกันซึ่งสร้างโดยธีมเหล่านี้

• แอปพลิเคชั่นที่พัฒนาโดยใช้ jQuery Mobile ทำงานช้ากว่าบนมือถือ

• จะใช้เวลานานมากขึ้นเมื่อคุณรวม jQuery mobile กับ mobile framework อื่น ๆ

• ยากที่จะออกแบบภาพที่กำหนดเองได้อย่างสมบูรณ์

• Custom Download : เพื่อดาวน์โหลดไลบรารีเวอร์ชันที่กำหนดเอง

• Latest Stable: เพื่อรับไลบรารี jQuery Mobile เวอร์ชันเสถียรและล่าสุด

คุณสามารถใช้ไฟล์ CDN ต่อไปนี้ -

• <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

• <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </script>

• <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script>

<div data-role = "page" id = "pageone">
    <div data-role = "header">
      <h1>Header</h1>
    </div>

    <div data-role = "main" class = "ui-content">
      //content goes here
    </div>

    <div data-role = "footer">
      <h1>Footer</h1>
    </div>
</div>

จะสร้างส่วนหัวที่ด้านบนของหน้า

ใช้เพื่อกำหนดเนื้อหาของเพจ

จะสร้างส่วนท้ายที่ด้านล่างของหน้า

ซึ่งรวมถึงช่องว่างภายในและระยะขอบภายในเนื้อหาของหน้า

สามารถรวมหลายเพจไว้ในเอกสาร jQuery mobile เดียวซึ่งโหลดพร้อมกันโดยการเพิ่ม div หลาย ๆ อันด้วย data-role = "page" attribute

ใช้แอตทริบิวต์ data-dialog = "true" กับเพจใดก็ได้เพื่อแสดงไดอะล็อก

แอตทริบิวต์การเปลี่ยนข้อมูลใช้เพื่อใช้การเปลี่ยนแปลงต่างๆในกล่องโต้ตอบเช่นเลื่อนลงพลิกเป็นต้น

ปุ่มนี้สามารถปิดได้โดยใช้แอตทริบิวต์ data-close-btn

แอตทริบิวต์ data-rel = "back" ใช้เพื่อนำทางเพื่อย้อนกลับไปยังกล่องโต้ตอบก่อนหน้า

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

ui- มุมทั้งหมด

คุณสามารถตั้งค่าไอคอนในปุ่มโดยใช้คลาส ui-icon และคลาส ui-btn-icon-pos_name เพื่อระบุตำแหน่งสำหรับไอคอน

คุณสามารถเพิ่มเงาไอคอนในปุ่มของคุณได้โดยใช้คลาส ui-shadow-icon

คุณสามารถลบวงกลมสีเทารอบ ๆ ไอคอนได้โดยใช้คลาส ui-nodisc-icon

ใช้คลาส ui-grid-solo ในแท็ก div เพื่อสร้างกริดคอลัมน์เดียว

เพิ่มคลาส ui-grid-a ลงในแท็ก div และรวมคอนเทนเนอร์ลูกสองอันที่มีคลาส ui-block-a และ ui-block-b เพื่อสร้างเค้าโครงสองคอลัมน์

ใช้คลาส ui-grid-b ในแท็ก div เพื่อสร้างตารางสามคอลัมน์

ใช้คลาส ui-grid-c ในแท็ก div เพื่อสร้างตารางสี่คอลัมน์

ใช้คลาส ui-grid-d ในแท็ก div เพื่อสร้างตารางห้าคอลัมน์

สร้างปุ่มพื้นฐานง่ายๆในเพจโดยใช้คลาส ui-btn

สร้างกลุ่มปุ่มในแนวตั้งและแนวนอนในเพจโดยใช้แอตทริบิวต์ data-role = "controlgroup"

คุณสามารถสร้างปุ่มขนาดเล็กในหน้าได้โดยใช้คลาส ui-mini และแสดงตำแหน่งของไอคอนในปุ่มโดยใช้คลาส ui-btn-icon-ico_pos

ใช้แอตทริบิวต์ data-role = "date" ในช่องป้อนข้อมูลเพื่อแสดงในรูปแบบ dd / mm / yy

สามารถสร้างแบบพับได้โดยใช้แอตทริบิวต์ data-role = "foldsible" กับคอนเทนเนอร์

คุณสามารถแสดงกลุ่มควบคุมโดยใช้แอตทริบิวต์ data-role = "controlgroup"

ด้วยการใช้แอตทริบิวต์ data-filter = "true" คุณสามารถกรองลูกขององค์ประกอบใดก็ได้

Flip Switch ช่วยให้คุณสามารถปิด / เปิดหรือจริง / เท็จสวิตช์โดยคลิกที่สวิตช์เพื่อป้อนสไตล์บูลีน

Listview ใช้เพื่อแสดงรายการของรายการ data-role = "listview" แอตทริบิวต์รวมอยู่ในคอนเทนเนอร์เพื่อแสดงรายการในรายการแนวตั้งที่เลื่อนได้

วิดเจ็ต Rangeslider มีด้ามจับคู่หนึ่งให้คุณเลือกช่วงค่าตัวเลข

เหตุการณ์จะตอบสนองต่อการโต้ตอบของผู้ใช้เมื่อผู้ใช้คลิกบนหน้าใดหน้าหนึ่งหรือวางเมาส์เหนือองค์ประกอบเป็นต้น

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

จะเริ่มทำงานเมื่อผู้ใช้ลากในแนวนอนมากกว่า 30px เหนือองค์ประกอบโดยใช้ id ของเพจเพื่อระบุเหตุการณ์และวิธีการ on () แนบตัวจัดการเหตุการณ์

เหตุการณ์เริ่มต้นการเลื่อนจะเริ่มทำงานเมื่อผู้ใช้เริ่มเลื่อนหน้าและเหตุการณ์หยุดการเลื่อนจะเริ่มทำงานเมื่อผู้ใช้หยุดเลื่อนหน้าโดยใช้ id ของเพจเพื่อระบุเหตุการณ์และวิธีการ () แนบตัวจัดการเหตุการณ์

คุณสามารถทริกเกอร์เหตุการณ์การวางแนวเมื่อผู้ใช้หมุนอุปกรณ์ในแนวตั้งหรือแนวนอนโดยใช้เหตุการณ์การเปลี่ยนทิศทาง ใช้คุณสมบัติ window.orientation เพื่อระบุว่าหน้าต่างหรืออุปกรณ์ตั้งค่าแนวตั้งหรือแนวนอน

คุณสามารถแสดงค่าของแถบเลื่อนเป็นคำแนะนำเครื่องมือโดยใช้แอตทริบิวต์ data-popup-enable = "true"

การสลับคอลัมน์ทำให้คอลัมน์อยู่ในที่ซ่อนและอนุญาตให้ผู้ใช้เลือกคอลัมน์ตามที่ต้องการโดยใช้แอตทริบิวต์ data-mode = "columntoggle"

แสดงข้อมูลในรูปแบบแนวนอนโดยการยุบตารางเป็นการแสดงแบบเรียงซ้อนโดยใช้แอตทริบิวต์ data-mode = "reflow"

คุณสามารถแสดงชุดข้อมูลในรูปแบบลายเส้นและลายเส้นโดยใช้คลาสแถบตารางและเส้นตาราง

คุณสามารถเพิ่มคุณภาพและฟังก์ชันการทำงานของอินพุตข้อความได้โดยตั้งค่าแอตทริบิวต์ data-added = "true" ในช่องป้อนข้อมูล

คุณสามารถเปลี่ยนสีของไอคอนเป็นสีดำได้โดยใช้คลาส ui-alt-icon ตามค่าเริ่มต้นไอคอนทั้งหมดจะเป็นสีขาว

ได้รับการพัฒนาโดยทีมโครงการ jQuery ในปี 2010 และเขียนด้วย JavaScript

ระบุว่าต้องโหลดเพจผ่าน ajax หรือไม่