Tạo một danh sách

Chúng ta có thể tạo một danh sách bằng ngôn ngữ HTML dùng ol (danh sách có thứ tự) hay ul (danh sách không thứ tự) và phần việc định dạng giao diện danh sách trông như thế nào sẽ do jQuery Mobile đảm nhiệm. Giả sử chúng ta có tập tin List.html có nội dung (chỉ phần body) như sau:


<div data-role="page">

   <div data-role="header">

      <h1>My Header</h1>

   </div>

   <div data-role="content">

      <ul>

         <li>Raymond Camden</li>

         <li>Scott Stroz</li>

         <li>Todd Sharp</li>

         <li>Dave Ferguson</li>

      </ul>

   </div>

   <div data-role="footer">

      <h1>My Footer</h1>

   </div>

</div>

Kết quả thực thi trên trình duyệt:

Chúng ta có thể cải thiện giao diện danh sách trên bằng cách thêm thuộc tính data-role đến phần tử ul với giá trị là listview:


<ul data-role="listview">

   <li>Raymond Camden</li>

   <li>Scott Stroz</li>

   <li>Todd Sharp</li>

   <li>Dave Ferguson</li>

</ul>

Kết quả:

Rõ ràng rằng lúc này danh sách sẽ dễ đọc hơn và giao diện trông đẹp mắt hơn. Một điều thú vị khác từ jQuery Mobile sẽ mang đến danh sách nếu chúng ta thêm các liên kết đến các mục danh sách như sau:


<ul data-role="listview">

   <li><a href="ray.html">Raymond Camden</a></li>

   <li><a href="scott.html">Scott Stroz</a></li>

   <li><a href="todd.html">Todd Sharp</a></li>

   <li><a href="dave.html">Dave Ferguson</a></li>

</ul>

Kết quả

Để ý sự xuất hiện các biểu tượng mũi tên bên phải và danh sách lúc này trông giống một hệ thống thực đơn.

Chú ý: đối với jQuery Mobile trước phiên bản 1.3, chúng ta có thể tạo một hệ thống thực đơn với các thực đơn con một cách đơn giản dùng danh sách lồng nhau như sau:


<ul data-role="listview">

  <li>Raymond Camden

     <ul>

       <li>About</li>

       <li>Contact</li>

    </ul>

  </li>

  <li>Scott Stroz

     <ul>

       <li>About</li>

       <li>Contact</li>

    </ul>

   </li>

   <li>Todd Sharp

     <ul>

       <li>About</li>

       <li>Contact</li>

    </ul>

  </li>

  <li>Dave Ferguson

    <ul>

       <li>About</li>

       <li>Contact</li>

    </ul>

  </li>

</ul>

Với các phiên bản jQuery mobile từ 1.3 trở về sau chúng ta cần dùng plugin tại https://github.com/arschmitz/jquery-mobile-nestedlists/

Các kiểu danh sách

Kiểu inset

Dùng thuộc tính data-inset với giá trị true cho phần tử ul:


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

  <li>Raymond Camden</li>

  <li>Scott Stroz</li>

  <li>Todd Sharp</li>

  <li>Dave Ferguson</li>

</ul>

Kết quả:

 Kiểu divider

Dùng thuộc tính data-role với giá trị list-divider cho phần tử li được dùng để làm ranh giới phân chia giữa các mục trong danh sách. Ví dụ


<ul data-role="listview">

  <li data-role="list-divider">Active</li>

  <li>Raymond Camden</li>

  <li>Scott Stroz</li>

  <li>Todd Sharp</li>

  <li data-role="list-divider">Archived</li>

  <li>Dave Ferguson</li>

</ul>

Kết quả

Có thể kết hợp với kiểu inset

Lúc này danh sách của chúng ta trông giống các widgets.

Danh sách với count bubbles

Giả sử chúng ta cần thống kê số feedback của mỗi người trong danh sách và thể hiện trong danh sách, một đặc trưng được hỗ trợ bởi jQuery Mobile là count bubbles giúp hiển thị các con số kèm theo các mục trong danh sách dùng thuộc tính class với giá trị ui-li-count đến phần tử chứa con số như sau:


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

   <li data-role="list-divider">Feedback</li>

   <li>Raymond Camden <span class="ui-li-count">9</span></li>

   <li>Scott Stroz <span class="ui-li-count">4</span></li>

   <li>Todd Sharp <span class="ui-li-count">13</span></li>

   <li>Dave Ferguson <span class="ui-li-count">8</span></li>

</ul>

Kết quả:

Sử dụng ảnh thumbnail và icon

