Thực hiện thiết kế đáp ứng bằng jQuery Mobile và CSS3 ppt

Thực hiện thiết kế đáp ứng bằng jQuery Mobile và
CSS3
Khung công tác jQuery Mobile là một thư viện JavaScript mà bạn có thể sử dụng để dễ dàng tạo
ra một phiên bản di động của một trang web, chuyển đổi các trang web hiện có thành các trang
web và các ứng dụng thân thiện với cảm ứng. Khung công tác jQuery Mobile được cho là sẽ thay
đổi cách truy cập các ứng dụng di động và cách phân phối trên các thiết bị di động và máy tính
bảng nhờ cho phép người dùng kết nối trực tiếp đến các ứng dụng thân thiện với cảm ứng thông
qua một trình duyệt web. Có những tùy chọn khác để phát triển di động, nhưng khác với cách
tiếp cận mà jQuery Mobile đang làm ở chỗ chúng đang nhằm vào nhiều nền tảng di động khác
nhau.
Tỷ lệ chọn dùng các thiết bị điện thoại thông minh và máy tính bảng đang tăng vọt và khung
công tác jQuery Mobile đang giúp các nhà phát triển đáp ứng yêu cầu ngày càng tăng về các trải
nghiệm web di động. Việc cung cấp các trải nghiệm web di động đòi hỏi một bộ các kỹ năng mới
từ các nhà phát triển và các nhà thiết kế web. Vào năm 2010, Nielsen đã dự đoán rằng cứ một
trong hai người Mỹ sẽ có một máy điện thoại thông minh (xem Tài nguyên để có một liên kết
đến blog này), đó là một sự gia tăng rất lớn so với chỉ có một máy trên 10 người vào năm 2008
và vào tháng 6 năm 2011, AMI-Partners đã dự báo rằng "việc chọn dùng máy tính bảng giữa các
doanh nghiệp có từ 1 đến 1.000 nhân viên sẽ tăng thêm 1.000% vào năm 2015 "(xem Tài nguyên
để có một liên kết đến dự báo đầy đủ). Với sự gia tăng về tỷ lệ người chọn dùng như vậy, sẽ có
một nhu cầu mạnh mẽ đối với các nhà phát triển và các nhà thiết kế web, những người có thể tạo
ra những trải nghiệm web di động. Khung công tác jQuery Mobile là một giải pháp tuyệt vời để
tạo ra những trải nghiệm web di động, vì nó làm tăng tốc độ có thể tạo ra các trang web di động
và hỗ trợ một loạt các nền tảng di động.
Các cạm bẫy và các giải pháp
Khung công tác jQuery Mobile là một giải pháp rất tốt để tạo ra một phiên bản di động hoặc máy
tính bảng của các trang web của bạn, nhưng nó hoàn toàn dựa trên nội dung của một trang web
được nối thêm các thuộc tính data-role (vai trò-dữ liệu) nhất định. Trong rất ít trường hợp, có thể
không có khả năng nối những thuộc tính này vào đánh dấu HTML của bạn và có thể đòi hỏi bạn
phải tạo một trang web di động riêng biệt. Tuy nhiên, bài này cho bạn thấy, với tầm nhìn xa hơn
và có kế hoạch hơn một chút, cách có thể sử dụng một sự kết hợp của khung công tác jQuery
Mobile và các truy vấn phương tiện của phiên bản CSS 3 (Cascading Style Sheets – Các bản

định kiểu nhiều tầng) để tạo ra một thiết kế đáp ứng và xác định cách bố trí đáp ứng lại với thiết
bị của người dùng. Mục đích là tạo ra một trang web duy nhất, có thể đáp ứng động với các thiết
bị của người dùng bằng cách hiển thị một cách bố trí thích hợp với độ phân giải màn hình của
các thiết bị.
Một thiết kế đáp ứng là một thiết kế sẽ đáp ứng với một thiết bị của người dùng dựa trên độ phân
giải màn hình của nó. Điều này có nghĩa rằng bất kể người dùng đang xem một trang web trên
một máy tính bảng, một máy điện thoại di động hay máy tính để bàn thì thiết kế này sẽ đáp ứng
một cách thích hợp với thiết bị đó bằng cách hiển thị một bố trí cụ thể dựa trên độ phân giải màn
hình của thiết bị đó. Mặc dù khung công tác jQuery Mobile cung cấp một cách để nhanh chóng
và dễ dàng tạo ra một phiên bản di động của một trang web, hiện nay nó không (và rất có thể sẽ
không bao giờ) cung cấp một biện pháp có sẵn để đáp ứng động với thiết bị của người dùng dựa
vào độ phân giải màn hình của thiết bị. Trong thực tế, trang web jQuery Mobile nói rằng tính
năng Các lớp của trình trợ giúp truy vấn phương tiện (Media Query Helper Classes) có sẵn từ
trước đã thành lạc hậu trong bản beta và được loại bỏ ra khỏi phiên bản mới nhất. Các nhà tạo ra
khung công tác này thực tế đang khuyến cáo sử dụng các truy vấn phương tiện của CSS3 để thay
thế. Với sự kết hợp của các truy vấn phương tiện CSS3 và khung công tác jQuery Mobile, có thể
đạt được một thiết kế đáp ứng, thích hợp với các môi trường máy tính bảng, điện thoại di động
và máy tính để bàn. Trên thực tế tài liệu hướng dẫn khung công tác sử dụng một sự kết hợp
khung công tác jQuery Mobile và các truy vấn phương tiện CSS3 để thu được thiết kế đáp ứng
riêng của nó. Trên thực tế tài liệu hướng dẫn này khá giống với ví dụ mà bạn sẽ tạo ra trong bài
này về cách nó đáp ứng lại với các độ phân giải màn hình khác nhau.
CSS đã bao gồm các biện pháp mã hóa liên quan đến thiết bị kể từ phiên bản 2.1 thông qua việc
sử dụng các kiểu phương tiện. Một cách phổ biến để sử dụng các kiểu phương tiện là định nghĩa
một bản định kiểu riêng biệt cho một màn hình máy tính để bàn khác với một bản định kiểu cho
một phiên bản in của trang web. CSS3 đã đưa những khái niệm về các biện pháp mã hóa liên
quan đến thiết bị tiến một bước xa hơn bằng việc giới thiệu các truy vấn phương tiện. Có thể sử
dụng các truy vấn phương tiện để xác định kiểu thiết bị đang tương tác với trang web của bạn
cũng như cho phép các nhà phát triển xác định các đặc tính vật lý của thiết bị đang xem các trang
web của bạn. Rõ ràng là, các truy vấn phương tiện đã trở thành một cách phổ biến để phân phối
bản định kiểu đặc trưng-thiết bị, như bạn có thể thấy trong Liệt kê 1, phân phối một bản định

