Sử dụng các thành phần giao diện người dùng
trong jQuery Mobile
Các hộp thoại và các cửa sổ bật lên
Một hộp thoại là một phần tử giao diện người dùng quan trọng, nhắc người dùng đáp ứng hay chỉ
đơn giản là hiển thị thông tin. Các hộp thoại hầu như được sử dụng thường xuyên để đưa ra các
tùy chọn cho những người dùng để thực hiện một số loại lệnh dựa trên đáp ứng của người dùng.
Thông thường, bạn có thể đưa ra các hộp thoại theo một trong hai cách — là một cửa sổ phương
thức - modal hoặc không theo phương thức - non-modal (với jQuery Mobile, các hộp thoại này
được trình bày như một hộp thoại phương thức). Các hộp thoại phương thức chặn không cho
người dùng tương tác với trang web bên dưới hộp thoại, đòi hỏi một đáp ứng từ những người
dùng trước khi họ có thể tiếp tục.
Để tạo ra một hộp thoại với jQuery Mobile, bạn phải sử dụng thuộc tính data-rel trên một siêu
liên kết mà bạn muốn mở như một cửa sổ dialog (hộp thoại) và gán cho nó giá trị là dialog.
Đoạn mã dưới đây cho thấy cách chuyển đổi một siêu liên kết đơn giản đến một trang web thành
một siêu liên kết sẽ mở trang web liên quan như là một hộp thoại:
<a href="dialog.html" data-rel="dialog">Open
dialog</a>

Theo mặc định, khung công tác jQuery Mobile bổ sung các góc tròn, một lề trang và một nền tối
cho trang web để làm cho nó xuất hiện như một hộp thoại đặt lên trên trang web đó.
Có một số cách để đóng một hộp thoại. Tùy chọn đầu tiên chỉ đơn giản là liên kết đến một trang
khác, có thể liên quan đến đáp ứng từ người dùng. Đây sẽ là một tùy chọn tốt cho bất kỳ loại xử
lý nào cần diễn ra — ví dụ, một nút ấn Save (Lưu) có thể liên kết đến một trang web để lưu một
số loại thông tin vào một cơ sở dữ liệu và sau đó trả về trang web cha mẹ ban đầu với một thông
báo xác nhận. Tùy chọn thứ hai là sử dụng thuộc tính data-rel trên siêu liên kết trong hộp thoại
của bạn và thiết lập giá trị của nó là back, như trong đoạn mã dưới đây. Đây là một tùy chọn tốt
khi kèm theo một nút ấn Cancel (Hủy bỏ) trong hộp thoại của bạn.
<a href="parent.html" data-rel="back">Cancel</a>

Thật không may, tùy chọn này không làm việc trên các thiết bị không hỗ trợ JavaScript. Tùy
chọn cuối cùng sẽ sử dụng JavaScript để gọi trực tiếp phương thức close (đóng lại) của hộp

<! Some page content >

<div data-role="footer">
<p>Copyright notice</p>
</div>

Bạn có thể tùy chỉnh các phần đầu trang và chân trang bằng CSS hoặc bạn có thể sử dụng một số
các thuộc tính data- có sẵn, chẳng hạn như data-position (vị trí-dữ liệu), thiết lập hành vi
định vị của thanh công cụ. Giá trị mặc định với thuộc tính này là inline (nội dòng), nhưng bạn
cũng có thể thiết lập giá trị của nó là fixed (cố định) để duy trì một thanh công cụ, ví dụ như đầu
trang, ở một vị trí cụ thể, ngay cả khi cuộn trang web đó. Một vị trí khác đáng nhắc đến là
fullscreen (toàn màn hình). Chế độ fullscreen giống như fixed, nhưng các thanh công cụ
không xuất hiện trên trang web cho đến khi người dùng bắt đầu tương tác với trang đó. Khi
người dùng tương tác với một trang web, các thanh công cụ xuất hiện, cho phép người dùng
tương tác với chúng, rồi biến mất khi người dùng ngừng tương tác với trang đó (Liệt kê 2). Tùy
chọn này rất có ích khi hiển thị phát lại đoạn video, thư viện ảnh hoặc các thứ tương tự.

Liệt kê 2. Thiết lập một thanh công cụ đầu trang và chân trang ở chế độ toàn màn hình với
khung công tác jQuery Mobile

<div data-role="header" data-
position="fullscreen">
<h1>My Page Title</h1>
</div>

<! Some page content >

<div data-role="footer" data-
position="fullscreen">
<p>Copyright notice</p>

