Tìm hiểu về JQuery mobile

12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

Muïc Luïc
Chương I – Tổng quan về JQuery.....................................................................................2
1. Giới thiệu về JQuery........................................................................................2
2. Để sử dụng Jquery bạn cần hiểu biết gì?.........................................................3
3. Tại sao phải dùng Jquery?................................................................................3
4. Jquery làm được những gì?..............................................................................3
5. Làm sao để sử dụng Jquery?............................................................................4
Chương II – Jquery hoạt động như thế nào.....................................................................6
1. Cú pháp và đối tượng.......................................................................................7
2. Điều khiển CSS của đối tượng.........................................................................6
2.1.
Lấy giá trị của một thuộc tính CSS.............................................................7
2.2.
Đặt giá trị mới cho CSS..............................................................................7
2.3.
Ví dụ minh họa............................................................................................7
3. Điều khiển thuộc tính của đối tượng................................................................8
3.1.
Lấy giá trị thuộc tính của đối tượng...........................................................9
3.2.
Gán giá trị mới cho đối tượng....................................................................9
3.3.
Ví dụ minh họa..........................................................................................10
4. Gán sự kiện và xử lý sự kiện..........................................................................10
4.1.
Gán sự kiện vào đối tượng........................................................................10
4.2.

Hủy sự kiện vào đối tượng........................................................................11
5. Chuyển động, thay đổi hình dạng của đối tượng...........................................13
6. Một vài hàm API phổ biến thường dùng.......................................................15
6.1.
Hàm .fadeIn()............................................................................................16
6.2.
Hàm .fadeOut().........................................................................................16
6.3.
Hàm .fadeTo()...........................................................................................16
6.4.
Hàm .Show().............................................................................................17
6.5.
Hàm .Hide()..............................................................................................18
Chương III – Giới thiệu JQuery Mobile.........................................................................19
1. Giới thiệu sơ lược...........................................................................................19
2. Đặc điểm JQuery Mobile...............................................................................20
2.1.
Khái niệm về JQuery Mobile....................................................................20
2.2.
Các đặc tính cở bản trong JQuery Mobile...............................................20
2.3.
Hổ trợ trình duyệt JQuery Mobile............................................................21
2.4.
Làm sao sử dụng được JQuery Mobile....................................................21
3. Tìm hiểu về JQuery Mobile...........................................................................22
3.1.
JQuery Mobile làm được gì......................................................................22
3.2.
Các thành phần trong JQuery Mobile......................................................23
3.3.

Ví dụ minh họa về JQuery Mobile............................................................26

GVHD: NGUYỄN VĂN A 1


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

CHƯƠNG I – TỔNG QUAN VỀ JQUERY
1. Giới thiệu JQuery
-

Với sự phát triển rất mau lẹ của Internet, người dùng ngày càng quan tâm hơn đến hình
thức của một trang web. Trước đây một trang web chỉ cần có banner, nội dung và ít footer
hời hợt là đã được cho là một trang web hoàn chỉnh. Nhưng bây giờ trang web đó phải có
banner bắt mắt, nội dung hay và còn nhiều hiệu ứng lạ mắt khác nữa thì mới có thể thu
hút được người đọc.

-

Chính vì thế những web designer bắt đầu chú ý đến các thư viện JavaScript mở như
jQuery để tạo ra các hiệu ứng có thể tương tác trực tiếp với người đọc một cách nhanh
chóng và dễ dàng hơn rất nhiều là sử dụng thuần JavaScript.

-

jQuery là một Javascript Framework. Nó là một bộ thư viện được xây dựng để hỗ trợ các
nhà lập trình web tạo ra các tương tác trên website một cách nhanh nhất. JQuery thêm
tương tác Ajax vào trong trang web của bạn, đơn giản hóa cách viết Javascript và tăng tốc

độ xử lý các sự kiện trên trang web, giúp tiết kiệm thời gian và công sức so với cách viết
javascript thông thường.

-

jQuery được phát triển bởi John Resig vào năm 2006 và sau 6 năm giờ nó đã trở thành
một bộ thư viện nổi tiếng với hàng chục nghìn plugin hay, hàng triệu người sử dụng, và
hầu hết các website hiện nay đều ứng dụng nó.

-

