Sử dụng jQueryMobile để phát triển web cho thiết bị di động

Giới thiệu

jQuery Mobile là một khung giao diên người dùng trên nền tảng jQuery, nó làm việc trên hầu hết các điện thoại, máy tính bảng, máy đọc sách và nền tảng máy tính để bàn. Được xây dựng để có thể dễ dàng tiếp cần một cách phổ dụng, tuân theo xu hướng thiết kế web đáp ứng (responsive web design). Sử dụng cấu trúc ngôn ngữ HTML5 dễ dàng tìm hiểu, và là một API mạnh mẽ có thể dễ dàng tùy chỉnh sâu trong thư viện.
 

Trang và hộp thoại (Pages & Dialogs)

Trong một trang jQuery Mobile bao gồm một phần tử với thuộc tính data-role="page". Bất cứ phần tử HTML nào cũng có thể sử dụng trong phạm vi chứa của "page", nhưng trong cấu trúc trang của jQuery Mobile còn có các phần tử div con với các thuộc tính data-roles là "header", "content", "footer". Đây là những yêu cầu cơ bản nhất của một trang chỉ, nó bao bọc trang và hỗ trợ định vị, các thành phần khác có thể tùy chỉnh.
 
Trang còn có một kiểu hiện thị dạng hộp thoại (dialog), nó tạo ra một trang hiển theo cách phủ đè lên phía trên. Để thiết lập một trang tiêu chuẩn thể hiện theo dạng dialog, thêm thuộc tính data-rel="dialog" vào link. Trang sẽ chuyển thành dạng hộp thoại khi link được lựa chọn.
 

Điều hướng và chuyển tiếp AJAX (AJAX Navigation & Transitions)

 jQuery Mobile bao gồm một hệ thống điều hướng AJAX, hỗ trợ rất nhiều thuộc tính chuyển đổi trang một cách tự động bằng cách thay thế các link tiêu chuẩn, các form và đưa chúng vào trong một truy vấn Ajax. Nút back cũng được hỗ trợ đầy đủ, là chức năng tìm nạp trước và lưu giữ sẵn, tự động thêm vào và các trang kịch bản luôn sẵn sàng để sử dụng.
 
 Bất cứ khi nào một liên kết được chọn, hoặc một form được gửi đi, sự kiện đó sẽ được tự động chặn bới hệ thống điều hướng Ajax và sử dụng để phát hành một yêu cầu Ajax dựa trên liên kết truy vấn (href) hoặc hành động của form thay cho quá trình tải lại trang. Trong khi chờ đợi sự phẩn hồi của Ajax, một hình ảnh loading sẽ được hiện ra.
 
 Khi một yêu cầu trang được tải, jQuery Mobile phân tích tài liệu với mỗi phần tử có thuộc tính data-role="page" và thêm mã vào trong mô hình DOM của trang nguyên mẫu. Tiếp đó, bất cứ thành phần tiện ích (widget) được thêm vào trang sẽ được áp dụng thêm tất cả các mẫu và phương thức xử lý. Phần còn lại trong trang sẽ được loại bỏ như mỗ số kịch bản, kiểu mẫu hoặc thông tin khác sẽ không được thêm vào. Framework cũng sẽ lưu ý các tiêu đề trong trang để cập nhật tiêu đề khi một trang được chuyển sang trang thái xem
 
Bây giờ khi mà trang được truy vấn trong mô hình DOM và tăng cường, nó sẽ sinh động hơn khi xem với sự chuyển tiếp. Theo mặc định framework sẽ áp dụng hiệu ứng chuyển tiếp "fade". Để thiết lập hiệu ứng chuyển tiếp thùy chỉnh, ta cần thêm thuộc tính data-transition vào liên kết (link)
 

(Nội dung và thành phần tiện ích) Content & Widgets

Bên trong khung nội dung của bạn, bạn có thể thêm bất cứ phần tử HTML nguyên mẫu nào - thẻ tiêu đề, danh sách hay các khối văn bản. Bạn có thể tùy ý viết mã css để tạo ra những mẫu thiết kế riêng bằng cách thêm stylesheet của bạn vào phần header của trang phía sau jQuery Mobile stylesheet.
 
jQuery Mobile bao gồm nhiều tiện ích giao diện cảm ứng thân thiện: buttons, form elements, collapsibles, accordions, popups, dialogs, responsive tables...và còn nhiều hơn nữa. Để có hiệu quả tốt hơn, hay lựa chọn tải về những phiên bản mà bạn cần.
 

