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

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=" 1.0b3.min.js"> 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 Nav item Nav item Nav item A B C A B C 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ủ đề đó.