jQuery có mã nguồn mở và hoàn toàn miễn phí, bạn có thể download nó tại
.
GVHD: NGUYỄN VĂN A 2


12HTH01 – NHÓM 4

-

Tìm Hiểu Về JQuery Mobile

Hoặc có thể sử dụng trực tiếp jQuery lưu trữ tại jQuery hay Google từ 2 địa chỉ sau

2. Để sử dụng jQuery bạn cần những hiểu biết gì?
-

JQuery không phải là một ngôn ngữ mới mà chỉ là thư viện hàm javascript. jQuery hướng
tới mục đích làm đơn giản hóa những công việc phức tạp trước đây khi dùng javascript để
điều khiển DOM, CSS,… Do vậy, để học jQuery bạn cần tối thiểu nắm bắt được những

kiến thức sau:
 HTML
 JAVASCRIPT
 CSS
3. Tại sạo phải dùng JQuery

-

jQuery đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web,
giúp tiết kiệm thời gian và công sức so với cách viết javascript thông thường.

-

Bên cạnh đó, việc sử dụng jQuery giúp giải quyết tốt vấn đề xung đột giữa các trình duyệt
web.

-

Học jQuery rất đơn giản, nếu như bạn nắm vững CSS, bạn có thể tiếp cận và sử dụng
jQuery nhanh chóng.

-

Ngoài jQuery còn có các thư viện javascript nổi tiếng khác như mooTools, Prototype,
Dojo... thế nhưng jQuery có vẻ thu hút các web designer hơn là vì nó có các ưu điểm.
Ưu điểm của jQuery:
•

Hỗ trợ tốt việc xử lí các vấn đề thường gặp (DOM, AJAX…)

•

Tương thích nhiều trình duyệt web phổ biến.

•

Nhỏ gọn, dễ dùng, có nhiều tài liệu hướng dẫn sử dụng chi tiết.

•

Ít xung khắc với các thư viện Javascript khác.

•

Plugin phong phú.
GVHD: NGUYỄN VĂN A 3


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

4. JQuery có thể làm được những gì
-

-

-

-

-

Hướng tới các thành phần trong tài liệu HTML: Nếu không sử dụng thư viện
JavaScript này, bạn phải viết rất nhiều dòng code mới có thể đạt được mục tiêu là di
chuyển trong cấu trúc cây (hay còn gọi là DOM = Document Object Model) của một tài
liệu HTML và chọn ra các thành phần liên quan. Jquery cho phép bạn chọn bất cứ thành
phần nào của tài liệu để “vọc” một cách dễ dàng như sử dụng CSS.
Thay đổi giao diện của một trang web: CSS là công cụ rất mạnh để định dạng một trang
web nhưng nó có một nhược điểm là không phải tất cả các trình duyệt đều hiển thị giống
nhau. Cho nên jQuery ra đời để lấp chỗ trống này, vì vậy các bạn có thể sử dụng nó để
giúp trang web có thể hiển thị tốt trên hầu hết các trình duyệt. Hơn nữa jQuery cũng có
thể thay đổi class hoặc những định dạng CSS đã được áp dụng lên bất cứ thành phần nào
của tài liệu HTML ngay cả khi trang web đó đã được trình duyệt load thành công. Thay
đổi nội dung của tài liệu. Jquery không phải chỉ có thể thay đổi bề ngoài của trang web,
nó cũng có thể thay đổi nội dung của chính tài liệu đó chỉ với vài dòng code. Nó có thể
thêm hoặc bớt nội dung trên trang, hình ảnh có thể được thêm vào hoặc đổi sang hình
khác, danh sách có thể được sắp xếp lại hoặc thậm chí cả cấu trúc HTML của một trang
web cũng có thể được viết lại và mở rộng. Tất cả những điều này bạn hoàn toàn có thể
làm được nhờ sự giúp đỡ của API (Application Programming Interface = Giao diện lập
trình ứng dụng).
Tương tác với người dùng: Cho dù công cụ bạn dùng có mạnh mẽ đến mấy, nhưng nếu
bạn không có quyền quyết định khi nào nó được sử dụng thì công cụ đó cũng coi như bỏ.
Với thư viện javaScript như jQuery, nó cho bạn nhiều cách để tương tác với người dùng
ví dụ như khi người dùng nhấp chuột vào đường link thì sẽ có gì xảy ra. Nhưng cái hay
của nó là không làm cho code HTML của bạn rối tung lên chính là nhờ các Event
Handlers. Hơn nữa Event Handler API sẽ bảo đảm rằng trang web của bạn tương thích
hầu hết với các trình duyệt, điều này đã và đang làm đau đầu rất nhiều các web designer.
Tạo hiệu ứng động cho những thay đổi của tài liệu: Để tương tác tốt với người dùng,
các web designer phải cho người dùng thấy được hiệu ứng gì sẽ xảy ra khi họ làm một tác