jQuery Mobile hỗ trợ kết hợp ảnh thumbnail và icon kết hợp đến các mục trong danh sách. Giả sử chúng ta có các ảnh thumbnail kích cỡ 160X160 gồm ray.png, scott.png, todd.png, dave.png. Có thể kết hợp đến danh sách như sau:


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

  <li><a href="ray.html"><img src="ray.png"> Raymond Camden</a></li>

  <li><a href="scott.html"><img src="scott.png"> Scott Stroz</a></li>

  <li><a href="todd.html"><img src="todd.png"> Todd Sharp</a></li>

  <li><a href="dave.html"><img src="dave.png"> Dave Ferguson</a></li>

</ul>

Kết quả

Nếu chúng ta thêm thuộc tính class với giá trị ui-li-icon đến các phần tử img như sau:


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

  <li><a href="ray.html"><img src="ray.png" class="ui-li-icon"> Raymond Camden</a></li>

  <li><a href="scott.html"><img src="scott.png" class="ui-li-icon"> Scott Stroz</a></li>

  <li><a href="todd.html"><img src="todd.png" class="ui-li-icon"> Todd Sharp</a></li>

  <li><a href="dave.html"><img src="dave.png" class="ui-li-icon"> Dave Ferguson</a></li>

</ul>

Kết quả

Tạo các Split Button

Một đặc điểm thú vị khác mà jQuery Mobile hỗ trợ danh sách là có thể tạo các Split Button vào cuối các mục danh sách (vị trí các dấu mũi tên) bằng cách thêm thuộc tính data-split-icon với các giá trị phù hợp (danh sách xem tại https://demos.jquerymobile.com/1.4.3/icons/ ). Xem ví dụ:


<ul data-role="listview" data-inset="true" data-split-icon="delete">

  <li><a href="ray.html"><img src="ray.png" class="ui-li-icon"> Raymond Camden</a><a href="foo.html">Delete</a></li>

  <li><a href="scott.html"><img src="scott.png" class="ui-li-icon"> Scott Stroz</a><a href="foo.html">Delete</a></li>

  <li><a href="todd.html"><img src="todd.png" class="ui-li-icon"> Todd Sharp</a><a href="foo.html">Delete</a></li>

  <li><a href="dave.html"><img src="dave.png" class="ui-li-icon"> Dave Ferguson</a><a href="foo.html">Delete</a></li>

</ul>

Chúng ta thêm thuộc tính data-split-icon với giá trị delete đến phần tử ul và các liên kết với nội dung là Delete. Kết quả:

Lưu ý rằng liên kết dành cho Split Button luôn là liên kết thứ hai, giả sử chúng ta di chuyển liên kết thứ hai (Delete) ra trước liên kết thứ nhất của li thứ nhất:


<ul data-role="listview" data-inset="true" data-split-icon="delete">

  <li>><a href="foo.html">Delete</a><a href="ray.html"><img src="ray.png" class="ui-li-icon"> Raymond Camden</a</li>

...

</ul>

Kết quả

Bộ lọc tìm kiếm

Đặc trưng thú vị cuối cùng trong bài viết này trình bày là bộ lọc tìm kiếm. Hãy giả sử danh sách chúng ta rất nhiều các mục (hàng trăm) thì muốn tìm một mục nào đó sẽ rất khó khăn nên jQuery Mobile hỗ trợ đặc trưng bộ lọc tìm kiếm đơn giản chỉ dùng thuộc tính data-filter=”true” đến phần tử ul như đoạn mã sau:


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

  <li>Raymond Camden</li>

  <li>Scott Stroz</li>

  <li>Todd Sharp</li>

  <li>Dave Ferguson</li>

  <li>Scott Young</li>

</ul>

Kết quả

Bây giờ giả sử chúng ta muốn tìm những người có tên Scott trong danh sách, gõ scott vào ô tìm kiếm và kết quả:

Chúng ta có thể thay đổi kiểu ô tìm kiếm hay nội dung mặc định (Filter items) bằng cách dùng các thuộc tính data-filter-theme và data-filter-placeholder như minh họa sau:


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

data-filter-placeholder ="Tim kiem" data-filter-theme="c">

  <li>Raymond Camden</li>

  <li>Scott Stroz</li>

  <li>Todd Sharp</li>

  <li>Dave Ferguson</li>

  <li>Scott Young</li>

</ul>

Kết quả

Lời Kết

Trong bài viết này chúng ta đã cùng khảo sát các đặc trưng mà jQuery Mobile có thể hỗ trợ cho một danh sách đơn giản. Với các đặc trưng này, danh sách có thể trở thành widget hay menu tùy theo mục đích sử dụng của chúng ta.