Bài này cung cấp một giới thiệu về khung công tác jQuery Mobile (Di động jQuery). Hãy tìm hiểu những điều cơ bản về khung công tác này và cách viết một giao diện người dùng ứng dụng web di động chức năng mà không cần viết một dòng mã JavaScript. Một ví dụ hướng dẫn bạn qua các trang cơ bản, điều hướng, các thanh công cụ, các khung nhìn danh sách, các nút điều khiển biểu mẫu và các hiệu ứng chuyển tiếp.

C. Enrique Ortiz, Nhà phát triển và tác giả, About Mobility Weblog

C. Enrique Ortiz là một chuyên gia có nhiều kinh nghiệm làm việc trong lĩnh vực di động. Ông còn là tác giả và là một blogger. Ông từng viết ra các ứng dụng di động từ đầu đến cuối, kể cả trước khi xuất hiện các dòng điện thoại thông minh. Ông đã có nhiều bài báo kỹ thuật, viết hai quyển sách về phát triển phần mềm di động và ông đã giúp hàng chục công ty về các nhu cầu điện toán di động của họ.


Cấp độ đóng góp cho developerWorks của
        tác giả

05 12 2012

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.


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.


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).


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)
Một trang mô tả các phần tử giao diện người dùng jQuery Mobile (vào Tháng Tám năm 2010), gồm có các nút bấm, thanh công cụ, khung nhìn danh sách, v.v.

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.


$.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ứcCá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).


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ầnThuộc tính data-* của HTML5
Các thanh công cụ Đầu trang (Header) và Chân trang (Footer )<div data-role="header">
<div data-role="footer">
Phần thân nội dung (content)<div data-role="content">
Các nút ấn (button)<a href="index.html" data-role="button"
data-icon="info">Button</a>
Các nút ấn được nhóm lại<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Hell Yeah</a>
</div>
Các nút ấn trực tiếp (inline button)<div data-inline="true">
<a href="index.html" data-role="button">Foo</a>
<a href="index.html" data-role="button" data-theme="b">Bar</a>
</div>
Phần tử Biểu mẫu (Trình đơn Select)<div data-role="fieldcontain">
<label for="select-options" class="select">Choose an option:</label>
<select name="select-options" id="select-options">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option2">Option 3</option>
</select>
</div>
Các khung nhìn danh sách cơ bản<ul data-role="listview">
<li><a href="index.html">One</a></li>
<li><a href="index.html">Two</a></li>
<li><a href="index.html">Three</a></li>
</ul>
Các hộp thoại<a href="foo.html" data-rel="dialog">Open dialog</a>
<a href="dialog.html" data-role="button" data-inline="true"
data-rel="dialog" data-transition="pop">Open dialog</a>
Các hiệu ứng chuyển tiếp (transition)<a href="index.html" data-transition="pop" data-back="true">

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ợ.


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ấu trúc của một ứng dụng web jQuery Mobile whiển thị thảnh Đầu trang, phần nội dung, thanh Chân trang

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
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title>Intro to jQuery Mobile</title> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile
                /1.0a2/jquery.mobile-1.0a2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a2
                /jquery.mobile-1.0a2.min.js"></script> 
    </head>

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
    <body> 

        <div data-role="page" id="page1">

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
            <div data-role="header"> 
                <h1>Header Bar</h1> 
            </div><!-- /header -->

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
            <div data-role="content">   
                <p>Content Section</p>      
            </div><!-- /content -->

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
            <div data-role="footer"> 
                <h4>Footer Bar</h4> 
            </div><!-- /footer --> 
        </div><!-- /page --> 

    </body> 
</html>

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
<div data-role="footer" class="ui-bar">
    <div data-role="controlgroup" data-type="horizontal">
    <a href="index.html" data-role="button">Today</a>
    <a href="index.html" data-role="button">Tomorrow</a>
    <a href="index.html" data-role="button">Week</a>
    <a href="index.html" data-role="button">No date</a>
    </div>
