Các hộp thoại (dialog)

Để tạo các hộp thoại trong jQuery Mobile, chúng ta dùng hai thuộc tính là data-rel và data-dialog. Thuộc tính data-rel được gán đến giá trị là dialog được thêm đến liên kết mà từ đó chúng ta điều hướng (bằng cú click chuột) đến trang khác hay trang hộp thoại. Thuộc tính data-dialog với giá trị là true được thêm đến trang hộp thoại. Để hiểu hơn, chúng ta sẽ tạo một tập tin tên Test_Dialog.html có nội dung phần body như sau:


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

  <div data-role="header">

    <h1>Dialog Test</h1>

  </div>

  <div data-role="content">

     <p>

       <a href="#page2">Another Page (normal)</a>

    </p>

     <p>

       <a href="#page3" data-rel="dialog" data-transition="pop">A Dialog (dialog)</a>

     </p>

   </div>

</div>

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

  <div data-role="header">

    <h1>The Second</h1>

  </div>

  <div data-role="content">

    <p>

     This is the Second

    </p>

   </div>

</div>

<div id="page3" data-dialog = "true">

  <div data-role="header">

    <h1>The Third</h1>

  </div>

  <div data-role="content">

   <p>

     This is the Third

   </p>

  </div>

</div>

Chúng ta để ý các dòng mã được bôi màu. Kết quả khi thực thi

Dòng liên kết đầu tiên sẽ điều hướng chúng ta đến một trang thông thường:

Dòng liên kết thứ hai sẽ điều hướng chúng ta đến trang hộp thoại:

Hộp thoại chúng ta, mặc định, chỉ có nút X dùng để thoát. Chúng ta có thể dễ dàng thêm các button đến trang hộp thoại. Thay đổi nội dung tập tin Test_Dialog.html như sau:


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

  <div data-role="header">

    <h1>Dialog Test</h1>

  </div>

  <div data-role="content">

    <p>

      <a href="#page2">Another Page (normal)</a>

    </p>

    <p>

      <a href="#page3" data-rel="dialog">A Dialog (dialog)</a>

    </p>

  </div>

</div>

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

  <div data-role="header">

    <h1>The Second</h1>

  </div>

  <div data-role="content">

   <p>

    This is the Second

   </p>

  </div>

</div>

<div data-role="page" id="page3" data-dialog="true">

  <div data-role="header">

   <h1>The Third</h1>

  </div>

  <div data-role="content">

   <p>

    This is the Third

   </p>

   <a href="#page2" data-role="button">Page 2</a>

   <a href="#" data-role="button" data-rel="back">Cancel</a>

  </div>

</div>

Thực thi và nhấn liên kết thứ hai:

Bây giờ, nếu chúng ta nhấn vào button page 2 chúng ta sẽ chuyển đến trang #page2, nếu nhấn nút Cancel chúng ta sẽ đến trang chúng ta vừa gọi hộp thoại. Trong liên kết của button Cancel có sự xuất hiện của thuộc tính data-rel = “back” dùng để quay trở lại trang trước đó.

Chi tiết hơn về hộp thoại trong jQuery Mobile có thể tham khảo tại https://api.jquerymobile.com/dialog/

 Bố cục dạng Lưới (Grid layout)

Dạng lưới là một trong những layout phổ biến của các trang web vì nó tạo không gian cho nhiều nội dung khác nhau. Với jQuery Mobile chúng ta có thể dễ dàng thiết kế giao diện lưới với hai cột, ba cột, bốn cột và năm cột chỉ bằng cách đơn giản là tham chiếu đến một vài lớp CSS. Tạo một tập tin tên Test_Grid.html có nội dung phần body như sau:


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

  <div data-role="header">

   <h1>Grid Test</h1>

  </div>

  <div data-role="content">

    <div class="ui-grid-a">

      <div class="ui-block-a">

       <h2>

          ĐT nữ Việt Nam - Thái Lan: Hiệp phụ hấp dẫn, 
              tuyệt đỉnh đăng quang

       </h2>

        <p>Đội bóng của chúng ta đã chơi vô cùng xuất sắc 
        và thể hiện bản lĩnh đáng khen trong những thời khắc quyết 
         định ngôi hậu bóng đá Đông Nam Á.</p>

    </div>

    <div class="ui-block-b">

      <h2>

      Hà Nội chìm trong ô nhiễm không khí nghiêm trọng

      </h2>

      <p>

       Trong hai ngày 25 và 26/8, nhiều nơi ở Hà Nội chìm 
       trong sương mù mờ mịt. Các chuyên gia môi trường nhận định, 
       bên cạnh yếu tố độ ẩm, có thêm nguyên nhân ô nhiễm không khí.

     </p>

     </div>

   </div>

  </div>

</div>

Kết quả:

