Sử dụng các thành phần giao diện người dùng trong jQuery Mobile

Các phần tử tiêu chuẩn cho các trang web hấp dẫn và thân thiện với cảm ứng

Nhiều thành phần giao diện người dùng (UI) có sẵn trong khung công tác jQuery Mobile. Bài này cung cấp một tổng quan mức cao về mỗi phần tử và cách bạn có thể sử dụng nó trong một trang web di động. Nó đề cập đến các thành phần giao diện người dùng cụ thể, giải thích các lý do để sử dụng chúng và cung cấp các ví dụ mã sử dụng chúng trong một trang web di động.

Kris Hadlock, Nhà phát triển và nhà thiết kế web, Studio Sedition

Photo of Kris HadlockKris Hadlock là nhà phát triển và thiết kế trang web theo hợp đồng từ năm 1996. Ông đã làm về các dự án cho các công ty như SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, Le Cordon Bleu và Canon. Ông là tác giả của jQuery Mobile: Develop and Design - jQuery Mobile: Xây dựng và Thiết Kế (Peachpit), Ajax for Web Application Developers - Ajax dành cho các nhà phát triển ứng dụng Web (Sams) và The ActionScript Migration Guide - Hướng dẫn di trú ActionScript (New Riders). Kris là một nhà báo được đánh giá cao, ông phụ trách các chuyên mục và đã có nhiều bài viết cho các trang web và các tạp chí thiết kế, gồm IBM developerWorks, Peachpit.com, InformIT.com và Practical Web Design - Thực hành thiết kế web. Ông cũng là người sáng lập của trang www.studiosedition.com, một xưởng phát triển phần mềm và thiết kế web chuyên về tổng hợp biểu mẫu và chức năng.



22 12 2012

Thư viện JavaScript của jQuery Mobile là một cách hữu hiệu để cho phép các thiết bị di động và máy tính bảng truy cập các ứng dụng di động bằng cách cho phép những 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.

Để sử dụng bất kỳ ví dụ nào trong số các ví dụ trong bài này, bạn phải tải về hoặc bao gồm các tệp khung công tác jQuery Mobile được lưu trữ trên máy chủ từ xa, bạn có thể tìm thấy một liên kết đến các tệp này trong phần Tài nguyên.

Các hộp thoại và các cửa sổ bật lên

Một hộp thoại là một phần tử giao diện người dùng quan trọng, nhắc người dùng đáp ứng hay chỉ đơn giản là hiển thị thông tin. Các hộp thoại hầu như được sử dụng thường xuyên để đưa ra các tùy chọn cho những người dùng để thực hiện một số loại lệnh dựa trên đáp ứng của người dùng. Thông thường, bạn có thể đưa ra các hộp thoại theo một trong hai cách — là một cửa sổ phương thức - modal hoặc không theo phương thức - non-modal (với jQuery Mobile, các hộp thoại này được trình bày như một hộp thoại phương thức). Các hộp thoại phương thức chặn không cho người dùng tương tác với trang web bên dưới hộp thoại, đòi hỏi một đáp ứng từ những người dùng trước khi họ có thể tiếp tục.

Để tạo ra một hộp thoại với jQuery Mobile, bạn phải sử dụng thuộc tính data-rel trên một siêu liên kết mà bạn muốn mở như một cửa sổ dialog (hộp thoại) và gán cho nó giá trị là dialog. Đoạn mã dưới đây cho thấy cách chuyển đổi một siêu liên kết đơn giản đến một trang web thành một siêu liên kết sẽ mở trang web liên quan như là một hộp thoại:

<a href="dialog.html" data-rel="dialog">Open dialog</a>

Theo mặc định, khung công tác jQuery Mobile bổ sung các góc tròn, một lề trang và một nền tối cho trang web để làm cho nó xuất hiện như một hộp thoại đặt lên trên trang web đó.

Có một số cách để đóng một hộp thoại. Tùy chọn đầu tiên chỉ đơn giản là liên kết đến một trang khác, có thể liên quan đến đáp ứng từ người dùng. Đây sẽ là một tùy chọn tốt cho bất kỳ loại xử lý nào cần diễn ra — ví dụ, một nút ấn Save (Lưu) có thể liên kết đến một trang web để lưu một số loại thông tin vào một cơ sở dữ liệu và sau đó trả về trang web cha mẹ ban đầu với một thông báo xác nhận. Tùy chọn thứ hai là sử dụng thuộc tính data-rel trên siêu liên kết trong hộp thoại của bạn và thiết lập giá trị của nó là back, như trong đoạn mã dưới đây. Đây là một tùy chọn tốt khi kèm theo một nút ấn Cancel (Hủy bỏ) trong hộp thoại của bạn.

