PJCHENder 未整理筆記

[BS] Bootstrap 4 JavaScript

2018-07-17

[BS] Bootstrap 4 JavaScript

@(CSS)[Bootstrap]

關鍵字:collapse

Collapse

在會被縮放的 collapsible 元素上,加上 data-collapsible 這個屬性(即,帶有 class="collapse" 的元素),則會自動為「觸發它的元素(一般是 <a>)」加上 .active

1
2
3
4
5
6
7
$('[data-collapsible]').on('shown.bs.collapse', function (e) {
$(`[href="#${e.currentTarget.id}"]`).addClass('active');
});

$('[data-collapsible]').on('hidden.bs.collapse', function (e) {
$(`[href="#${e.currentTarget.id}"]`).removeClass('active');
});

:exclamation: 要被 collapsible 的元素如果是清單(<ul>)的話,要用 <div class="collapse"> 把該清單包起來,不可直接在 <ul class="collapse"> 上套用 .collapse

Tooltip

啟用所有具有 data-toggle="tooltip" 元素的 tooltip 功能

1
$('[data-toggle="tooltip"]').tooltip();
1
2
3
4
5
6
7
8
9
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
let anchor = e.target.getAttribute('href');
let previousAnchor = e.relatedTarget.getAttribute('href');

if (!anchor || !previousAnchor) { return }

$(`[href="${previousAnchor}"]`).removeClass('active show');
$(`[href="${anchor}"]`).addClass('active show');
}); // /Bootstrap

ScrollSpy

範例程式碼 @ PJCHENder Codepen

Usage

直接放在 body 上:不需使用 JS

直接把 data-spy="scroll" 寫在 <body> 上的話,不需要在額外使用 JavaScript 去啟動

1
2
3
4
5
6
7
8
9
10
11
<body data-spy="scroll" data-target="#verticalScrollspy">
<nav class="col-3 col-sm-2" id="verticalScrollspy">
<ul class="nav flex-column nav-pills">
<li class="nav-item"><a class="nav-link active" href="#dogs">Dogs</a></li>
</ul>
</nav>

<div class="col-9 col-sm-10">
<!-- 內容放這 -->
</div>
</body>

放在想要的容器上:需使用 JS

<body> 上不添加 data-spy="scroll",添加在想要被監控的元素上,此時需要額外透過 JavaScript 啟動

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<nav class="col-3 col-sm-2" id="verticalScrollspy">
<ul class="nav flex-column nav-pills">
<li class="nav-item"><a class="nav-link active" href="#dogs">Dogs</a></li>
</ul>
</nav>

<div class="col-9 col-sm-10">
<div data-spy="scroll" data-target="#verticalScrollspy">
<!-- 內容放這 -->
</div>
</div>
</body>

透過 JavaScript 來啟動:

1
2
3
$(document).ready(function() {
$('body').scrollspy({ target: '#verticalScrollspy' })
})

Events

1
2
3
4
// 顯示目前 activate 的是哪個 element
$(window).on('activate.bs.scrollspy', function (e,obj) {
console.log(obj.relatedTarget);
});

如果想要在捲動捲軸時,順便更換 url 的 anchor 可以這樣寫:

1
2
3
$(window).on('activate.bs.scrollspy', function (e, obj) {
window.history.replaceState(null, null, obj.relatedTarget);
});

Bootstrap 4 activate.bs.scrollspy event is not firing @ StackOverflow

掃描二維條碼,分享此文章