vụ nào đó. Jquery cho phép bạn sử dụng rất nhiều hiệu ứng động như mờ dần, chạy dọc
chạy ngang v.v.. và nếu vẫn chưa đủ, nó còn cho phép bạn tự tạo ra các hiệu ứng của
riêng mình.
Lấy thông tin từ server mà không cần tải lại trang web: Đây chính là công nghệ ngày
càng trở nên phổ biến Asynchronous JavaScript And XML (AJAX), nó giúp người thiết
kế web tạo ra những trang web tương tác cực tốt và nhiều tính năng. Thư viện jQuery loại
GVHD: NGUYỄN VĂN A 4


12HTH01 – NHÓM 4

-

-

Tìm Hiểu Về JQuery Mobile

bỏ sự phức tạp của trình duyệt trong quá trình này và cho phép người phát triển web có
thể tập trung vào các tính năng đầu cuối. Đơn giản hoá các tác vụ javaScript. Ngoài
những tính năng như đã nêu ở trên, jQuery còn cho phép bạn viết code javaScript đơn
giản hơn nhiều so với cách truyền thống như là các vòng lặp và điều khiển mảng.
5. Làm sao để sử dụng jQuery?
jQuery đơn thuần là một tập tin javascript, để sử dụng các hàm jQuery, bạn cần tải về tập
tin này rồi dùng thẻ <script> để chèn vào trang web mà bạn muốn dùng cũng giống như
chèn những tập tin javascript do bạn viết vậy.
Có thể tải về tập tin jQuery phiên bản mới nhất tại trang web chính thức của jQuery tại
đây: Truy cập vào website rồi ấn nút “Download (jQuery)” để tải về.

Hình 1.1
(Thông thường khi ấn vào nút này thì trình duyệt sẽ mở lên nội dung của tập tin chứ không tải về.

Bạn chỉ việc bấm Ctrl+S để lưu lại nội dung thành một tập tin *.js)

Hình 1.2

GVHD: NGUYỄN VĂN A 5


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

CHƯƠNG 2: JQUERY HOẠT ĐỘNG NHƯ THẾ NÀO?
Phần này tập trung mô tả những cú pháp cơ bản của jQuery cùng với vài mục đích
sử dụng phổ biến. Sau đó, dựa vào những giới thiệu trong phần này mà bạn có thể tự
mình nghĩ ra những mục đích dùng khác trong việc khai thác triệt để các hàm API sẽ
được liệt kê đầy đủ và chi tiết trong phần sau

Hình 2.1
1. Cú pháp và đối tượng
-

jQuery sử dụng cùng một cách như CSS để lựa chọn những phần tử HTML (thẻ HTML)
và thực hiện vài việc gì đó lên những đối tượng được chọn. Việc chọn đối tượng có thể
thực hiện theo kiểu chọn một đối tượng duy nhất (đơn lẻ) hoặc một tập hợp các đối tượng
có cùng đặc điểm (nhiều thành phần). Nguyên tắc để chọn cụ thể như sau:
GVHD: NGUYỄN VĂN A 6


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

Cú Pháp | Chọn đối tượng thao tác
$ (doi_tuong)
$

: Ký tự bắt đầu của jQuery trong việc xác định đối tượng.

(doi_tuong)

: Tiêu chí để xác định đối tượng. Liệt kê cụ thể những trường hợp
như bên dưới

-

Sau đây là bảng liệt kê các tiêu chuẩn mẫu để chọn đối tượng:

$(this)

: Chọn đối tượng hiện tại (đối tượng đặc biệt) | đơn lẻ

$(document)

: Chọn đối tượng toàn bộ tài liệu (đối tượng đặc biệt) | đơn lẻ

$(window)

: Chọn đối tượng về cửa sổ hiện hành (đối tượng đặc biệt) | đơn lẻ