<a href="parent.html" data-rel="back">Cancel</a>

Thật không may, tùy chọn này không làm việc trên các thiết bị không hỗ trợ JavaScript. Tùy chọn cuối cùng sẽ sử dụng JavaScript để gọi trực tiếp phương thức close (đóng lại) của hộp thoại:

$('#my-dialog').dialog('close');

Bạn cũng có thể sử dụng một số cách chuyển tiếp cho các hộp thoại để thêm hương vị vào trang web di động của mình. Bạn có thể thiết lập các chuyển tiếp bằng cách bao gồm một thuộc tính data-transition cho siêu liên kết mà bạn đang chuyển đổi thành hộp thoại:

<a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>

Các cách chuyển tiếp dữ liệu hiện có là pop (bật lên), slidedown (trượt xuống) và flip (lật); mỗi hàm có hành vi đúng như bạn giả định. Chuyển tiếp phổ biến nhất gắn với hộp thoại là pop, nhưng tất nhiên có những trường hợp có thể áp dụng các chuyển tiếp khác.


Các thanh công cụ

Khung công tác jQuery Mobile gồm có các phần đầu trang và các phần chân trang như các thanh công cụ tiêu chuẩn của nó; tuy nhiên, các thanh công cụ cũng có thể được sử dụng để hiển thị dẫn hướng, như với navbar (thanh dẫn hướng). Cách sử dụng mặc định cho phần đầu trang trong jQuery Mobile là dùng làm tiêu đề trang được neo trên đầu của trang web; phần chân trang hầu hết thường là phần tử cuối cùng trong một trang web và gồm các nội dung như thông tin bản quyền, các siêu liên kết bổ sung và v.v..

Việc tạo phần đầu trang và phần chân trang rất dễ dàng, chỉ cần thêm một thuộc tính data-role vào một phần tử HTML. Liệt kê 1 cho thấy để tạo thanh công cụ HeaderFooter.

Liệt kê 1. Tạo một thanh công cụ đầu trang và chân trang với khung công tác jQuery Mobile
<div data-role="header">
  <h1>My Page Title</h1>
</div>

<!-- Some page content... -->

<div data-role="footer">
  <p>Copyright notice</p>
</div>

Bạn có thể tùy chỉnh các phần đầu trang và chân trang bằng CSS hoặc bạn có thể sử dụng một số các thuộc tính data- có sẵn, chẳng hạn như data-position (vị trí-dữ liệu), thiết lập hành vi định vị của thanh công cụ. Giá trị mặc định với thuộc tính này là inline (nội dòng), nhưng bạn cũng có thể thiết lập giá trị của nó là fixed (cố định) để duy trì một thanh công cụ, ví dụ như đầu trang, ở một vị trí cụ thể, ngay cả khi cuộn trang web đó. Một vị trí khác đáng nhắc đến là fullscreen (toàn màn hình). Chế độ fullscreen giống như fixed, nhưng các thanh công cụ không xuất hiện trên trang web cho đến khi người dùng bắt đầu tương tác với trang đó. Khi người dùng tương tác với một trang web, các thanh công cụ xuất hiện, cho phép người dùng tương tác với chúng, rồi biến mất khi người dùng ngừng tương tác với trang đó (Liệt kê 2). Tùy chọn này rất có ích khi hiển thị phát lại đoạn video, thư viện ảnh hoặc các thứ tương tự.

Liệt kê 2. Thiết lập một thanh công cụ đầu trang và chân trang ở chế độ toàn màn hình với khung công tác jQuery Mobile
<div data-role="header" data-position="fullscreen">
  <h1>My Page Title</h1>
</div>

<!-- Some page content... -->

<div data-role="footer" data-position="fullscreen">
  <p>Copyright notice</p>
</div>

