bài 4 nâng cao khả năng thiết kế web mobile với thành phần jquery mobile

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

CHÈN 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 <table>
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 Mobile > Layout Grid
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 Mobile > Layout Grid
Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 12
Hộp thoại tùy chọn cho bảng (cột) xuất hiện
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, sử dụng thuộc tính:
– .ui-grid
– .ui-block
Đị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, sử dụng thuộc tính:
– .ui-grid
– .ui-block
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
Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 14
Ví dụ về hiển thị/ ẩn khối nội dung của người dùng
CHÈN THÊM THÀNH PHẦN TRÊN TRANG
Xây dựng khối collapsible block:
• Giống như các đối tượng Jquery mobile, collapsible
cũng yêu cầu hoạt động trong trang Jquery mobile
• Các bước thực hiện:
– Khởi tạo trang jQuery mobile: Insert > jQuery Mobile >
Page
– Insert > jQuery Mobile > Collapsible Block
• Thay đổi trạng thái ban đầu của khối:
– Thành phần collapsible được định nghĩa bởi:
Xây dựng khối collapsible block:
• Giống như các đối tượng Jquery mobile, collapsible
cũng yêu cầu hoạt động trong trang Jquery mobile
• Các bước thực hiện:
– Khởi tạo trang jQuery mobile: Insert > jQuery Mobile >

Page
– Insert > jQuery Mobile > Collapsible Block
• Thay đổi trạng thái ban đầu của khối:
– Thành phần collapsible được định nghĩa bởi:
Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 15
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true"> </div>
</div>
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, tham số này có thể chèn vào bất
cứ đâu trong dữ liệu của 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
Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 18
Định dạng trong bảng CSS STYLES
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ử dụng bảng Form để thực hiện:
Insert > Form
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
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
Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 21
Bảng tùy chọn Tag Editor
xuất hiện
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 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.
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ể định dạng lại các trường bằng cách sử dụng
data-theme
Slide 4 - Nâng cao khả năng thiết kế web mobile với thành phần JQuery Mobile 25