Qua đoạn mã trên chúng ta thấy rằng, để tạo giao diện dạng lưới chúng ta dùng thẻ div và các lớp ui-grid-a (hai cột), ui-grid-b (ba cột), ui-grid-c (bốn cột) và ui-grid-d (năm cột). Trong tập tin Test_Grid.html chúng ta dùng ui-grid-a để tạo giao diện hai cột. Vì là dạng lưới nên trong mỗi cột sẽ gồm các ô dùng để chứa nội dung tương ứng với các việc lồng các thẻ div. Vì giao diện lưới có ít nhất hai và nhiều nhất năm cột nên chúng ta có các lớp định nghĩa  5 ô tương ứng với tối đa 5 cột như sau: ui-block-a (cột đầu tiên), ui-block-b (cột thứ hai), ui-block-c (cột thứ ba), ui-block-d (cột thứ tư), ui-block-e (cột thứ năm). Thay đổi lại nội dung tập tin Test_Grid.html như sau:


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

  <div data-role="header">

   <h1>Grid Test</h1>

  </div>

  <div data-role="content">

     <div class="ui-grid-d">

      <div class="ui-block-a">

        <h2>

          Ô thứ 1

        </h2>

      </div>

      <div class="ui-block-b">

       <h2>

        Ô thứ 2

       </h2>

      </div>

      <div class="ui-block-c">

       <h2>

        Ô thứ 3

      </h2>

     </div>

     <div class="ui-block-d">

      <h2>

       Ô thứ 4

      </h2>

     </div>

     <div class="ui-block-e">

      <h2>

         Ô thứ 5

      </h2>

    </div>

Kết quả:

Để tạo hàng kế tiếp, đơn giản là sao chép hàng đầu và thay đổi nội dung trong các ô cho phù hợp. jQuery Mobile mặc nhiên hiểu rằng hàng mới sẽ bắt đầu bằng ui-block-a.

Có thể xem thêm các ví dụ về Grid tại https://demos.jquerymobile.com/1.4.4/grids/

Thu gọn hay mở rộng nội dung

Trong nhiều trường hợp, chúng ta cần tổ chức nội dung trang web trong những hình thức có thể thu gọn hay mở rộng và jQuery Mobile hỗ trợ thuộc tính data-role=”collapsible” giúp chúng ta thực hiện điều này một cách dễ dàng . Để hiểu chi tiết hơn, hãy xét tập tin Test_CollapsibleBlocks.html có nội dung sau:


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

  <div data-role="header">

    <h1>Lập trình</h1>

  </div>

  <div data-role="content">

    <p>Khóa học đào tạo về các chủ đề:</p>

    <div data-role="collapsible">

    <h3>Ngôn ngữ lập trình</h3>

    <p>

      <strong>C#:</strong>

      Được phát triển bởi Microsoft.

    </p>

    <p>

      <strong>Java:</strong>

       Được phát triển bởi Sun.

    </p>

   </div>

   <div data-role="collapsible">

     <h3>Thiết kế website</h3>

     <p>

      <strong>HTML, CSS:</strong>

       Nền tảng web

     </p>

     <p>

      <strong>jQuery:</strong>

       Một thư viện JavaScript

      </p>

    </div>

  </div>

</div>

Kết quả:

Các nội dung trong các mục Ngôn ngữ lập trình và Thiết kế website được thu gọn (mặc định) bởi data-role = “collapsible”. Muốn xem các nội dung trong các mục này chỉ cần nhấn chuột vào dấu + bên trái các mục đó. Ví dụ xem nội dung mục Ngôn ngữ lập trình:

Khi mở rộng, dấu + sẽ chuyển thành dấu -.

Như đã đề cập ở trên, mặc định, các nội dung sẽ được thu gọn trong các mục áp dụng collapsible. Tuy nhiên, chúng ta có thể thay đổi ứng xử này bằng cách sử dụng thuộc tính data-collapsed=”false”.

Thêm thuộc tính data-collapsed=”false” đến mục Ngôn ngữ lập trình trong tập tin Test_CollapsibleBlocks.html:


<div data-role="collapsible" data-collapsed="false">

  <h3>Ngôn ngữ lập trình</h3>

…

Thực thi lại trang và xem sự thay đổi.

Chúng ta cùng nhìn lại hai khối nội dung Ngôn ngữ lập trình và Thiết kế website:

Giữa hai khối có một khoảng cách do thẻ div. jQuery Mobile cho phép chúng ta có thể gộp hai khối này trong một khối thống nhất bằng cách tổ chức hai khối trong một thẻ div với thuộc tính data-role=”collapsible-set”:


<div data-role="collapsible-set">

  <div data-role="collapsible">

…

  </div>

  <div data-role="collapsible" >

…

  </div>

</div>

Kết quả:

Và khi các khối được hợp nhất trong một khối thống nhất, lúc này chúng ta chỉ được phép mở rộng một trong các khối đó chứ không thể mở rộng đồng thời.

Có thể xem thêm về cách tổ chức các khối nội dung tại https://demos.jquerymobile.com/1.4.4/collapsible/