Thanh dẫn hướng navbar được sử dụng để hiển thị lên đến năm nút ấn hoặc mục dẫn hướng trong một phần đầu trang hay chân trang. Tùy thuộc vào bạn thêm bao nhiêu nút ấn vào navbar, nó sẽ phân phối đồng đều các nút ấn sao cho tất cả nút ấn đều có cùng một kích thước. Để tạo một navbar, bạn có thể chỉ cần thêm một thuộc tính data-role vào một phần tử bao ngoài một danh sách và thiết lập giá trị của nó là navbar (Liệt kê 3). Danh sách này được chuyển đổi động thành một thanh dẫn hướng nằm ngang có trạng thái di chuột, trạng thái tĩnh và trạng thái hoạt động, tất cả có thể được tùy chỉnh khi sử dụng khung công tác chủ đề jQuery Mobile.

Liệt kê 3. Chuyển đổi một danh sách sang một thanh chuyển hướng khi sử dụng navbar
<div data-role="header" data-position="fullscreen">
  <div data-role="navbar">
    <ul>
      <li><a href="#">Nav item 1</a></li>
      <li><a href="#">Nav item 2</a></li>
    </ul>
  </div>
</div>

Một tính năng tốt đẹp khác của navbar là bạn có thể đưa thêm các biểu tượng tùy chỉnh vào trong mỗi nút ấn. Khung công tác jQuery Mobile gồm có một tập các biểu tượng di động tiêu chuẩn, có thể được sử dụng thông qua thuộc tính data-icon hoặc bạn có thể sử dụng bất kỳ biểu tượng tùy chỉnh nào mà bạn tạo ra hoặc mua lại.


Các tùy chọn bố trí

Nội dung theo định dạng là một biện pháp quan trọng để cung cấp cho người dùng một cách dễ dùng để tham khảo và thu thập thông tin mà bạn đang cung cấp trên trang web của mình. Với sự gia tăng về lưu lượng web di động và sự cần thiết với các phiên bản trang web di động, nội dung theo định dạng ngày càng trở nên quan trọng hơn. Chúng ta có thể không còn chỉ dựa vào những người dùng của mình ngồi tại bàn làm việc và dành thời gian tương tác với trang web của mình nữa. Nhưng người dùng đang di chuyển và nội dụng theo định dạng hấp dẫn, đơn giản trở nên quan trọng hơn bao giờ hết.

Khi định dạng nội dung cho một trang web di động, điều quan trọng cần nhớ là hầu hết các thiết bị di động có màn hình hẹp. Nói vậy, nhưng vẫn còn có rất nhiều tình huống yêu cầu các lưới cột. jQuery Mobile gồm có một lưới bố trí mà bạn có thể sử dụng dễ dàng để tạo ra một lưới dữ liệu thông qua một lớp CSS (Liệt kê 4).

Liệt kê 4. Sử dụng một lưới bố trí để tạo ra các cột
<div class="ui-grid-a">
 <div class="ui-block-a">
    Left column
  </div>
 <div class="ui-block-b">
    Right column
  </div>
</div>

Lớp CSS được sử dụng theo mặc định để tạo ra một lưới từ một nhóm các phần tử HTML là lớp ui-grid-*. Dấu hoa thị (*) đại diện cho chủ đề bạn chọn để sử dụng với lưới của bạn. (Để biết thêm thông tin về hệ thống tạo chủ đề, xem phần Tài nguyên .) Bạn có thể tạo ra bao nhiêu cột tùy ý bạn, nhưng tôi khuyên bạn nên sử dụng chỉ nhiều nhất là hai cột thôi và cũng chỉ những khi cần thiết.

Một cách tiện dụng khác để định dạng nội dung là chỉ hiển thị một phần của nội dung, cung cấp cho người dùng một tổng quan và tùy chọn để đọc thêm. Do hầu hết các thiết bị di động có một màn hình rất nhỏ, nên điều quan trọng là giữ cho chiều dài trang tương đối ngắn và đừng lạc đề. Các khối nội dung có khả năng xếp gọn lại được cung cấp một cách rất tốt để xử lý chức năng này (Liệt kê 5). Khung công tác jQuery Mobile cung cấp một data-role dành cho nội dung collapsible (xếp gọn lại được), mà khi sử dụng đúng cách sẽ chuyển đổi một phần tử header và nội dung liên quan của nó thành một khối xếp gọn được.