$('p')

: Chọn tất cả thẻ

| nhiều thành phần

$('.ClassName')

: Chọn tất cả thẻ HTML có class=’ClassName’ | nhiều thành phần

$('#IdValue')

: Chọn thẻ HTML có id=’IdValue’ | đơn lẻ

2. Điều khiển CSS của đối tượng

2.1. Lấy giá trị của một thuộc tính CSS
- Khi dùng jQuery, việc tác động trực tiếp và lấy giá trị một thuộc tính CSS
của đối tượng đang được chọn vô cùng đơn giản vì bạn sẽ sử dụng tên thuộc tính và giá trị
lấy được sẽ có định dạng y như khi định nghĩa CSS thuần.
Cú Pháp | Lấy giá trị của một thuộc tính CSS
$ (doi_tuong).css(‘ten_css’);
doi_tuong

: là tiêu chuẩn xác định đối tượng như mô tả ở trên.

ten_css

: là tên của thuộc tính css như font-size, color, background-color, …
2.2. Đặt giá trị mới cho CSS

- Tương tự như lấy giá trị của thuộc tính CSS, việc gán giá trị cho nó cũng
khá là đơn giản.

Cú Pháp | Lấy giá trị của một thuộc tính CSS
$ (doi_tuong).css(‘ten_css’,’gia_tri’);
doi_tuong

: là tiêu chuẩn xác định đối tượng như mô tả ở trên.

ten_css

: là tên của thuộc tính css như font-size, color, background-color, …

gia_tri

: là giá trị bạn muốn gán cho CSS

 Ví dụ: để lấy giá trị thuộc tính CSS font-family của tất cả thẻ

ta có câu lệnh

jQuery sau:
GVHD: NGUYỄN VĂN A 7


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

2.3. Ví dụ minh họa

Hình 2.2
3. Điều khiển thuộc tính của đối tượng

GVHD: NGUYỄN VĂN A 8

12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

3.1. Lấy giá trị thuộc tính của đối tượng
Cú Pháp | Lấy giá trị một thuộc tính HTML của đối tượng
$ (doi_tuong).atrr(‘thuoc_tinh’);
doi_tuong

: là tiêu chuẩn xác định đối tượng như mô tả ở trên.

thuoc_tinh

: tên của thuộc tính của HTML

 Ví dụ 1, ta có thẻ <img id='vidu_image' src='simple.jpg' /> Nếu muốn lấy thuộc tính

src của thẻ này, ta dùng:

 Ví dụ 2, ta có thẻ <input type='txtUID' id='vidu' /> , nếu muốn lấy giá trị thuộc tính

value của thẻ này. Ta có thể dùng câu lệnh jQuery tương tự.

 Tuy nhiên, đối với ví dụ 2, bạn cũng có thể dùng câu lệnh jQuery như sau để lấy giá trị

của thuộc tính value.

-

Tùy vào đối tượng là thẻ nào mà thuộc tính chỉ định sẽ có tồn tại hay không. Nếu không
tồn tại thì câu lệnh trả về undefined. Ví dụ, nếu bạn cố gắng lấy thuộc tính color của thẻ
<img> thì kết quả trả về là undefined vì thẻ <img> không có thuộc tính color.
3.2. Gán giá trị mới cho thuộc tính
- Việc gán lại giá trị của thuộc tính cũng đơn giản và tương tự như lấy
giá trị thuộc tính. Chỉ khác biệt là ta sẽ có 2 tham số bên trong attr(). Nếu bạn cố gắng gán
GVHD: NGUYỄN VĂN A 9


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

một thuộc tính cho một đối tượng HTML không hỗ trợ thuộc tính đó thì câu lệnh sẽ
không được thực thi.
Cú Pháp | Lấy giá trị một thuộc tính HTML của đối tượng
$ (doi_tuong).atrr(‘thuoc_tinh’,’gia_tri’);
doi_tuong

: là tiêu chuẩn xác định đối tượng như mô tả ở trên.

thuoc_tinh

: tên của thuộc tính của HTML

gia_tri

: giá trị muốn gán cho thuộc tính.

 Ví dụ, ta có thẻ html <img id='vidu_image' src='simple.jpg' />. Ta muốn đổi thuộc tính

src thành new_image.jpg ta viết:

