Giới thiệu về jQuery Mobile

Giới thiệu về jQuery Mobile Giới thiệu 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. Để làm theo cùng với bài này, 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. Về đầu trang jQuery Mobile 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í. Mặc dù jQuery Mobile vẫn đang là bản Alpha, nhưng đã có một số trình diễn và tài liệu hướng dẫn. Chúng tôi đề nghị bạn nên xem lại tài liệu hướng dẫn và các trình diễn trong phần Tài nguyên và xem mã nguồn trình diễn trong phần Tải về. Tại thời điểm này viết bài này, khung công tác di động jQuery là một phiên bản Alpha 2 (v1.0a2). Mã đang ở dạng dự thảo và có thể thay đổi. Tuy nhiên, khung công tác hiện có là khá chắc chắn. Với một tập các thành phần ấn tượng có sẵn trong bản phát hành alpha, jQuery Mobile hứa hẹn sẽ là một khung công tác và bộ công cụ lớn về phát triển ứng dụng web di động. Các tính năng cơ bản của jQuery Mobile gồm: 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ể. Tính dễ dùng 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 (xem phần Tài nguyên), 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. Về đầu trang Hỗ trợ trình duyệt 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 (nguồn: Wikipedia):  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). Xem ma trận trình duyệt được hỗ trợ trên các trang web jQuery Mobile để biết thêm thông tin (xem phần Tài nguyên). Về đầu trang Tóm tắt các thành phần giao diện người dùng jQuery 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. Hình 1. Các phần tử giao diện người dùng jQuery Mobile (vào tháng 8 năm 2010) 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. Về đầu trang $.mobile và các sự kiện và các phương thức được hỗ trợ Đối tượng jQuery của JavaScript cũng liên quan đến ký hiệu $. Khung công tác jQuery Mobile mở rộng lõi jQuery bằng các trình cắm thêm di động, gồm mobile hoặc $.mobile có định nghĩa một số sự kiện và phương thức. Một số phương thức do $.mobile trưng ra được mô tả dưới đây. Bảng 1. Phương thức do $.mobile trưng ra Phương thức Cách sử dụng $.mobile.changePage Để thay đổi bằng lập trình từ trang này sang trang khác. Ví dụ, để chuyển đến trang weblog.php khi sử dụng một hiệu ứng chuyển tiếp slide (trượt), sử dụng $.mobile.changePage("weblog.php", "slide"). $.mobile.pageLoading Để hiển thị hoặc ẩn thông báo nạp trang. Ví dụ, để ẩn thông báo, sử dụng $.mobile.pageLoading(true). $.mobile.silentScroll Để cuộn đến một vị trí Y cụ thể mà không tạo ra các sự kiện cuộn. Ví dụ, để cuộn đến vị trí Y 50, sử dụng $.mobile.silentScroll(100). $.mobile.addResolutionBreakpoints jQuery Mobile đã định nghĩa một số điểm ngắt cho các lớp min/max. Gọi phương thức này để bổ sung các điểm ngắt. Ví dụ, để bổ sung lớp min/max cho các chiều rộng điểm ảnh 800, sử dụng $.mobile.addResolutionBreakpoints(800). $.mobile.activePage Đề cập đến trang đang hoạt động hiện nay. Có một số sự kiện mà bạn có thể kết buộc chúng khi sử dụng phương thức bind() hoặc live(), chẳng hạn như khởi tạo JQuery Mobile, sự kiện cảm ứng, thay đổi định hướng, các sự kiện cuộn, các sự kiện hiện/ ẩn trang, các sự kiện khởi tạo-trang và các sự kiện hình ảnh động. Ví dụ, các sự kiện cảm ứng gồm tap (chạm nhẹ), taphold (chạm và giữ) và các sự kiện vuốt khác nhau. Các sự kiện Scroll (Cuộn) gồm scrollstart (khởi động cuộn) và scrollstop (dừng cuộn). Các sự kiện Page (Trang) cho phép bạn nhận được các thông báo: trước khi tạo một trang, khi một trang được tạo ra, ngay trước khi trang được hiển thị hoặc ẩn đi và khi trang được hiển thị và ẩn đi. Liệt kê 1 cho thấy một ví dụ về kết buộc một sự kiện cụ thể khi jQuery Mobile bắt đầu thực hiện. Liệt kê 1. Kết buộc với sự kiện mobileinit $(document).bind("mobileinit", function(){ //apply overrides here }); Sự kiện trên cho phép bạn ghi đè lên các giá trị mặc định khi jQuery Mobile khởi động. Một số các giá trị thiết lập có thể bị ghi đè, chẳng hạn như:  LoadingMessage - Thiết lập văn bản mặc định xuất hiện khi một trang đang nạp.  defaultTransition - Thiết lập hiệu ứng chuyển tiếp mặc định cho các thay đổi trang có sử dụng Ajax. Có nhiều tham số cấu hình nữa mà bạn có thể ghi đè khi cần. Xem tài liệu hướng dẫn jQuery Mobile (xem phần Tài nguyên) hoặc mã nguồn (xem phần Tải về), để biết thêm thông tin. Bạn cũng có thể kết buộc với các sự kiện khác cho phép bạn tạo các ứng dụng động dựa trên các sự kiện touch (cảm ứng) và page (trang). Về đầu trang 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. Bảng 2. Các thuộc tính data-* cho các thành phần giao diện người dùng 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 ) Phần thân nội dung (content) Các nút ấn (button) Button Các nút ấn được nhóm lại Yes No Hell Yeah Các nút ấn trực tiếp (inline button) Foo <a href="index.html" data-role="button" data- theme="b">Bar Phần tử Biểu mẫu (Trình đơn Select) Choose an option: Option 1 Option 2 Option 3 Các khung nhìn danh sách cơ bản One Two Three Các hộp thoại Open dialog <a href="dialog.html" data-role="button" data- inline="true" data-rel="dialog" data-transition="pop">Open dialog Các hiệu ứng chuyển tiếp (transition) Tài liệu hướng dẫn jQuery Mobile có một danh sách đầy đủ về cú pháp data-* được hỗ trợ. Về đầu trang Cấu trúc của một trang JQuery Mobile Phần này bàn về cấu trúc chung của một trang JQuery Mobile. jQuery Mobile có các hướng dẫn về cấu trúc của chính các trang đó. Nói chung, một cấu trúc trang nên có các phần sau đây: Thanh Đầu trang (Header) Thông thường chứa tiêu đề trang và nút Back (Quay lại) Nội dung (Content) Nội dung của ứng dụng của bạn Thanh Chân trang (Footer) Thường chứa các phần tử điều hướng, thông tin bản quyền hoặc bất cứ thứ gì bạn cần thêm vào phần chân trang Hình 2 cho thấy các ví dụ về các phần khác nhau. Hình 2. Kết cấu chung của một ứng dụng web jQuery Mobile Các thanh công cụ đầu trang và chân trang hỗ trợ các tùy chọn xác định vị trí toàn màn hình và cố định. Vị trí cố định làm cho các thanh công cụ không thay đổi khi cuộn trang. Vị trí toàn màn hình làm việc giống như vị trí cố định ngoại trừ các thanh công cụ được hiển thị chỉ khi nhấn vào trang đó (để cung cấp một trải nghiệm dễ dàng, đầy đủ nội dung). Phần còn lại của phần này khám phá mã HTML cho một cấu trúc trang tổng quát. Bản thân định nghĩa của một kiểu tài liệu HTML là !DOCTYPE html>, mà nó cũng định nghĩa một kiểu tài liệu HTML5. Phần đầu HTML nạp ba thành phần jQuery Mobile quan trọng:  jQuery Core library — Thư viện jQuery lõi.  jQuery Mobile library — Một phần đặc trưng-di động của khung công tác jQuery.  jQuery Mobile CSS — CSS định nghĩa các phần tử giao diện người dùng jQuery Mobile lõi. Nó định nghĩa các hiệu ứng chuyển tiếp và các tiện ích giao diện người dùng khác nhau, chẳng hạn như các thanh trượt và các nút ấn và sử dụng nhiều các biến đổi Webkit và hình ảnh động. Liệt kê 2 cho thấy phần đầu HTML. Liệt kê 2. Phần đầu HTML Intro to jQuery Mobile <link rel="stylesheet" href=" /1.0a2/jquery.mobile-1.0a2.min.css" /> <script src=" /jquery.mobile-1.0a2.min.js"> Phần tiếp theo của mã HTML định nghĩa chính trang đó; hãy xem cách sử dụng thuộc tính data- role="page". Liệt kê 3 hiển thị một ví dụ.. Liệt kê 3. Định nghĩa một khối trang Liệt kê 3 định nghĩa một trang. Thuộc tính id chỉ cần khi nhiều khối trang cục bộ nằm trên tài liệu của tệp HTML giống nhau, nhưng cách thực hành tốt là định nghĩa một ID duy nhất. Một số liệt kê mã tiếp theo cho thấy cách định nghĩa các phần đầu trang, nội dung và chân trang khác nhau của trang này. Thanh đầu trang thường chứa tiêu đề trang và nút ấn Back, như trong Liệt kê 4. Liệt kê 4. Phần thanh đầu trang của trang Header Bar Trong trường hợp này, thanh đầu trang chỉ gồm một văn bản tiêu đề của đầu trang H1. Phần lớn nội dung của bạn xuất hiện sau phần đầu trang, như cho thấy dưới đây. Ví dụ trong Liệt kê 5 chỉ hiển thị một đoạn mã đơn giản, nhưng đây là nơi mà bạn sẽ thêm các danh sách, các ấn nút, các biểu mẫu và v.v. Liệt kê 5. Phần nội dung của trang Content Section Thanh chân trang là nơi mà bạn thường đặt các phần tử điều hướng và thông tin bản quyền, như trong Liệt kê 6. Liệt kê 6. Phần thanh chân trang Footer Bar Phần chân trang ví dụ trong Liệt kê 6 rất đơn giản. Việc thêm một thanh điều hướng vào thanh chân trang không quá phức tạp, như trong Liệt kê 7. Liệt kê 7. Thêm một thanh điều hướng vào phần chân trang Today Tomorrow Week No date Hình 3 cho thấy phần thanh chân trang kết quả có thanh điều hướng mới được bổ sung. Hình 3. Phần chân trang có thanh điều hướng Về đầu trang Định nghĩa nhiều trang cục bộ Ví dụ trước đã trình bày một trang duy nhất. jQuery Mobile cũng cung cấp sự hỗ trợ cho nhiều trang trong một tài liệu HTML đơn. Nhiều trang là "các trang" liên kết bên trong, cục bộ mà bạn có thể nhóm lại với nhau cho các mục đích nạp sẵn. Cấu trúc nhiều trang tương tự như ví dụ trước của một trang duy nhất, ngoại trừ việc nó sẽ chứa các data-role của nhiều trang. Liệt kê 8 cho thấy một ví dụ. Liệt kê 8. Định nghĩa nhiều trang trong một tệp HTML duy nhất : : : : : : : : Khi tham khảo một trang là cục bộ với một tài liệu HTML tương tự, jQuery Mobile sẽ tự động giao dịch với các tài liệu tham khảo. Khi tham khảo một trang bên ngoài, jQuery Mobile sẽ hiển thị một vòng tròn nạp. Nếu gặp lỗi, khung công tác sẽ tự động hiển thị và sử dụng một cửa sổ bật lên thông báo lỗi. Về đầu trang Các hiệu ứng chuyển tiếp trang jQuery Mobile cung cấp sự hỗ trợ cho hiệu ứng chuyển tiếp trang dựa vào-CSS (lấy cảm hứng từ jQtouch), được áp dụng khi điều hướng đến một trang mới và quay lại. Các hiệu ứng chuyển tiếp gồm có: Trượt Cung cấp một hiệu ứng chuyển tiếp ngang Trượt lên và Trượt xuống Cung cấp hiệu ứng chuyển tiếp lên và xuống màn hình Tiếng bốp Cung cấp một kiểu hiệu ứng chuyển tiếp nổ Mờ dần Cung cấp một hiệu ứng chuyển tiếp mờ dần Lật Cung cấp một hiệu ứng chuyển tiếp lật Bạn có thể bổ sung các hiệu ứng chuyển tiếp trang theo hai cách khác nhau:  Bổ sung một thuộc tính data-transition (hiệu ứng chuyển tiếp dữ liệu) vào liên kết, sử dụng Sử dụng thuộc tính data-transition trên các trang web tĩnh.  Theo lập trình, sử dụng $.mobile.changePage("pendingtasks.html", "slideup"); Sử dụng cách tiếp cận chương trình khi làm việc với các trang động. Về đầu trang Các khung nhìn danh sách Các khung nhìn danh sách, một kiểu phần tử giao diện người dùng cơ bản, được sử dụng nhiều trong các ứng dụng di động. jQuery Mobile hỗ trợ nhiều khung nhìn danh sách: các danh sách cơ bản, lồng nhau, có đánh số và chỉ đọc; các nút ấn chia tách; các vạch chia danh sách; các bong bóng đếm; các hình thu nhỏ; các biểu tượng, các thanh bộ lọc tìm kiếm; các danh sách có kiểu dáng chèn vào và các danh sách chủ đề. Liệt kê 9 cho thấy một khung nhìn danh sách cơ bản. Một khung nhìn danh sách được tạo bằng cách sử dụng thuộc tính dữ liệu . Liệt kê 9. Tạo một khung nhìn danh sách đơn giản Intro to jQuery Mobile <link rel="stylesheet" href=" /1.0a2/jquery.mobile-1.0a2.min.css" /> <script src=" /jquery.mobile-1.0a2.min.js"> Facebook Friends Get Friends Post to Wall Send Message Bên trong bạn định nghĩa các mục danh sách phổ biến. Đây là một ví dụ về cách jQuery Mobile mở rộng cú pháp HTML cơ bản. Kết quả của ví dụ mã trong Liệt kê 10 được hiển thị trong Hình 4. Hình 4. Một khung nhìn danh sách đơn giản Về đầu trang Các biểu mẫu Các biểu mẫu là tạo phẩm web phổ biến khác được sử dụng để gửi thông tin đến một máy chủ. jQuery Mobile hỗ trợ nhiều thành phần giao diện người dùng biểu mẫu: các trường nhập văn bản, các trường nhập tìm kiếm, các thanh trượt, chuyển mạch đảo chiều lật, các nút tròn, các hộp chọn, các trình đơn select (chọn) và các biểu mẫu chủ đề. Tất cả chúng đều có thể được tạo ra rất dễ dàng. Liệt kê 10 cho thấy một biểu mẫu có một trình đơn chọn và một nút submit (đệ trình). Các trình đơn chọn được điều khiển bởi <select name="select-options" id="select- options">, nguyên gốc, nhưng jQuery Mobile hoàn thiện "dáng vẻ và cảm nhận" của nó. Câu lệnh nhóm các giá trị khác nhau cho các mục đích hiển thị trực quan. Bản thân biểu mẫu được định nghĩa bởi nguyên gốc. Liệt kê 10. Một biểu mẫu, trình đơn chọn và nút đệ trình Choose an option: Option 1 Option 2 Option 3 Submit Hình 5 cho thấy biểu mẫu và nội dung của nó. Hình 5. Biểu mẫu đơn giản có trình đơn chọn và nút đệ trình Khi chọn trình đơn tùy chọn, jQuery Mobile hiển thị cửa sổ bật lên được hiển thị trên hình ảnh (hình bên phải trong Hình 5) với tất cả các giá trị tùy chọn sẽ tự động đóng sau khi chọn. Chỉ cần định nghĩa đúng các thuộc tính action (hành động) và method (phương thức) của biểu mẫu, jQuery Mobile chịu trách nhiệm về các hiệu ứng chuyển tiếp giữa biểu mẫu, gọi Ajax và trang các kết quả và hiển thị một vòng tròn khi cần thiết. Về đầu trang Các thành phần giao diện người dùng khác Có nhiều phần tử giao diện người dùng nữa và các biến thể của các phần tử, được khám phá trên trang web JQuery Mobile và tài liệu hướng dẫn (xem phần Tài nguyên). Để bổ sung thêm cho những điều bạn đã học được trong bài này, điều quan trọng là bạn cần nghiên cứu: nội dung xếp gọn lại, các lưới bố trí, tạo chủ đề và phần còn lại của khung nhìn danh sách và các biểu mẫu.