Liệt kê 5. Sử dụng một vùng nội dung xếp gọn lại được
<div data-role="collapsible">
  <h2>My header</h2>
  <p>The full content would normally be longer than this, 
  which is why we would want to hide it by default and allow 
  the user to choose whether they wanted to read it by viewing 
  the title. Therefore the title plays an important role when 
  creating collapsible content blocks.</p>
</div>

Theo mặc định, khối này hiển thị văn bản đầu trang như một nút ấn có một biểu tượng +. Khi được nhấn vào, toàn bộ nội dung sẽ được lộ ra và biểu tượng + sẽ thay đổi thành một biểu tượng -, cho biết rằng nút ấn đó có thể được nhấn lại để đóng toàn bộ nội dung và trở về trạng thái nút ấn mặc định.


Tạo các danh sách đơn giản

Các danh sách là một phần tử nhìn thấy phổ biến trên một trang web di động. Với jQuery Mobile, bạn có thể tạo ra một số định dạng danh sách khác nhau, ví dụ như danh sách liên kết cơ bản, danh sách lồng nhau, danh sách đánh số thứ tự, danh sách với nút ấn chia tách (split button), các danh sách có các thanh chia làm nhiều đoạn (dividers), các danh sách có các biểu tượng, hình thu nhỏ hoặc các bong bóng đếm và các danh sách gồm có một thanh bộ lọc tìm kiếm. Một kiểu danh sách được sử dụng phổ biến là danh sách liên kết cơ bản. Để tạo ra một danh sách liên kết cơ bản, bạn chỉ cần tạo một danh sách không theo thứ tự HTML tiêu chuẩn, thêm một thuộc tính data-role và gán cho nó một giá trị là listview (Liệt kê 6).

Liệt kê 6. Tạo một danh sách liên kết cơ bản với khung công tác jQuery Mobile
<ul data-role="listview">
  <li><a href="#">List item 1</a></li>
  <li><a href="#">List item 2</a></li>
</ul>

Để tạo một danh sách đánh số, bạn sẽ sử dụng mã tương tự như trong Liệt kê 6, chỉ cần thay đổi ul thành ol để chuyển đổi nó thành một danh sách có thứ tự.


Nâng cao các danh sách

Một khi bạn hiểu để tạo ra các danh sách cơ bản đơn giản đến mức nào, bạn có thể tự thấy muốn có thêm nhiều tùy chọn hơn. Một tùy chọn để cung cấp chức năng bổ sung cho một danh sách là tùy chọn có tên là split button list (danh sách nút ấn chia tách). Một danh sách nút ấn chia tách cho phép bạn cung cấp hai tùy chọn có thể nhấn được trong cùng một mục danh sách. Chức năng này rất có ích đối với các mục danh sách gồm có một liên kết, nói ví dụ, cho các chi tiết riêng về mục cụ thể đó nhưng cũng có thể cần phải bao gồm các hành động khác có liên quan đến mục đó, chẳng hạn như một nút ấn để mua mục này hoặc chia sẻ nó trên một mạng xã hội. Việc tạo một danh sách nút ấn chia tách rất đơn giản: Bạn thêm hai thẻ neo cạnh nhau trong mục danh sách sử dụng listview data-role (Liệt kê 7).

Liệt kê 7. Tạo một danh sách nút ấn chia tách với khung công tác jQuery Mobile
<ul data-role="listview" data-split-icon="gear"> 
 <li>
    <a href="item-detail.html"> 
    <h3>Item title</h3> 
    <p>Item overview</p> 
    </a>
    <a href="item-purchase.html" data-rel="dialog">Purchase item</a>
  </li> 
  <li>
    <a href="item-detail.html"> 
    <h3>Item title</h3> 
    <p>Item overview</p> 
    </a>
    <a href="item-purchase.html" data-rel="dialog">Purchase item</a>
  </li>
</ul>

Danh sách nút ấn chia tách trong Liệt kê 7 cung cấp các mục danh sách có một tiêu đề và một tổng quan mà những người dùng có thể nhấn vào để xem các chi tiết bổ sung về sản phẩm. Các mục danh sách cũng có một biểu tượng được sử dụng như là một siêu liên kết để mua mục đó trong một hộp thoại. Bạn cũng có thể thay đổi biểu tượng mặc định cho nút ấn chia tách, xuất hiện ở phía bên phải của mục danh sách bằng cách sử dụng thuộc tính data-split-icon.