3.3. Lấy ví dụ minh họa.

GVHD: NGUYỄN VĂN A 10


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

Hình 2.3
4. Gán sự kiện và xử lý sự kiện.

4.1. Gán sự kiện vào đối tượng.
-

Phần này sẽ trình bày việc dùng jQuery để gán sự kiện lên đối tượng và điều khiển xử lý
sự kiện đó khi nó xảy ra. Nội dung ở đây đề cập đến chỉ bao gồm những cách dùng phổ
thông nhất để giúp bạn nắm bắt và làm quen. Những nội dung chi tiết hơn về các sự kiện
sẽ được đề cập đầy đủ trong những phần tiếp theo trong tài liệu này.
Cú Pháp | Gán sự kiện và hàm điều khiển cho sự kiện vào đối tượng
$ (doi_tuong).ten_su_kien(‘ham_dieu_khien’);
doi_tuong

: Tiêu chí xác định đối tượng như đã nói trong phần giới thiệu.
GVHD: NGUYỄN VĂN A 11

12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

ten_su_kien

: Tên của sự kiện.

ham_dieu_khie
n

: Hàm điều khiển của sự kiện khi sự kiện phát sinh.

Hàm điều khiển có thể định nghĩa mới ngay bên trong câu lệnh gán sự kiện hoặc có thể
khai báo hàm đã được định nghĩa riêng bên ngoài.
 Ví dụ

Hình 2.4
4.2. Hủy sự kiện vào đối tượng
- Khi đã gán sự kiện cho một đối tượng rồi, nhưng trong một số trường
hợp hoặc vì vài lý do nào đó mà bạn muốn hủy sự kiện đó thì jQuery giúp bạn làm việc
này khá đơn giản.
GVHD: NGUYỄN VĂN A 12


12HTH01 – NHÓM 4

-

-

Tìm Hiểu Về JQuery Mobile

Còn muốn hủy bỏ xử lý toàn bộ sự kiện của một đối tượng, ta dùng cú pháp này:

Kết hợp những kiến thức trên về sự kiện, ta sẽ lần lượt đi qua ví dụ để có thể hiểu rõ hơn
và biết cách dùng thành thạo hơn đối với từng trường hợp và vấn đề phát sinh. Chủ yếu là
vấn đề gán và hủy sự kiện.
 Ví dụ

Hình 2.5
5. Chuyển động, thay đổi hình dạng của đối tượng
-

Chuyển động (animation) là một trong những API thú vị nhất trong jQuery. Bạn sẽ dễ
dàng điều hướng, thay đổi hình dạng, vị trí của đối tượng vô cùng dễ dàng và thuận tiện.
GVHD: NGUYỄN VĂN A 13


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

Để có thể nắm rõ hơn về animate(). Chúng ta sẽ lần lượt đi qua một vài ví dụ trong
nhiều trường hợp sử dụng như sau:
 Ví Dụ

DEMO

GVHD: NGUYỄN VĂN A 14


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

Hình 2.6
 Ví Dụ 2

GVHD: NGUYỄN VĂN A 15


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

6. Một vài hàm API phổ biến thường hay dùng.
-

Đây là danh sách những hàm API jQuery hay dùng nhất để bạn có thể tham khảo nhanh
và phục vụ vài mục đích đơn giản tỏng quá trình làm quen với jQuery cũng như làm cái
bài tập. Cũng như những nội dung bên trên, những cách dùng liệt kê trong phần này cũng
chỉ là những trường hợp phổ thông nhất.
6.1. Hàm .fadeIn()
Hiệu ứng hiển thị dần dần một đối tượng từ trạng thái trong suốt. Nghĩa
là trạng thái ban đầu của đối tượng phải là trong suốt (opacity = 0).

Ví Dụ: Hiển thị dần đối tượng có id=’vidu3’ trong khoảng thời gian 600 mili giây(tương
ứng ‘slow’). Sau khi xong thì hiển thị hộp thoại “Đã xong”.

