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ƯỚCNhận diện thiết bị và tính tương thích với các thiết bị 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

Trang 1

BÀI 4 NÂNG CAO KHẢ NĂNG THIẾT KẾ WEB MOBILE VỚI

THÀNH PHẦN JQUERY MOBILE

Trang 2

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ị

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ị

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

Trang 4

KHỞI TẠO WEB VỚI JQUERY MOBILE

Trang 5

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

Trang 6

Bước 1: Khởi tạo trang HTML5

Trang 7

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

Hộp thoại page xuất

hiện

Trang 8

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

Trang 9

Kết quả:

Thay đổi kích thước hiển

thị phù hợp với từng loại

thiết bị di động

Trang 10

CHÈN THÊM THÀNH PHẦN TRÊN TRANG

Trang 11

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>

Trang 12

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:

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:

Sử dụng Insert > jQuery Mobile > Layout Grid

Hộp thoại tùy chọn cho bảng (cột) xuất hiện

Trang 13

Đị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

Trang 14

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

Trang 15

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:

</div>

Trang 16

– Theo mặc định, khi mở trang khối sẽ được hiển thị

Trang 17

• 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

Trang 18

– 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

Trang 19

THÊM CÁC THÀNH PHẦN FORM TRONG

TRANG JQUERY MOBILE

Trang 20

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

Trang 21

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

Bảng tùy chọn Tag Editor

Trang 22

Ví dụ về thành phần button:

Trang 23

Một số trường đặc biệt trên form cho thiết bị di

động:

Trường text-input:

Trang 24

Slider :

toggle switch: Insert > jQuery Mobile > Flip Toggle

Switch.

Slider :

toggle switch: Insert > jQuery Mobile > Flip Toggle

Switch.

Trang 25

Đị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

Trang 26

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 mobile