Một bổ sung có ích khác cho các danh sách cơ bản là các thanh chia danh sách. Các thanh chia danh sách cung cấp một phương tiện để phân loại các mục danh sách của bạn. Ví dụ, bạn có thể sắp xếp theo vần chữ cái các mục danh sách của mình và sử dụng các thanh chia danh sách để tách đoạn theo từng chữ cái trong bảng chữ cái hoặc bạn có thể có một nhóm các mục danh sách có liên quan đến âm nhạc và phân loại chúng bằng các thanh chia danh sách, tương ứng với các thể loại âm nhạc khác nhau. Liệt kê 8 cho thấy một ví dụ về một danh sách đơn giản được nâng cao bằng các thanh chia danh sách.

Liệt kê 8. Thêm các thanh chia danh sách vào một listview
<ul data-role="listview"> 
  <li data-role="list-divider">Alternative</li> 
  <li><a href="#">Nirvana</a></li>
  <li data-role="list-divider">Rock and Roll</li> 
  <li><a href="#">Jimi Hendrix</a></li>
  <li><a href="#">Led Zeppelin</a></li>
</ul>

Việc sử dụng giá trị của thuộc tính data-rolelist-divider (thanh chia-danh sách) cung cấp một kiểu dáng trực quan để phân biệt giữa các mục danh sách này với các các mục danh sách khác.

Bạn cũng có thể tạo ra các kiểu dáng khác nhau bằng cách sử dụng các biểu tượng, các hình thu nhỏ và các bong bóng đếm. Bạn có thể thêm các bong bóng đếm vào một mục danh sách bằng cách sử dụng lớp ul-li-count (Liệt kê 9).

Liệt kê 9. Thêm các bong bóng đếm vào các mục danh sách của jQuery Mobile
<ul data-role="listview"> 
  <li>
    <a href="inbox.html">Inbox 
      <span class="ui-li-count">12</span>
    </a>
  </li>
</ul>

Bạn có thể thêm các hình thu nhỏ cũng giống như bạn thêm một hình ảnh vào một trang HTML. Chỉ cần thêm một phần tử neo tới một mục danh sách, thêm một hình ảnh sẽ hoạt động như hình thu nhỏ, rồi thêm bản sao mà bạn muốn xuất hiện bên cạnh nó. jQuery Mobile sẽ xử lý phần còn lại (Liệt kê 10).

Liệt kê 10. Thêm các hình thu nhỏ vào các mục danh sách jQuery Mobile
<ul data-role="listview"> 
  <li>
    <a href="zeppelin.html#thank-you"> 
      <img src="images/album-cover.jpg" /> 
      <h3>Led Zeppelin</h3> 
      <p>Thank You</p> 
   </a>
  </li>
  <li>
    <a href="zeppelin.html#ten-years"> 
      <img src="images/album-cover.jpg" /> 
      <h3>Led Zeppelin</h3> 
      <p>Ten Years</p>
    </a>
  </li> 
</ul>

Bạn thêm các biểu tượng cùng cách như các hình thu nhỏ; sự khác biệt duy nhất là ở chỗ bạn sử dụng lớp ui-li-icon, như trong Liệt kê 11.

Liệt kê 11. Thêm biểu tượng vào các mục danh sách jQuery Mobile
<ul data-role="listview"> 
  <li>
    <a href="zeppelin.html"> 
      <img src="images/album-cover.jpg" class="ui-li-icon" /> 
      Led Zeppelin Album
   </a>
  </li>
  <li>
    <a href="hendrix.html"> 
      <img src="images/album-cover.jpg" class="ui-li-icon" /> 
      Jimi Hendrix Album
    </a>
  </li> 
</ul>

Lớp ul-li-icon hạn chế kích cỡ hình ảnh có chiều rộng và chiều cao tối đa là 40px (40 điểm ảnh) và bố trí đúng hình ảnh trong các mục danh sách.


Lọc tìm kiếm

Ngoài tất cả tính năng nâng cao rất thú vị của danh sách vừa mới được trình bày, tính năng nâng cao cuối cùng mang lại các cải tiến ấn tượng về tính tiện dụng cho các danh sách dài. Đôi khi, đúng là không thể giảm tất cả nội dung cần phải xuất hiện trên một trang web di động. Khi xảy ra trường hợp này và bạn có một danh sách dài, gần như không thể dùng được, thanh bộ lọc tìm kiếm là một cách tuyệt vời để xử lý vấn đề này. May mắn thay, không mất nhiều nỗ lực để thêm một thanh bộ lọc tìm kiếm vào một danh sách với jQuery Mobile. Chỉ cần thêm thuộc tính data-filter (bộ lọc-dữ liệu) vào danh sách của bạn và gán cho nó giá trị là true (Liệt kê 12).

