BÀI 4 NÂNG CAO KHẢ NĂNG THIẾT KẾ WEB MOBILE VỚI THÀNH PHẦN JQUERY MOBILE NHẮC LẠI BÀI TRƯỚC Nhận diện thiết bị và tính tương thích với các thiết bị di động Nâng cao khả năng tương tác của web di động với Javascript và AJAX Thiết kế trang web cho di động với Dreamweaver CS5: Khởi tạo và tùy biến nội dung Chèn thêm trang web với Jquery mobile Định dạng trang web với CSS Nhận diện thiết bị và tính tương thích với các thiết bị di động Nâng cao khả năng tương tác của web di động với Javascript và AJAX Thiết kế trang web cho di động với Dreamweaver CS5: Khởi tạo và tùy biến nội dung Chèn thêm trang web với Jquery mobile Định dạng trang web với CSS Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 2 MỤC TIÊU BÀI HỌC Khởi tạo trang mới với Jquery mobile Chèn các thành phần: Layout grid Collapsible block Sử dụng các thành phần form: input với Jquery mobile: Jump menu Input form Các thành phần đặc biệt khác Khởi tạo trang mới với Jquery mobile Chèn các thành phần: Layout grid Collapsible block Sử dụng các thành phần form: input với Jquery mobile: Jump menu Input form Các thành phần đặc biệt khác Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 3 KHỞI TẠO WEB VỚI JQUERY MOBILE KHỞI TẠO WEB VỚI JQUERY MOBILE Trang Jquery mobile bao gồm: HTML Javascript từ thư viện Jquery mobile CSS Để khởi tạo trang mới với Jquery mobile sử dụng thành phần jQuery Mobile trên bảng Insert Trang Jquery mobile bao gồm: HTML Javascript từ thư viện Jquery mobile CSS Để khởi tạo trang mới với Jquery mobile sử dụng thành phần jQuery Mobile trên bảng Insert Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 5 KHỞI TẠO WEB VỚI JQUERY MOBILE Bước 1: Khởi tạo trang HTML5 Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 6 KHỞI TẠO WEB VỚI JQUERY MOBILE Bước 2: Chèn trang Jquery Mobile Các thành phần jQuery widget, đối tượng (objects) phải được chèn trong trang Jquery Mobile Trích xuất trang Jquery mobile widget bằng cách chọn Insert > jQuery Mobile > Page Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 7 Hộp thoại page xuất hiện KHỞI TẠO WEB VỚI JQUERY MOBILE Tùy chọn The Remote (CDN): liên kết các phiên bản của những tập tin cần thiết tại các trang Jquery mobile Tùy chọn Local: tương tự như file trong trang web Nhấn OK để hiển thị hộp tùy chọn header, footer trên trang Tùy chọn The Remote (CDN): liên kết các phiên bản của những tập tin cần thiết tại các trang Jquery mobile Tùy chọn Local: tương tự như file trong trang web Nhấn OK để hiển thị hộp tùy chọn header, footer trên trang Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 8 KHỞI TẠO WEB VỚI JQUERY MOBILE Kết quả: Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 9 Thay đổi kích thước hiển thị phù hợp với từng loại thiết bị di động CHÈN THÊM THÀNH PHẦN TRÊN TRANG [...]... web mobile với thành phần JQuery Mobile 21 THÊM CÁC THÀNH PHẦN FORM TRONG TRANG JQUERY MOBILE Ví dụ về thành phần button: Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 22 THÊM CÁC THÀNH PHẦN FORM TRONG TRANG JQUERY MOBILE Một số trường đặc biệt trên form cho thiết bị di động: Trường text-input: • Insert > jQuery Mobile > Text Input Slide 4 - Nâng cao khả năng thiết kế web. .. khối Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 17 CHÈN THÊM THÀNH PHẦN TRÊN TRANG – Sử dụng thuộc tính ul-collapsible để định dạng lại thành phần khối Định dạng trong bảng CSS STYLES Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 18 THÊM CÁC THÀNH PHẦN FORM TRONG TRANG JQUERY MOBILE THÊM CÁC THÀNH PHẦN FORM TRONG TRANG JQUERY MOBILE Sử... Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 20 THÊM CÁC THÀNH PHẦN FORM TRONG TRANG JQUERY MOBILE Khởi tạo thành phần form Jquery Mobile: Các bước thực hiện: • Khởi tạo trang jQuery Mobile • Chèn form vào trang jQuery Mobile Page • Chèn các thành phần bên trong form Chèn form: Insert | Form | Form Bảng tùy chọn Tag Editor xuất hiện Slide 4 - Nâng cao khả năng thiết kế web. .. Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 13 CHÈN THÊM THÀNH PHẦN TRÊN TRANG Thiết kế trang mobile trong collapsible block: Collapsible block (các khối mở rộng): hoạt động trên nguyên tắc hiển thị/ ẩn nội dung tùy thuộc vào người dùng Ví dụ về hiển thị/ ẩn khối nội dung của người dùng Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 14 CHÈN... năng thiết kế web mobile với thành phần JQuery Mobile 23 THÊM CÁC THÀNH PHẦN FORM TRONG TRANG JQUERY MOBILE Slider : • Insert > jQuery Mobile > Slider toggle switch: Insert > jQuery Mobile > Flip Toggle Switch Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 24 THÊM CÁC THÀNH PHẦN FORM TRONG TRANG JQUERY MOBILE Định dạng các trường trong form dành cho web di động: Có thể... data-role="collapsible-set"> Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 15 CHÈN THÊM THÀNH PHẦN TRÊN TRANG – Theo mặc định, khi mở trang khối sẽ được hiển thị Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 16 CHÈN THÊM THÀNH PHẦN TRÊN TRANG • Thay đổi theme và định dạng style cho khối: – Sử dụng data-theme,... THÊM THÀNH PHẦN TRÊN TRANG Chèn thêm thành phần Layout grid: Để tạo thành phần layout dạng bảng (cột) có thể sử dụng thành phần Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 11 CHÈN THÊM THÀNH PHẦN TRÊN TRANG Tuy nhiên, phương pháp linh hoạt, chuẩn hơn để thiết kế thành phần bảng (cột) trên trang Jquery mobile là sử dụng: • ui-block • ui-grid Sử dụng Insert > jQuery. .. 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 25 TỔNG KẾT Khởi tạo trang với Jquery mobile : Insert > jQuery Mobile > Page Để chèn thêm thành phần Layout grid cho web di động, sử dụng: Insert > jQuery Mobile > Layout Grid Hoàn toàn định dạng lại layout grid với các thuộc tính css: ui-block & ui-grid Với các thành phần trong form dành cho web di động, phải sử dụng Insert > Jquery. .. Insert > jQuery Mobile > Layout Grid Hộp thoại tùy chọn cho bảng (cột) xuất hiện Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 12 CHÈN THÊM THÀNH PHẦN TRÊN TRANG Định nghĩa style cho Layout grid: • jQuery Mobile Layout Grid sử dụng hai class: – ui-grid-a cho 2 cột của grid – ui-grid-b cho 3 cột của grid • Để định nghĩa việc xuất hiện của của các thành phần trong layout... Grid Hoàn toàn định dạng lại layout grid với các thuộc tính css: ui-block & ui-grid Với các thành phần trong form dành cho web di động, phải sử dụng Insert > Jquery mobile Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 26 . trang Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 8 KHỞI TẠO WEB VỚI JQUERY MOBILE Kết quả: Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile. web với Jquery mobile Định dạng trang web với CSS Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 2 MỤC TIÊU BÀI HỌC Khởi tạo trang mới với Jquery mobile Chèn các thành. phần jQuery Mobile trên bảng Insert Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 5 KHỞI TẠO WEB VỚI JQUERY MOBILE Bước 1: Khởi tạo trang HTML5 Slide 4 - Nâng cao khả