BÀI 4NÂ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 độngNâng cao khả năng tương tác của web di động vớiJavascript và AJAXThiết kế trang web cho di động với DreamweaverCS5:

Khởi tạo và tùy biến nội dungChè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 độngNâng cao khả năng tương tác của web di động vớiJavascript và AJAXThiết kế trang web cho di động với DreamweaverCS5:

Khởi tạo và tùy biến nội dungChè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 mobileChèn các thành phần:

Layout gridCollapsible block

Sử dụng các thành phần form: input với Jquerymobile:

Jump menuInput formCác thành phần đặc biệt khác

Khởi tạo trang mới với Jquery mobileChèn các thành phần:

Layout gridCollapsible block

Sử dụng các thành phần form: input với Jquerymobile:

Jump menuInput formCá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:HTMLJavascript từ thư viện Jquery mobileCSS

Để khởi tạo trang mới với Jquery mobile sử dụngthành phần jQuery Mobile trên bảng Insert

Trang Jquery mobile bao gồm:HTMLJavascript từ thư viện Jquery mobileCSS

Để khởi tạo trang mới với Jquery mobile sử dụngthà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 MobileCác thành phần jQuery widget, đối tượng (objects)phải được chèn trong trang Jquery MobileTrích xuất trang Jquery mobile widget bằng cách chọnInsert > 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ấthiệ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ảncủa những tập tin cần thiết tại các trang JquerymobileTù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, footertrên trang

Tùy chọn The Remote (CDN): liên kết các phiên bảncủa những tập tin cần thiết tại các trang JquerymobileTù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, footertrê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ểnthị 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ếtkế 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ếtkế 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ầntrong 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ầntrong 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ênnguyên tắc hiển thị/ ẩn nội dung tùy thuộc vào ngườidù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ànhphầ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 TRONGTRANG JQUERY MOBILE

THÊM CÁC THÀNH PHẦN FORMTRONG 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 FORMTRONG 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 Editorxuất hiện

THÊM CÁC THÀNH PHẦN FORMTRONG 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 FORMTRONG 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 FORMTRONG TRANG JQUERY MOBILE

Slider :• Insert > jQuery Mobile > Slider

toggle switch: Insert > jQuery Mobile > Flip ToggleSwitch.

Slider :• Insert > jQuery Mobile > Slider

toggle switch: Insert > jQuery Mobile > Flip ToggleSwitch.

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 FORMTRONG 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ụngdata-theme

Slide 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 > jQueryMobile > PageĐể chèn thêm thành phần Layout grid cho web diđộng, sử dụng: Insert > jQuery Mobile > LayoutGridHoàn toàn định dạng lại layout grid với các thuộctính css: ui-block & ui-gridVới các thành phần trong form dành cho web diđộng, phải sử dụng Insert > Jquery mobile

Khởi tạo trang với Jquery mobile : Insert > jQueryMobile > PageĐể chèn thêm thành phần Layout grid cho web diđộng, sử dụng: Insert > jQuery Mobile > LayoutGridHoàn toàn định dạng lại layout grid với các thuộctính css: ui-block & ui-gridVớ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