Liệt kê 12. Thêm một thanh bộ lọc tìm kiếm vào một danh sách jQuery Mobile
<ul data-role="listview" data-filter="true">
  <li><a href="#">Chris A.</a></li>
  <li><a href="#">Cindy V.</a></li>
  <li><a href="#">John B.</a></li>
  <li><a href="#">Tammy D.</a></li>
</ul>

Thanh bộ lọc tìm kiếm bổ sung một trường nhập văn bản, cung cấp chức năng cho những người dùng gõ những gì họ đang tìm kiếm, trong khi đó, danh sách được lọc theo thời gian thực dựa trên trường nhập này. Ví dụ, nếu bạn đã có một danh sách các tên nhân viên và bạn đã thêm một thanh bộ lọc tìm kiếm vào danh sách đó, người dùng sẽ có thể lọc và thu hẹp các kết quả được hiển thị trên trang đó bằng cách nhập một hoặc nhiều ký tự vào trường nhập văn bản của bộ lọc tìm kiếm.

Bạn cũng có thể đi một bước xa hơn và thêm các thanh chia vào listview của bạn trong khi vẫn có một thanh bộ lọc tìm kiếm (Liệt kê 13).

Liệt kê 13. Thêm một thanh bộ lọc tìm kiếm vào một danh sách jQuery Mobile có các thanh chia danh sách
<ul data-role="listview" data-filter="true">
  <li data-role="list-divider">C</li> 
  <li><a href="#">Chris A.</a></li>
  <li><a href="#">Cindy V.</a></li>
  <li data-role="list-divider">J</li>
  <li><a href="#">John B.</a></li>
  <li data-role="list-divider">T</li>
  <li><a href="#">Tammy D.</a></li>
</ul>

Sự kết hợp các thanh chia danh sách với thanh bộ lọc tìm kiếm là một tính năng rất tốt và thực sự bổ sung vào tính tiện dụng cho các danh sách dài, tẻ nhạt nếu không sẽ không thể sử dụng được.


Các phần tử biểu mẫu

Với jQuery Mobile, tất cả các phần tử biểu mẫu nguyên gốc được chuyển đổi thành các nút điều khiển tùy chỉnh khi trình duyệt hỗ trợ nó. Các nút điều khiển tùy chỉnh này là phiên bản nâng cao của các phần tử biểu mẫu nguyên gốc cũng như một số phần tử biểu mẫu đặc biệt được tạo riêng bởi khung công tác. May mắn thay, tất cả các phần tử biểu mẫu ấy tự hạ cấp khi gặp các trình duyệt không hỗ trợ chúng, vì vậy không phải quan tâm đến tính tiện dụng của chúng. Các trường nhập văn bản với jQuery Mobile về cơ bản là giống như các trường nhập văn bản nguyên gốc; tuy nhiên, bạn có thể sử dụng các kiểu trường nhập HTML5 mới như email, telnumber. Để tạo ra bất kỳ phần tử biểu mẫu nào trong số này, bạn chỉ cần thiết lập kiểu trường nhập là một trong các giá trị đã đề cập. Để có một danh sách đầy đủ về các kiểu trường nhập HTML5, xem phần Tài nguyên .

Ngoài các kiểu trường nhập HTML5 được hỗ trợ, bạn có thể tạo ra một thanh trượt. Một thanh trượt gồm có một tay gạt và đường rãnh mà tay gạt này trượt trên đó. Giá trị của thanh trượt được lưu trữ khi di chuyển tay gạt và sau đó giá trị đó được gửi đi khi biểu mẫu được gửi đi. Để tạo một thanh trượt, bạn bắt đầu với một trường nhập HTML cơ bản, nhưng bạn định nghĩa thuộc tính typerange (phạm vi). Sau đó, bạn thêm các thuộc tính min (tối thiểu), max (tối đa) và value (giá trị) và định nghĩa một giá trị mặc định cho thuộc tính value, xác định vị trí nơi sẽ đặt tay gạt trên thanh trượt. Liệt kê 14 cho thấy một ví dụ về một phần tử thanh trượt có một giá trị max10, giá trị min0value mặc định là 2.