6.2. Hàm .fadeOut()
Hàm này có tác dụng gây hiệu ứng ngược lại với hàm .fadeIn(), nghĩa là nó
sẽ làm cho một đối tượng trở nên trong suốt từ từ. Các tham số và cách sử dụng ý
như .fadeIn().
6.3. Hàm .fadeTo()
Hàm này có thể sử dụng cho cả hai trường hợp .fadeIn() và .fadeOut()
khi nó hướng tới mục đích chuyển đổi tự trạng thái hiện tại đến một trạng thái được chỉ
định. Tùy vào giá trị hiện tại và giá trị đến mà sẽ có hiệu ứng fadeIn() hay .fadeOut().

GVHD: NGUYỄN VĂN A 16


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

 Ví dụ: Giả sử ta có một thẻ <div id=”vidu”></div> đang có độ opacity là 0.5 , ta sẽ xét

hiệu ứng của những lệnh dưới đây lên đối tượng “vidu” này:

6.4. Hàm .show()
Về bản chất nếu không có tham số thì hàm này sẽ gọi .css('display',
'block'). Còn nếu có tham số như cú pháp dưới đây thì nó hoạt động tương tự như
.fadeIn().

GVHD: NGUYỄN VĂN A 17


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

6.5. Hàm .hide()
Trái ngược với .show(), nếu không có tham số thì hàm này sẽ gọi
.css('display', 'none'). Còn nếu có tham số như cú pháp dưới đây thì nó hoạt động tương tự
như .fadeOut(). Cú

GVHD: NGUYỄN VĂN A 18


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

CHƯƠNG 3: GIỚI THIỆU JQUERY MOBILE
1. Giới thiệu sơ lược
-

Ngày nay, với sự phát triển vượt bậc của các smartphone và tablet, chúng ta có thể truy
cập website ở bất cứ lúc nào. Tuy nhiên, một nhược điểm rất lớn của các website (đặc biệt
là website Việt Nam) sử dụng Flash quá nhiều. Điều này đã làm cho các thiết bị di động
gặp khó khăn trong quá trình truy cập (IOS không hỗ trợ chạy Flash khi lướt web, nếu
muốn các bạn phải cài đặt thêm plug-in. Điều này sẽ rất khó khăn đối với một số người
không chuyên về tin học và sẽ làm giảm thời lượng Pin sử dụng). Chính vì vậy Jquery
Mobile đã ra đời.

-

Bên cạnh Sencha Touch, Jquery Mobile cũng được ủng hộ mạnh mẽ và phát triển trên nền

tảng Jquery. Tuy nhiên nó dễ chịu hơn so với Sencha Touch vì nó không ảnh hưởng đến
việc code chức năng web (PHP, ASP...). Cách sử dụng như chúng ta dùng Jquery thông
thường.

-

Jquery Mobile ra đời khoảng tháng 8/2010 nhưng đã phát triển rất nhanh do tính phổ biến,
mã nguồn mở và cú pháp tương tự Jquery, nhiều plugin miễn phí, hiệu ứng chuyển động
tốt. Và quan trọng hơn hết là tương thích với tất cả các thiết bị di động smartphone trên
nền IOS, Android, Blackberry...

-

Hiện tại. Jquery Mobile vẫn đang được tiếp tục phát triển và hoàn thiện. Tuy nhiên. trong
tương lai không xa đây sẽ là một thư viện hỗ trợ mạnh mẽ công nghệ HTML5 và CSS3
cho các thiết bị cảm ứng.

-

jQuery Mobile, một khung công tác giao diện người dùng (UI), cho phép bạn viết một
ứng dụng web di động chức năng mà không cần viết một dòng mã JavaScript. Trong bài
này, hãy tìm hiểu về các tính năng của khung công tác này, gồm các trang cơ bản, các
thanh công cụ điều hướng, các nút điều khiển biểu mẫu và các hiệu ứng chuyển tiếp.
GVHD: NGUYỄN VĂN A 19


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

Để tìm hiểu jQuery Mobile, bạn sẽ cần:

-

•

Xem trước về HTML.

•

Hiểu các điều cơ bản của JavaScript.

•

Kiến thức cơ bản về jQuery.

Bạn có thể tải về mã nguồn của trình cắm thêm jQuery được sử dụng trong bài này từ
bảng Tải về dưới đây. Phần Tài nguyên có thông tin về jQuery, JavaScript, DOM,
HTML5 và nhiều hơn nữa.
2. Đặc điểm của jQuery Mobile
2.1.

-