gia tăng về lưu lượng web di động và sự cần thiết với các phiên bản trang web di động, nội dung
theo định dạng ngày càng trở nên quan trọng hơn. Chúng ta có thể không còn chỉ dựa vào những
người dùng của mình ngồi tại bàn làm việc và dành thời gian tương tác với trang web của mình
nữa. Nhưng người dùng đang di chuyển và nội dụng theo định dạng hấp dẫn, đơn giản trở nên
quan trọng hơn bao giờ hết.
Khi định dạng nội dung cho một trang web di động, điều quan trọng cần nhớ là hầu hết các thiết
bị di động có màn hình hẹp. Nói vậy, nhưng vẫn còn có rất nhiều tình huống yêu cầu các lưới
cột. jQuery Mobile gồm có một lưới bố trí mà bạn có thể sử dụng dễ dàng để tạo ra một lưới dữ
liệu thông qua một lớp CSS (Liệt kê 4).

Liệt kê 4. Sử dụng một lưới bố trí để tạo ra các cột

<div class="ui-grid-a">
<div class="ui-block-a">
Left column
</div>
<div class="ui-block-b">
Right column
</div>
</div>

Lớp CSS được sử dụng theo mặc định để tạo ra một lưới từ một nhóm các phần tử HTML là lớp
ui-grid-*. Dấu hoa thị (*) đại diện cho chủ đề bạn chọn để sử dụng với lưới của bạn. (Để biết
thêm thông tin về hệ thống tạo chủ đề, xem phần Tài nguyên .) Bạn có thể tạo ra bao nhiêu cột
tùy ý bạn, nhưng tôi khuyên bạn nên sử dụng chỉ nhiều nhất là hai cột thôi và cũng chỉ những khi
cần thiết.
Một cách tiện dụng khác để định dạng nội dung là chỉ hiển thị một phần của nội dung, cung cấp
cho người dùng một tổng quan và tùy chọn để đọc thêm. Do hầu hết các thiết bị di động có một
màn hình rất nhỏ, nên điều quan trọng là giữ cho chiều dài trang tương đối ngắn và đừng lạc đề.
Các khối nội dung có khả năng xếp gọn lại được cung cấp một cách rất tốt để xử lý chức năng

thu nhỏ hoặc các bong bóng đếm và các danh sách gồm có một thanh bộ lọc tìm kiếm. Một kiểu
danh sách được sử dụng phổ biến là danh sách liên kết cơ bản. Để tạo ra một danh sách liên kết
cơ bản, bạn chỉ cần tạo một danh sách không theo thứ tự HTML tiêu chuẩn, thêm một thuộc tính
data-role và gán cho nó một giá trị là listview (Liệt kê 6).

Liệt kê 6. Tạo một danh sách liên kết cơ bản với khung công tác jQuery Mobile

<ul data-role="listview">
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
</ul>

Để tạo một danh sách đánh số, bạn sẽ sử dụng mã tương tự như trong Liệt kê 6, chỉ cần thay đổi
ul thành ol để chuyển đổi nó thành một danh sách có thứ tự.
Về đầu trang
Nâng cao các danh sách
Một khi bạn hiểu để tạo ra các danh sách cơ bản đơn giản đến mức nào, bạn có thể tự thấy muốn
có thêm nhiều tùy chọn hơn. Một tùy chọn để cung cấp chức năng bổ sung cho một danh sách là
tùy chọn có tên là split button list (danh sách nút ấn chia tách). Một danh sách nút ấn chia tách
cho phép bạn cung cấp hai tùy chọn có thể nhấn được trong cùng một mục danh sách. Chức năng
này rất có ích đối với các mục danh sách gồm có một liên kết, nói ví dụ, cho các chi tiết riêng về
mục cụ thể đó nhưng cũng có thể cần phải bao gồm các hành động khác có liên quan đến mục
đó, chẳng hạn như một nút ấn để mua mục này hoặc chia sẻ nó trên một mạng xã hội. Việc tạo
một danh sách nút ấn chia tách rất đơn giản: Bạn thêm hai thẻ neo cạnh nhau trong mục danh
sách sử dụng listview data-role (Liệt kê 7).

Liệt kê 7. Tạo một danh sách nút ấn chia tách với khung công tác jQuery Mobile

<ul data-role="listview" data-split-icon="gear">
<li>

Liệt kê 8. Thêm các thanh chia danh sách vào một listview

<ul data-role="listview">
<li data-role="list-divider">Alternative</li>
<li><a href="#">Nirvana</a></li>
<li data-role="list-divider">Rock and Roll</li>

<li><a href="#">Jimi Hendrix</a></li>
<li><a href="#">Led Zeppelin</a></li>
</ul>

Việc sử dụng giá trị của thuộc tính data-role là list-divider (thanh chia-danh sách) cung
cấp một kiểu dáng trực quan để phân biệt giữa các mục danh sách này với các các mục danh sách
khác.
Bạn cũng có thể tạo ra các kiểu dáng khác nhau bằng cách sử dụng các biểu tượng, các hình thu
nhỏ và các bong bóng đếm. Bạn có thể thêm các bong bóng đếm vào một mục danh sách bằng
cách sử dụng lớp ul-li-count (Liệt kê 9).