Liệt kê 14. Tạo một phần tử thanh trượt khi sử dụng khung jQuery Mobile
<div data-role="fieldcontain">
	<label for="slider">My slider:</label>
 	<input type="range" name="slider" id="slider" value="2" min="0" max="10"  />
</div>

Kiểu trường nhập tùy chỉnh cuối cùng là một công tắc lật (flip), đã phổ biến trên các thiết bị di động. Đó là một phần tử tuyệt vời để xử lý các kiểu bật/tắt (on/off) hoặc đúng/sai (true/false) của dữ liệu. Có nhiều cách để người dùng có thể làm việc với công tắc lật này— bằng cách gõ nhẹ một bên hoặc bên kia của công tắc hoặc bằng cách kéo tay gạt lật như một thanh trượt. Việc tạo một công tắc lật cũng giống như việc tạo một thanh trượt, mặc dù có một vài sự khác biệt lớn. Đầu vào trở thành một phần tử select (lựa chọn) và hai tùy chọn được thêm vào. Liệt kê 15 đưa ra một ví dụ về một công tắc lật có thể được sử dụng để cung cấp chức năng bật/tắt.

Liệt kê 15. Tạo một công tắc lật khi sử dụng khung jQuery Mobile
<div data-role="fieldcontain">
  <label for="slider">Select slider:</label>
  <select name="slider" id="slider" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
  </select> 
</div>

Bạn có lẽ cũng đã nhận thấy rằng có một thuộc tính data-role có giá trị là slider (thanh trượt). Giá trị của thuộc tính này chuyển đổi một danh sách lựa chọn di động jQuery tùy chỉnh thành một công tắc lật.


Kết luận

Khung công tác jQuery Mobile cung cấp một giải pháp nhanh chóng để tạo ra các thành phần giao diện người dùng tiện dụng cho các trang web di động. Trong hầu hết các trường hợp, với chỉ một vài dòng mã HTML đơn giản, bạn có thể đưa vào một thành phần giao diện người dùng để tăng giá trị cho trang web di động của mình. Danh sách đầy đủ của các thành phần mà khung công tác này cung cấp không được trình bày trong bài này, nhưng để tìm hiểu thêm về các thành phần của khung công tác này và xem chúng đang hoạt động, hãy xem các liên kết trong phần Tài nguyên.

Tài nguyên

Học tập

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

  • Tải về và tham khảo các tệp CSS và JavaScript của jQuery Mobile.
  • Tải về và dùng thử Xem trước Công nghệ di động của IBM, một tập các mẫu mã và các dịch vụ để giúp bạn bắt đầu xây dựng các ứng dụng di động để mở rộng và tích hợp vào doanh nghiệp. Bài xem trước này gồm có một dịch vụ thông báo RESTful; PhoneGap, một khung công tác nguồn mở để xây dựng các ứng dụng di động lai; một thời gian chạy của WebSphere Application Server nhẹ; và mã mẫu ví dụ để cho bạn xem tất cả hoạt động thế nào.
  • Gói tính năng WebSphere Application Server cho Web 2.0 và Di động của IBM gồm có Bộ công cụ Dojo 1.7 của IBM, các khối xây dựng ứng dụng Internet phong phú (RIA) và di động mới và một thành phần biểu đồ dựa trên Dojo. Với các công cụ Rational kèm theo, Gói tính năng này giúp bạn nhận được các ứng dụng WebSphere ban đầu được phát triển cho các trình duyệt máy tính để bàn và thích ứng và triển khai chúng cho các thiết bị di động.
  • Đánh giá các sản phẩm của IBM theo cách phù hợp với bạn nhất: Tải về nó để dùng thử, dùng thử nó trực tuyến, sử dụng nó trong một môi trường đám mây hoặc dành một vài giờ trong SOA Sandbox để tìm hiểu cách thực hiện kiến trúc hướng dịch vụ có hiệu quả.

Thảo luận

  • Hãy tham gia vào cộng đồng developerWorks. Kết nối với những người dùng developerWorks khác trong khi khám phá các blog, các diễn đàn, các nhóm và các wiki dựa vào nhà phát triể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=846576
ArticleTitle=Sử dụng các thành phần giao diện người dùng trong jQuery Mobile
publish-date=12222012