Thuộc tính data-role

Một trong những lưu ý quan trọng khi thiết kế một trang web dùng ngôn ngữ HTML là phải chú ý phân vùng. Điều này không những giúp người thiết kế web có thể dễ dàng trong việc thiết kế, bảo trì mà quan trọng hơn là giúp các cỗ máy tìm kiếm như Google có thể nhận diện các nội dung trong trang web một cách dễ dàng. HTML5 cung cấp thuộc tính data-role giúp việc phân vùng dễ dàng và nhất là với sự trợ giúp của jQuery Mobile.

Xem lại đoạn mã HTML trong ví dụ trước:


<html>
  <head>
    <title>First Mobile Example</title>
      <meta name="viewport" content="width=device-width, initialscale=1">
      <link rel="stylesheet" href="jquery.mobile-1.4.5.css" />
      <script type="text/javascript" 
          src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
      <script type="text/javascript" 
          src="jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>
      Welcome to our first mobile web site. It's going to be the
      best site you've ever seen. Once we get some content. And a
      business plan. But the hard part is done!
    </p>
    <p>
      <i>Copyright Megacorp © 2012</i>
    </p>
   </body>
</html>

Kết quả:

Thực hiện phân vùng dùng data-role:

<html>
  <head>
    <title>First Mobile Example</title>
    <meta name="viewport" content="width=device-width, initialscale=1">
    <link rel="stylesheet" href="jquery.mobile-1.4.5.css" />
    <script type="text/javascript"
       src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" 
       src="jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">Welcome</div>
      <div data-role="content">
        <p>
          Welcome to our first mobile web site. It's going to be the
          best site you've ever seen. Once we get some content. And
          a business plan. But the hard part is done!
       </p>
      </div>
     <div data-role="footer">
       <i>Copyright Megacorp &copy; 2012</i>
     </div>
    </div>
   </body>
</html>

Đoạn mã trên thêm các phần tử <div> với thuộc tính data-role giúp phân thành các vùng cụ thể như vùng page, header, content và footer. Nếu thực hiện đoạn mã trên chúng ta sẽ thấy sự khác biệt nhờ jQuery Mobile:

Nhờ jQuery Mobile và thuộc tính data-role mà giao diện trang web chúng ta đẹp mắt hơn.

Mã trên CodePen:

Xem bài trước: Sử dụng thư viện jQuery Mobile