kiểu đặc trưng cho các thiết bị di động và máy tính bảng dựa trên độ phân giải màn hình.

Liệt kê 1. Sử dụng các truy vấn phương tiện để cung cấp các bản định kiểu đặc trưng-thiết
bị

<link
rel="stylesheet"
type="text/css"
media="screen and (max-device-width: 799px)"
href="mobile-tablet.css" />

Thuộc tính media (phương tiện) trong ví dụ này chứa một giá trị kiểu phương tiện được thiết lập
là screen (màn hình) và một truy vấn phương tiện (được bọc trong dấu ngoặc đơn). Truy vấn
phương tiện đặc biệt này kiểm tra để xem liệu độ phân giải màn hình của thiết bị hiện tại của
người dùng có thấp hơn hoặc bằng 799px (điểm ảnh) không. Nếu đúng như vậy, bản định kiểu
máy di động/máy tính bảng này sẽ được phân phối, nếu không, bản định kiểu này sẽ không được
phân phối. Bạn có thể bao gồm nhiều liên kết bản định kiểu trong một trang web đơn lẻ, mỗi bản
định kiểu có truy vấn phương tiện riêng của mình để làm cho trang của bạn khác nhau dựa trên
các độ phân giải khác nhau như bạn mong muốn. Số lượng các bản định kiểu dựa vào độ phân
giải phổ biến nhất mà tôi đã nhận thấy có lẽ là ba — một bản cho các thiết bị di động và máy tính
bảng, một bản cho màn hình máy tính để bàn có độ phân giải thấp hơn và một bản cho màn hình
máy tính để bàn có độ phân giải cao hơn. Nếu bạn đã sử dụng mã từ Liệt kê 1, tất cả các thiết bị
có độ phân giải thấp hơn 799px sẽ sử dụng bản định kiểu này, vì vậy đây là một ví dụ hoàn hảo
về cách bạn có thể nhằm đến các thiết bị di động và máy tính bảng với một bản định kiểu và máy
tính để bàn với một bản định kiểu khác.
Cũng có thể sử dụng nhiều truy vấn phương tiện trực tiếp trong CSS của chỉ một bản định kiểu
đơn lẻ. Liệt kê 2 cho thấy một ví dụ về một lớp CSS được sử dụng cho một tập các mục dẫn
hướng, mà bạn sẽ tạo ra sau trong bài này. Khi độ phân giải màn hình của thiết bị rộng tới 800px
hoặc cao hơn, chiều rộng của ô dẫn hướng được thiết lập là 300px, khi độ phân giải màn hình là
799px hoặc thấp hơn, chiều rộng ô dẫn hướng được thiết lập là 100%.