Liệt kê 9. Thêm các bong bóng đếm vào các mục danh sách của jQuery Mobile

<ul data-role="listview">
<li>
<a href="inbox.html">Inbox
<span class="ui-li-count">12</span>
</a>
</li>
</ul>

Bạn có thể thêm các hình thu nhỏ cũng giống như bạn thêm một hình ảnh vào một trang HTML.
Chỉ cần thêm một phần tử neo tới một mục danh sách, thêm một hình ảnh sẽ hoạt động như hình

<img src="images/album-cover.jpg" class="ui-
li-icon" />
Led Zeppelin Album
</a>
</li>
<li>
<a href="hendrix.html">
<img src="images/album-cover.jpg" class="ui-
li-icon" />
Jimi Hendrix Album
</a>
</li>
</ul>

Lớp ul-li-icon hạn chế kích cỡ hình ảnh có chiều rộng và chiều cao tối đa là 40px (40 điểm
ảnh) và bố trí đúng hình ảnh trong các mục danh sách.
Về đầu trang
Lọc tìm kiếm
Ngoài tất cả tính năng nâng cao rất thú vị của danh sách vừa mới được trình bày, tính năng nâng
cao cuối cùng mang lại các cải tiến ấn tượng về tính tiện dụng cho các danh sách dài. Đôi khi,
đúng là không thể giảm tất cả nội dung cần phải xuất hiện trên một trang web di động. Khi xảy ra
trường hợp này và bạn có một danh sách dài, gần như không thể dùng được, thanh bộ lọc tìm
kiếm là một cách tuyệt vời để xử lý vấn đề này. May mắn thay, không mất nhiều nỗ lực để thêm
một thanh bộ lọc tìm kiếm vào một danh sách với jQuery Mobile. Chỉ cần thêm thuộc tính data-
filter (bộ lọc-dữ liệu) vào danh sách của bạn và gán cho nó giá trị là true (Liệt kê 12).

Liệt kê 12. Thêm một thanh bộ lọc tìm kiếm vào một danh sách jQuery Mobile

<ul data-role="listview" data-filter="true">
<li><a href="#">Chris A.</a></li>

Các phần tử biểu mẫu
Với jQuery Mobile, tất cả các phần tử biểu mẫu nguyên gốc được chuyển đổi thành các nút điều
khiển tùy chỉnh khi trình duyệt hỗ trợ nó. Các nút điều khiển tùy chỉnh này là phiên bản nâng cao
của các phần tử biểu mẫu nguyên gốc cũng như một số phần tử biểu mẫu đặc biệt được tạo riêng
bởi khung công tác. May mắn thay, tất cả các phần tử biểu mẫu ấy tự hạ cấp khi gặp các trình
duyệt không hỗ trợ chúng, vì vậy không phải quan tâm đến tính tiện dụng của chúng. Các trường
nhập văn bản với jQuery Mobile về cơ bản là giống như các trường nhập văn bản nguyên gốc;
tuy nhiên, bạn có thể sử dụng các kiểu trường nhập HTML5 mới như email, tel và number. Để
tạo ra bất kỳ phần tử biểu mẫu nào trong số này, bạn chỉ cần thiết lập kiểu trường nhập là một
trong các giá trị đã đề cập. Để có một danh sách đầy đủ về các kiểu trường nhập HTML5, xem
phần Tài nguyên .
Ngoài các kiểu trường nhập HTML5 được hỗ trợ, bạn có thể tạo ra một thanh trượt. Một thanh
trượt gồm có một tay gạt và đường rãnh mà tay gạt này trượt trên đó. Giá trị của thanh trượt
được lưu trữ khi di chuyển tay gạt và sau đó giá trị đó được gửi đi khi biểu mẫu được gửi đi. Để
tạo một thanh trượt, bạn bắt đầu với một trường nhập HTML cơ bản, nhưng bạn định nghĩa
thuộc tính type là range (phạm vi). Sau đó, bạn thêm các thuộc tính min (tối thiểu), max (tối đa)
và value (giá trị) và định nghĩa một giá trị mặc định cho thuộc tính value, xác định vị trí nơi sẽ
đặt tay gạt trên thanh trượt. Liệt kê 14 cho thấy một ví dụ về một phần tử thanh trượt có một giá
trị max là 10, giá trị min là 0 và value mặc định là 2.

Liệt kê 14. Tạo một phần tử thanh trượt khi sử dụng khung jQuery Mobile

<div data-role="fieldcontain">
<label for="slider">My slider:</label>
<input type="range" name="slider"
id="slider" value="2" min="0" max="10" />
</div>

Kiểu trường nhập tùy chỉnh cuối cùng là một công tắc lật (flip), đã phổ biến trên các thiết bị di
động. Đó là một phần tử tuyệt vời để xử lý các kiểu bật/tắt (on/off) hoặc đúng/sai (true/false) của