-------
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">×</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]
-----------