jQuery Mobile là một khung công tác phát triển giao diện người dùng web thân thiện với
cảm ứng cho phép bạn phát triển các ứng dụng web di động làm việc trên các máy điện
thoại thông minh và các máy tính bảng. Khung công tác jQuery Mobile được xây dựng
trên đỉnh lõi jQuery và cung cấp một số phương tiện, gồm thao tác và chuyển dịch DOM
(Mô hình đối tượng tài liệu), HTML và XML, xử lý các sự kiện, thực hiện truyền thông
máy chủ bằng cách sử dụng Ajax, cũng như các hiệu ứng hình ảnh và hình ảnh động cho

các trang web. Bản thân khung công tác di động là một bản tải bổ sung, riêng biệt có kích
cỡ khoảng 12KB (đã rút gọn và nén) từ lõi jQuery có kích cỡ khoảng 25KB khi đã rút
gọn/nén. Cũng như với phần còn lại của khung công tác jQuery, jQuery Mobile là thư
viện được cấp phép kép (MIT và GPL), miễn phí.

2.2.
-

Khái niệm

Các dặc tính cơ bản của JQuery Mobile

Khá đơn giản: Khung công tác dễ sử dụng. Bạn có thể phát triển các trang chủ yếu bằng
cách sử dụng đánh dấu dựa vào mã JavaScript tối thiểu hoặc không dùng mã này.
Nâng cấp tăng dần và khả năng chịu lỗi: Trong khi jQuery Mobile sử dụng mã HTML5,
CSS3 và JavaScript mới nhất, không phải tất cả các thiết bị di động đều cung cấp sự hỗ
trợ như vậy. Triết lý của JQuery Mobile là hỗ trợ cả hai thiết bị có khả năng cấp cao và
khả năng cấp thấp hơn, chẳng hạn như những thiết bị không hỗ trợ JavaScript và vẫn cung
cấp các trải nghiệm tốt nhất có thể.
GVHD: NGUYỄN VĂN A 20


12HTH01 – NHÓM 4

-

-

Tính dễ dung: jQuery Mobile được thiết kế với chủ ý dễ dùng. Nó có sự hỗ trợ cho Các
ứng dụng Internet phong phú có thể dễ dùng (WAI-ARIA - Accessible Rich Internet

Applications) để giúp làm cho các trang web có thể dễ dùng với khách truy cập bị tàn tật
nhờ sử dụng các công nghệ trợ giúp.
Kích cỡ nhỏ: Kích cỡ tổng thể của khung công tác di động jQuery là tương đối nhỏ
khoảng 12KB với thư viện JavaScript, 6KB với CSS, cộng với một số biểu tượng.
Tạo chủ đề: Khung công tác này cũng cung cấp một hệ thống chủ đề, cho phép bạn đưa ra
kiểu dáng ứng dụng riêng của mình. Khi được dùng với các bộ công cụ như là PhoneGap,
có sử dụng các công nghệ web để xây dựng các ứng dụng độc lập, khung công tác jQuery
Mobile có thể giúp đơn giản hóa việc phát triển ứng dụng của bạn
Hổ trợ trình duyệt JQuery Mobile

2.3.
-

-

Tìm Hiểu Về JQuery Mobile

Chúng tôi đã đi một chặng đường dài với sự hỗ trợ trình duyệt của thiết bị di động, nhưng
không phải tất cả các thiết bị di động đều cung cấp sự hỗ trợ cho HTML5, CSS 3 và
JavaScript. Lĩnh vực này là nơi sự hỗ trợ nâng cấp tăng dần và khả năng chịu lỗi của
jQuery Mobile đi vào. Như đã nêu, jQuery Mobile hỗ trợ cả hai thiết bị có khả năng cấp
cao và cấp thấp, chẳng hạn như những thiết bị không hỗ trợ JavaScript. Nâng cấp tăng
dần có các nguyên tắc cốt lõi sau:
•

Tất cả các nội dung cơ bản nên có thể dễ dùng với tất cả các trình duyệt.

•

Tất cả các chức năng cơ bản nên có thể dễ dùng với tất cả các trình duyệt.

•

Bố trí nâng cao được cung cấp bởi CSS liên kết ngoài.

•

Hành vi nâng cao được cung cấp bởi JavaScript liên kết ngoài.

•

Các sở thích trình duyệt của người dùng cuối được tôn trọng.

