Thanh điều hướng

Trong bài trước, chúng ta đã làm quen với các nút trên vùng header và footer. Tuy nhiên, với jQuery Mobile, chúng  ta có thể tạo các thanh điều hướng, một công cụ hiệu quả hơn so với các nút dùng trên header hay footer.

Để tạo các thanh điều hướng, chúng ta dùng giá trị navbar cho thuộc tính data-role. Ví dụ chúng ta cần chèn một thanh điều hướng đến phần footer của trang  như đoạn mã sau:


<div data-role="content">

   <p>

     <a href="#subpage">Go to the sub page...</a>

   </p>

</div>

<div data-role="footer">

  <div data-role="navbar">

    <ul>

      <li><a href="Home.html" class="ui-btn-active">Home</a></li>

      <li><a href="About.html" >About</a></li>

      <li><a href="Contact.html" >Contact</a></li>

    </ul>

   </div>

</div>

Kết quả:

Chú ý rằng chúng ta dùng lớp ui-btn-active cho liên kết thứ nhất để đánh dấu liên kết này ở trạng thái kích hoạt và để chuyển sang các trang About hay Contact chúng ta cũng cần tắt tính năng Ajax của jQuery Mobile dùng thuộc tính data-ajax (xem lại bài https://ngocminhtran.com/2019/03/18/jquery-mobile-cac-lien-ket-va-hieu-ung-ajax/ )

Số lượng liên kết tối đa trong thanh điều hướng là 5, lúc này jQuery Mobile sẽ tự động điều chỉnh lại kích thước cho thanh điều hướng như ví dụ:

Nếu số liên kết vượt quá 5 thì jQuery Mobile sẽ thể hiện các liên kết trên nhiều hàng

Tương tự, có thể thêm thanh điều hướng đến vùng header


<div data-role="header">

   <div data-role="navbar">

    <ul>

      <li><a href="Home.html" class="ui-btn-active">Home</a></li>

      <li><a href="About.html" >About</a></li>

      <li><a href="Contact.html" >Contact</a></li>

    </ul>

   </div>

</div>

Kết quả:

Trong phần header, nếu phía trên thanh điều hướng có nút hay một nội dung văn bản thì jQuery Mobile sẽ điều chỉnh thanh điều hướng xuống phía dưới, ví dụ:


<div data-role="header">

   <p> Welcome to my website! </p>

   <div data-role="navbar">

     <ul>

       <li><a href="Home.html" class="ui-btn-active">Home</a></li>

       <li><a href="About.html" >About</a></li>

       <li><a href="Contact.html" >Contact</a></li>

     </ul>

   </div>

</div>

Kết quả:

Giữ sự nhất quán cho thanh điều hướng trên các trang

Thanh điều hướng là một trong những thành phần cố định trong layout của một website, nghĩa là nó thường xuất hiện trên nhiều trang khác nhau của website. Để thực hiện điều này chúng ta phải:

  • Phần footer chứa thanh điều hướng phải được đặt trong tất cả các trang.
  • Các footer trên các trang phải dùng cùng data-id
  • Dùng thuộc tính data-position = “fixed” cho footer
  • Dùng hai lớp CSS ui-state-persist và ui-btn-active cho liên kết được đánh dấu kích hoạt trong thanh điều hướng.

Giả sử chúng ta có 3 trang Home.html, About.html và Contact.html. Phần footer của trang Home (mã nguồn) sẽ như sau:


<div data-role="footer" data-position="fixed" data-id="footernav">

   <div data-role="navbar">

     <ul>

       <li><a href="Home.html" class="ui-btn-active ui-state-persist" data-ajax="false">Home</a></li>

       <li><a href="About.html" data-ajax="false" >About</a></li>

       <li><a href="Contact.html" data-ajax="false">Contact</a></li>

     </ul>

   </div>

</div>

Phần footer trang About(mã nguồn):


<div data-role="footer" data-position="fixed" data-id="footernav">

  <div data-role="navbar" >

   <ul>

     <li><a href="Home.html"  data-ajax="false">Home</a></li>

     <li><a href="About.html" class="ui-btn-active ui-state-persist " data-ajax="false" >About</a></li>

     <li><a href="Contact.html" data-ajax="false">Contact</a></li>

   </ul>

  </div>

</div>

Và footer trang Contact (mã nguồn):


<div data-role="footer" data-position="fixed" data-id="footernav">

   <div data-role="navbar">

     <ul>

       <li><a href="Home.html"  data-ajax="false">Home</a></li>

       <li><a href="About.html"  data-ajax="false" >About</a></li>

       <li><a href="Contact.html" class="ui-btn-active ui-state-persist" data-ajax="false">Contact</a></li>

    </ul>

   </div>

</div>

Với thanh điều hướng, bố cục (layout) sẽ giữ được sự nhất quán và giúp người dùng có thể xem nội dung website chúng ta một cách dễ dàng.