Nút (Buttons)

Có một số cách để tạo nút bấm (buttons), nhưng hãy chuyển liên kết (link) thành nút bấm (button) để dễ click hơn. Đầu tiên hay tạo một liên kết (link) và thêm thuộc tính data-role="button". Bạn cũng có thể thêm icon với thuộc tính data-icon và có thể tùy chọn vị trí đặt icon đó với thuộc tính data-iconpos.
 
 
 

Lưới xem (Listviews)

jQuery Mobile bao gồm đa dạng cách thiết lập lưới xem (listview) bằng cách thêm thuộc tính data-role="listview" vào danh sách (list) khi viết mã. Dưới đây là một danh sách liên kết đơn giản kiểu là một listview. Chúng ta sẽ làm nó giống như một "inset module" bằng cách thêm thuộc tính data-inset="true" , và thêm thuộc tính data-filter="true" để có thể tìm kiếm lọc dữ liệu.
 
 

Thành phần form (Form elements)

Bộ khung này (jQuery Mobile framework) bao gồm đây đủ các thành phần của form và chúng tự động thêm chức năng cảm ứng thân thiện. Dưới đây có một thanh trượt (slider) với đầu vào theo kiểu phạm vi,  xây dựng bằng HTML5, không cần thuộc tính data-role. Hãy chắc rằng đã đặt chúng trong một  form và luôn kết hợp đúng đắn mỗi nhãn (lable) với một phần tử của form.
 
 

Thiết kế đáp ứng (Responsive Design)

jQuery Mobile đã luôn được thiết kế để làm việc với xu hướng thiết kế đáp ứng (responsive desgin), tài liệu và hình thức của chúng tôi đã có một số phần tử đáp ứng ngay từ ban đầu. Toàn bộ các thành phần bổ sung được xây dựng để 100% là mềm dẻo ở chiều rộng, và có thể đặt dễ dàng trong một mấu thiết kế đáp ứng (responsive) mà bạn lựa chọn để xây dựng.
 
Thư viện cũng ba gồm một số chức năng được thiết kế đáp ứng như các lưới (grids), bảng (table) và khung trượt (sliding panels)
 

Chủ đề (Theming)

jQuery Mobile có một bộ khung chủ đề (theme) mạnh mẽ, hỗ trợ hơn 26 kiểu thanh công cụ, nội dung và các nút nhiều màu sắc, gọi là "khung màu". Thêm thuộc tính data-theme="e" vào bất cứ bộ chức năng nào vào trong trang: Trang, tiêu đề, danh sách, thanh trượt, nút... sẽ chuyển chúng sang màu vàng. Hãy thử với ký tự khác từ "a" đến "e" trong danh sách chủ đề mặc định để hòa trộn và phối hợp mẫu của bạn.
 
Có một mẹo nhỏ rất hay, đó là thêm chủ đề vào trang (page) và xem các bộ chức năng trong đó kế thừa chủ đề như thế nào (Phần đầu và cuối trang không kế thừa, chúng mặc định ở mẫu "a")
 
 
Bạn có thể sử dụng ThemeRoller để tạo cho mình một bộ giao diện tùy chỉnh bằng cách kéo thả rất tiện lợi.
 
 

Related Post


Tạo Accordion Menu đơn giản với CSS & jQuery
Monday, September 9, 2013
Accordion Menu hiện nay khá phổ biến với thiết kế web hiện tại, vì ngoài việc là một menu, nó có thể tùy biến để hiện thị nôi dung, hình ảnh một cách rất chuyên nghiệp... và rất tiết kiệm không gian khi hiển thị trên web. Hiện tại bạn chỉ cần gõ Accordion Menu là ra rất nhiều plugin, tuy nhiên bạn có thể xây dựng riêng cho mình một Accordion Menu một cách rất đơn giản và gọn nhẹ. Bài viết này sẽ hướng dẫn các bạn làm điều đó.
Tổng hợp các jQuery plugin về thanh cuộn
Tuesday, September 3, 2013
Thanh cuộn Scrollbar dùng để cuộn nội dung trang web khi vượt quá chiều cao cho phép, tuy nhiên trong một vài trường hợp style mặc định không phù hợp với mẫu thiết kế chúng ta đang sử dụng, và việc chỉnh sửa style của scrollbar không đơn giản như các phần tử HTML khác. Để giải quyết vấn đề này, các bạn hãy tham khảo một số jQuery plugin về thanh cuộn sau...  
Search

Đăng ký nhận bài mới


Category

Blog Archive