Tất cả các nội dung cơ bản nên trình diễn (như đã thiết kế) trên các thiết bị cơ bản, trong
khi nhiều nền tảng và các trình duyệt nâng cao hơn sẽ dần dần được nâng cấp bằng CSS
và JavaScript liên kết ngoài, bổ sung.
 jQuery Mobile hiện đang cung cấp sự hỗ trợ cho các nền tảng di động sau đây:
•

Apple® iOS: iPhone, iPod Touch, iPad (tất cả các phiên bản).

•

Android™: tất cả các thiết bị (tất cả các phiên bản).

•

Blackberry®: Torch (phiên bản 6).

•

Palm™: WebOS Pre, Pixi.

•

Nokia®: N900 (đang xây dựng).

2.4. Làm sao để sử dụng JQuery Mobile
- Cũng giống như JQuery chúng ta có thể làm theo 2 cách

GVHD: NGUYỄN VĂN A 21


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

 Copy-and-Paste Snippet for CDN-hosted files (recommended):

 Hoặc có thể download tại địa chỉ

“ />3. Tìm hiểu về jQuery Mobile
3.1. JQuery làm được những gì
-

Query Mobile cung cấp sự hỗ trợ mạnh mẽ cho các loại phần tử giao diện người dùng
khác nhau. Hình 1 cho thấy một bản tóm tắt về các thành phần giao diện người dùng đang
được hỗ trợ hiện nay.

GVHD: NGUYỄN VĂN A 22

12HTH01 – NHÓM 4

-

Tìm Hiểu Về JQuery Mobile

Các thanh công cụ, các nút ấn, các khung nhìn danh sách, các thẻ, các trình đơn bật lên,
các hộp thoại, các hiệu ứng chuyển tiếp, các ô cửa sổ chỉnh sửa và các phần tử biểu mẫu
đều được hỗ trợ. Hầu hết, nếu không phải tất cả, các phần tử giao diện người dùng mà bạn
cần cho các ứng dụng web di động của mình đều được cung cấp.
3.2. Các thành phần trong Query Mobile
GVHD: NGUYỄN VĂN A 23


12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

Các thuộc tính data-* của HTML5
jQuery Mobile dựa vào các thuộc tính data-* của HTML5 để hỗ trợ các phần tử giao
diện người dùng, các hiệu ứng chuyển tiếp và cấu trúc trang khác nhau. Các thuộc tính
này đang bị các trình duyệt không hỗ trợ chúng lặng lẽ loại bỏ. Bảng 2 cho thấy cách sử
dụng các thuộc tính data-* để tạo ra các thành phần giao diện người dùng.


-

GVHD: NGUYỄN VĂN A 24

12HTH01 – NHÓM 4

Tìm Hiểu Về JQuery Mobile

Thành phần

Thuộc tính data-* của HTML5

Các thanh công cụ Đầu trang (Header) và
Chân trang (Footer)

<div data-role="header">
<div data-role="footer">

Phần thân nội dung (content)

div data-role="content">

Các nút ấn (button)

data-icon="info">Button</a>

Các nút ấn được nhóm lại

<div data-role="controlgroup">
<a href="index.html" datarole="button">Yes</a>
<a href="index.html" data-role="button">No</a>

<a href="index.html" data-role="button">Hell
Yeah</a>
</div>

Các nút ấn trực tiếp (inline button)

<div data-inline="true">
<a href="index.html" datarole="button">Foo</a>
<a href="index.html" data-role="button" datatheme="b">Bar</a>
</div>

Phần tử Biểu mẫu (Trình đơn Select)

<div data-role="fieldcontain">
class="select">Choose an option:</label>
<select name="select-options" id="selectoptions">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option2">Option 3</option>
</select>
</div>

Các khung nhìn danh sách cơ bản

<ul data-role="listview">
<li><a href="index.html">One</a></li>
<li><a href="index.html">Two</a></li>
<li><a href="index.html">Three</a></li>
</ul>

Các hộp thoại

<a href="foo.html" data-rel="dialog">Open
dialog</a>
data-rel="dialog" data-transition="pop">Open
dialog</a>

Các hiệu ứng chuyển tiếp (transition)

<a href="index.html" data-transition="pop" databack="true">



$.mobile và sự kiện và phương thức hổ trợ
GVHD: NGUYỄN VĂN A 25