Ngu ngơ học làm web (41) - JavaScript trong Bootstrap

tiếp theo của: Ngu ngơ học làm web (40) - Nav, Navbar trong Bootstrap
-------

Phần 41.       JavaScript trong Bootstrap


Đây là clip số 23: Modal – cửa sổ popup


Cửa sổ popup được gọi khi người dùng bấm vào một button hoặc một link.

Cửa sổ popup gồm ba phần: title/header, body và footer.

Cửa sổ popup thường được sử dụng để hiển thị thông báo.

Để có thể hiểu về hoạt động của modal, có thể đọc và làm theo bài viết về JS-Modal, bài viết này thực hiện tạo một modal từ HTML, CSS và JavaScript.

Ví dụ, đây là một modal đơn giản:

<!-- bấm vào nút này để bật lên modal -->
  <button id="btn-click" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Show modal</button>
  <!-- modal -->
  <div id="myModal" class="modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"></div>
        <div class="modal-body">
          <p>Nội dung của modal</p>
        </div>
        <div class="modal-footer"></div>
      </div>
    </div>
  </div>

Ví dụ, đây là một modal phức tạp hơn, và có rất nhiều thuộc tính chưa biết được dùng để làm gì, sau này dùng tới thì tìm hiểu chi tiết sau:

<!-- Button trigger Modal -->
          <button id="btn-click" class="btn btn-primary btn-lg" data-toggle="modal" data-show="true" data-target="#myModal">Show Modal</button>

          <!-- Modal -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title" id="myModalLabel">Congty.com</h4>
                </div>
                <div class="modal-body">
                  Body
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                </div>
              </div> <!-- .modal-content -->
            </div> <!-- .modal-dialog -->
          </div> <!-- .modal -->

Đây là clip số 24: Tooltip và Popover


Tooltip: dùng để hiển thị phần gợi ý, khi rê chuột vào một nút, hay một đối tượng bất kì.

Popover: giống như tooltip, tuy nhiên nội dung hiển thị nhiều hơn.

Tooltip chính là nội dung trong thuộc tính title của HTML. Có thể sử dụng hàm tooltip() của Bootstrap, để hiển thị tooltip đẹp hơn. Ví dụ,

$(document).ready(function() {
        $('#demoTooltip').tooltip();
      });

Gọi tooltip thông qua id hoặc class sẽ dẫn đến tình trạng phải viết rất nhiều các câu lệnh jQuery, để khắc phục vấn đề này, có thể gọi tooltip dựa vào thuộc tính data-toggle=“tooltip”, ví dụ:

<a href="" title="congty.com" data-toggle="tooltip">Show tooltips</a>
$(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
      }); 

Sử dụng thuộc tính data-placement để quy định vị trí hiển thị tooltip, ví dụ:

<a href="" title="congty.com" data-toggle="tooltip" data-placement="right">Show tooltip</a>

Các vị trí hiển thị tooltip gồm: auto, right, bottom, left, top.

Có thể quy định vị trí hiển thị tooltip trong JavaScript, ví dụ:

$(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({
          placement: "bottom",
        });
      }); 

Hoạt động của popover giống với tooltip, chỉ khác là có thêm thuộc tính data-content=“nội dung cần hiển thị”.

Ví dụ,

[HTML]

<a href="#" class="btn btn-primary" data-toggle="popover" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorum ipsam esse, debitis voluptatem impedit pariatur delectus. Nesciunt, ex assumenda!">Popover</a>

[JavaScript]

$(document).ready(function() {
      $('[data-toggle="popover"]').popover();
    });

Đây là clip số 25: Dropdown menu


Ví dụ, một dropdown menu đơn giản:
<div class="dropdown">
    <a href="" data-toggle="dropdown">My Account<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="">Profile</a></li>
      <li><a href="">Change Password</a></li>
      <li class="divider"></li>
      <li><a href="">Logout</a></li>
      <li><a href=""></a></li>
    </ul>
  </div>

Ví dụ, đưa dropdown menu vào thanh navbar:

  <div id="header">
    <div class="container">
      <nav class="navbar navbar-inverse">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Cong ty ABC</a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="main-menu">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Content</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
            <li class="dropdown">
              <a href="" data-toggle="dropdown">My Account<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="">Profile</a></li>
                <li><a href="">Change Password</a></li>
                <li class="divider"></li>
                <li><a href="">Logout</a></li>
                <li><a href=""></a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>

Đây là clip số 26: Tabs


<!-- Nav tabs -->
            <ul class="nav nav-tabs">
              <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
              <li><a href="#account" data-toggle="tab">Account</a></li>
              <li><a href="#settings" data-toggle="tab">Settings</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
              <div class="tab-pane active" id="home">HOME</div>
              <div class="tab-pane" id="account">ACCOUNT</div>
              <div class="tab-pane" id="settings">SETTINGS</div>

            </div>
-----------
Cập nhật [14/10/2017][20/10/2016]
-----------