Liệt kê 2. Sử dụng các truy vấn phương tiện để phân phối CSS đặc trưng-thiết bị

@media all and (min-width: 800px) {
#nav {
width: 300px;
}
}

@media all and (max-width: 799px) {
#nav {
width: 100%;
}
}

Một điều thú vị về các truy vấn phương tiện là ở chỗ nếu bạn xem một trang web trong một trình
duyệt web hiện đại, gồm có CSS từ Liệt kê 2 kết hợp với phần tử HTML liên quan, thì trang web
này cũng sẽ thực sự đáp ứng với kích cỡ của trình duyệt. Vì vậy, nếu trình duyệt được thiết lập
tới một chiều rộng là 799px hoặc thấp hơn, chiều rộng của ô dẫn hướng sẽ là 100%; nếu trình
duyệt đã được định cỡ tới chiều rộng là 800px hoặc cao hơn, chiều rộng của ô dẫn hướng sẽ
được định cỡ tới 300px.
Về đầu trang
Trở thành đáp ứng
Các truy vấn phương tiện là một kiểu câu lệnh có điều kiện để xác định CSS nào được áp dụng
cho một trang web. Cùng với khung công tác jQuery Mobile, bạn có thể tạo ra một số trang web
di động mạnh mẽ trong khi vẫn duy trì một cách bố trí cho máy tính để bàn độc lập. Có thể sử
dụng chính khung công tác jQuery Mobile để nhanh chóng và dễ dàng tạo ra các trang web thân
thiện với cảm ứng. Khung công tác này có một loạt các thành phần làm cho nó dễ dàng thêm vào
các nút ấn, các thanh công cụ, các hộp thoại, các khung nhìn danh sách và nhiều hơn nữa. Tuy
nhiên, khi nói đến xử lý bố trí trang web, CSS vẫn là một ngôn ngữ cần dùng đến. May mắn

thay, như được trình bày ở phần trước trong bài này, CSS3 đã giới thiệu các truy vấn phương
tiện, cung cấp cho các nhà phát triển khả năng để thay đổi cách bố trí trang web dựa trên độ phân
giải của thiết bị.
Kết hợp với khung công tác jQuery Mobile, bạn có thể tạo ra một số cách bố trí đáp ứng. Với
mục đích của bài này, tôi sử dụng một ví dụ đơn giản gồm có một tập các mục dẫn hướng và một
lưới. Các mục dẫn hướng và lưới sẽ được bố trí theo cách khác nhau dựa trên độ phân giải màn
hình. Điều đầu tiên mà bạn cần làm trước khi khung jQuery Mobile sẽ chạy trong trang web của
bạn là nhúng các tệp JavaScript và CSS kết hợp với khung công tác jQuery Mobile (xem Liệt kê
3).

Liệt kê 3. Nhúng khung công tác jQuery Mobile

<link rel="stylesheet"
href=" />
<script src="
<script src=" />1.0b3.min.js"></script>

Khung công tác jQuery Mobile gồm có một thành phần listview mà bạn sẽ sử dụng để hiển thị
các mục dẫn hướng của mình. Để tạo một khung nhìn danh sách (list view), chỉ cần thêm một
thuộc tính data-role có giá trị là listview vào phần tử ul của danh sách dẫn hướng của bạn.
Khung công tác jQuery Mobile cũng có một số công cụ có ích cho phép bạn tạo các bố trí lưới
nhiều cột. Trong Liệt kê 4, tôi đã kèm theo một lưới hai hàng và ba cột, được xây dựng bằng
cách sử dụng một sự kết hợp các lớp ui-grid-b, ui-block-a và ui-bar. Để tìm hiểu thêm về
các thành phần có sẵn của khung jQuery Mobile, xem phần Tài nguyên.