</div><!-- /footer -->

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
Hình ảnh tương tự như Hình 2, nhưng phần Chân trang bây giờ có một thanh điều hướng với các nút sau: Today, Tomorrow, Week, No date.

Đị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
<div data-role="page" id=page1">
   <div data-role="header">
    :
   </div>
   <div data-role="content">
    :
   </div>
   <div data-role="footer">
    :
   </div>
</div>
:
:
<div data-role="page" id=page2">
   <div data-role="header">
    :
   </div>
   <div data-role="content">
    :
   </div>
   <div data-role="footer">
    :
   </div>
</div>

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.


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 <a href="index.html" data-transition="pop" data-back="true">

    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.


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 <ul data-role="listview">.

Liệt kê 9. Tạo một khung nhìn danh sách đơn giản
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Intro to jQuery Mobile</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile
            /1.0a2/jquery.mobile-1.0a2.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a2
            /jquery.mobile-1.0a2.min.js"></script>
    </head>
    <body>

        <div data-role="page">

            <div data-role="header">
               <h1>Facebook Friends</h1>
            </div><!-- /header -->

            <div data-role="content">
               <p>

               <ul data-role="listview" data-inset="true">

                  <li>
                  <a href="index.html">Get Friends</a>
                  </li>

                  <li>
                  <a href="index.html">Post to Wall</a>
                  </li>

                  <li><a href="index.html">Send Message</a></li>
               </ul>

               </p>

            </div><!-- /content -->

            <div data-role="footer">
            </div><!-- /footer -->
        </div><!-- /page -->

    </body>
</html>

Bên trong <ul data-role="listview"/> bạn định nghĩa các mục danh sách <li> 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
Một khung nhìn danh sách đơn giản hiển thị các người bạn Facebook, với các tùy chọn Nhận bạn bè, Đăng lên tường và Gửi thông báo.

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 <div data-role="fieldcontain"> 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 <form action="..." method="get"> nguyên gốc.

Liệt kê 10. Một biểu mẫu, trình đơn chọn và nút đệ trình
<form action="forms-results.php" method="get"> 
    <fieldset> 
        <div data-role="fieldcontain">
            <label for="select-options" class="select">Choose 
                 an option:</label>
            <select name="select-options" id="select-options">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option2">Option 3</option>
            </select>
        </div>
        <button type="submit">Submit</button> 
    </fieldset> 
</form>

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
Một biểu mẫu đơn giản có một trình đơn Chọn có Các tùy chọn 1, 2 và 3 và một 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.


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.


Kết luận

Bài này đã giới thiệu khung công tác JavaScript jQuery Mobile ở phạm vi rộng. Bạn đã học những điều cơ bản về khung công tác này và cách viết các trang web chức năng mà không cần phải viết một dòng mã JavaScript nào. Nếu bạn cần phải xử lý các tài liệu HTML, bạn có thể làm như vậy với lõi jQuery. Bạn đã khám phá các trang cơ bản và điều hướng, các thanh công cụ, các nút điều khiển biểu mẫu và các hiệu ứng chuyển tiếp. jQuery Mobile cung cấp nhiều phương thức, các sự kiện và các đặc tính mà bạn có thể làm việc với chúng bằng chương trình. Hãy để điều này truyền cảm hứng cho bạn để theo sát nhiều thông tin hơn nữa về các thành phần giao diện người dùng chưa được trình bày trong bài này.


Tải về

Mô tảTênKích thước
Source code for this articlejquerymobileexamplecode.zip3KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

  • Tải jQuery Mobile (hiện tại là Alpha 2).
  • Nhận PhoneGap, một khung công tác phát triển nguồn mở để xây dựng các ứng dụng di động giữa-nền tảng.
  • Đổi mới dự án phát triển tiếp theo của bạn với phần mềm dùng thử IBM, có sẵn để tải về hoặc trên đĩa DVD.

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=848761
ArticleTitle=Giới thiệu về jQuery Mobile
publish-date=12052012