Liệt kê 4. Thêm một listview và lưới vào vùng nội dung

<div data-role="content">
<ul id="nav" data-role="listview" data-inset="true">
<li><a href="#">Nav item</a></li>

<li><a href="#">Nav item</a></li>
<li><a href="#">Nav item</a></li>
</ul>

<div id="grid" class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
</div>
</div>

Các chữ cái được nối vào cuối của một số tên lớp: Đây là những chữ cái liên quan đến chủ đề mà
khung công tác jQuery Mobile sử dụng để xác định chủ đề nào được sử dụng để biểu thị một
thành phần. Để tìm hiểu thêm về tạo chủ đề với khung công tác jQuery Mobile, hãy đọc bài báo
liên quan trong phần Tài nguyên.
Bây giờ bạn đã tạo ra trang web của mình, bạn có thể sử dụng CSS3 để tạo ra một bố trí đáp ứng,
sẽ điều chỉnh động dựa trên độ phân giải màn hình của người dùng. Làm việc này đơn giản: Chỉ
cần sử dụng các truy vấn phương tiện mà bạn đã học ở phần trước trong bài này để xác định độ
phân giải màn hình và sau đó viết CSS để xử lý cụ thể các kịch bản khác nhau. Liệt kê 5 sử dụng
một truy vấn phương tiện để kiểm tra độ phân giải màn hình là 800px hoặc cao hơn và một truy
vấn phương tiện khác để kiểm tra độ phân giải màn hình là 799px hoặc thấp hơn. Truy vấn
phương tiện đầu tiên thả nổi ô dẫn hướng sang bên trái và thả nổi lưới sang bên phải, sao cho
chúng tự đặt mình bên cạnh nhau để lấp đầy một vùng rộng lớn hơn có sẵn trên một màn hình có
độ phân giải cao hơn. Truy vấn phương tiện thứ hai không có phao và thiết lập chiều rộng ô dẫn
hướng và lưới đến 100%, cuối cùng sẽ đặt ô dẫn hướng bên trên lưới để thích ứng với các độ
phân giải màn hình thấp hơn cho các thiết bị như các máy điện thoại thông minh và các máy tính
bảng.

Liệt kê 5. Sử dụng các truy vấn phương tiện để tạo một bố trí đáp ứng

@media all and (min-width: 800px) {
#nav {
width: 300px;
float: left;
margin-right: 20px;
}
#grid {
width: 450px;
float: left;
}
}

@media all and (max-width: 799px) {
#nav {
width: 100%;
}
#grid {
width: 100%;
}
}

Các thiết bị có độ phân giải màn hình cao hơn sẽ hiển thị một cách bố trí cạnh nhau tương tự như
Hình 1.

Hình 1. Một thiết bị có độ phân giải cao hơn biểu thị trang web như thế nào

Các thiết bị có độ phân giải màn hình thấp hơn hiển thị một cách bố trí cạnh nhau tương tự như

Hình 2.

Hình 2. Một thiết bị có độ phân giải thấp hơn biểu thị trang web như thế nào

Tất nhiên, đây là một ví dụ cực kỳ đơn giản, nhưng nó cho thấy cách để dễ dàng tạo ra một bố trí
đáp ứng bằng cách sử dụng khung công tác jQuery Mobile và CSS3. Nhiều khả năng rất hấp dẫn
và đây chỉ là một bước để giúp bạn bắt đầu. Bằng cách thêm một vài thuộc tính data-role đơn
giản vào HTML của mình, bạn có thể tạo ra một phiên bản di động của các trang web của mình,
bằng cách kèm theo truy vấn phương tiện CSS3, bạn có thể cho phép thiết kế của mình đáp ứng
với thiết bị của người dùng dựa trên độ phân giải màn hình. Bạn thậm chí có thể thay đổi chủ đề
của jQuery Mobile khi có ai đó xem các trang web của bạn trên một máy tính để bàn sao cho các
trang web đó không trông giống như một trang web di động ở các độ phân giải cao hơn. Tất cả
mọi thứ mà bạn cần làm là kiểm tra độ phân giải cao hơn bằng một truy vấn phương tiện, rồi
thay đổi CSS cho những thành phần jQuery Mobile đó để ghi đè lên các kiểu dáng mặc định tạo
ra chủ đề đó.