Bootstrap——JavaScript外掛
1、輪播圖
role、aria-xx屬性,只跟語義相關。
修改id名,也可以用section等代替最外層div。該盒子必須加上 class="carousel slide" data-ride="carousel" 表示當前是一個輪播圖,bootstrap.js會自動為當前元素新增圖片輪播的特效。
每一個li就是一個單獨的控制點。data-target屬性指定當前控制點控制的是哪一個輪播圖,data-slide-to屬性指當前的li元素繫結的是第幾個輪播項。預設必須給其中某個li加上active,展示的時候就是焦點專案。
.carousel-inner是所有輪播項的容器盒子。
左右兩個控制按鈕,分別點選可以滾動到上一張和下一張。該a連結的href屬性必須指向需要控制的輪播圖ID,data-slide="prev"代表點選該連結會滾到上一張,設定為next則相反。
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 活動指示器,下面的小點 --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <!-- 輪播項 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"></div> <!-- 每張圖片的標題,可不用 --> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"></div> </div> </div> <!-- 控制按鈕 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
根據螢幕大小,選擇大小不同的圖片。
Bootstrap預設設定圖片max-width:100%,想在一個較小螢幕下展示一個超寬的圖片,並讓圖片居中顯示。兩種辦法:換用背景圖的方式,background-position: center center;background-size:cover;;使img元素絕對定位,left:50%,margin-left: -width/2。
圖片響應式:各種終端都需要正常顯示圖片,移動端應該使用更小的圖片,且隨螢幕大小等比例變化。使用<img>。
如果大圖時設定為<img>,如何實現cover?如果小圖是設定為背景圖片,如何實現高度隨螢幕大小變化?下面是最優方案嗎?
<!-- 輪播項 -->
<div class="carousel-inner" role="listbox">
<div class="item active" data-image-lg="img/slide_01_2000x410.jpg"
data-image-xs="img/slide_01_640x340.jpg"></div>
<div class="item" data-image-lg="img/slide_02_2000x410.jpg"
data-image-xs="img/slide_02_640x340.jpg"></div>
</div>
#main_ad>.carousel-inner>.item{
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
/* 當螢幕大於768時執行 */
@media (min-width:768px){
#main_ad>.carousel-inner>.item{
height:410px;
}
}
#main_ad>.carousel-inner>.item>img{
width:100%;
}
$(function(){
/* 根據螢幕大小決定顯示大圖還是小圖 */
function resize(){
// 獲取螢幕大小
var windowWidth=$(window).width();
// 判斷螢幕大還是小
var isSmallScreen=windowWidth<768;
// 根據螢幕大小給item設定背景圖
$("#main_ad>.carousel-inner>.item").each(function(index,item){
var $item=$(item);
// var imgSrc=isSmallScreen?$item.data("imageXs"):$item.data("imageLg");
var imgSrc=$item.data(isSmallScreen?"imageXs":"imageLg");
// 大圖時設定為背景圖片,固定高度且居中(小圖也有)
$item.css("backgroundImage","url("+imgSrc+")");
// 小圖時設定為內部的<img>,隨視窗大小等比例變化
if(isSmallScreen){
$item.html('<img src="'+imgSrc+'" alt="">');
}else{
$item.html("");
}
});
}
// resize(); 用trigger()代替
$(window).resize(resize).trigger("resize"); // 當調整瀏覽器視窗大小時
});
對於移動端,手指滑動控制輪播圖的切換。
/* 輪播圖左滑右滑 */
// 獲取輪播圖容器
var $carousel=$(".carousel");
// 1.獲取手指在輪播圖元素上的滑動方向(左右)
var startX;
var endX;
var offset=50;
// 註冊滑動事件
$carousel.on("touchstart",function(event){
// 獲取觸控開始時手指所在座標X
startX=event.originalEvent.touches[0].clientX;
});
$carousel.on("touchmove",function(event){
// 獲取觸控結束時手指所在座標X,通過重複給變數賦值
endX=event.originalEvent.touches[0].clientX;
});
$carousel.on("touchend",function(){
// 控制靈敏度,滑動超過一定畫素才認為有滑動
var distance=Math.abs(startX-endX);
if(distance>offset){
// 2.根據滑動方向選擇上一張或下一張
$(this).carousel(startX>endX?'next':'prev');
}
});
2、標籤頁、選項卡
新增.fade使標籤淡入,.in使初始內容可見。
<div>
<!-- 選項卡標籤:無序列表 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- 選項卡面板 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
<div role="tabpanel" class="tab-pane fade" id="messages">...</div>
<div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>
</div>
選項卡滾動、給導航條加橫向滾動條、控制標籤頁的標籤容器寬度。
1.給ul加一個容器,使該容器有橫向滾動條;
2.動態設定ul的寬度,寬度是所有li內容寬度之和。
<div class="ul-wrapper">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
$(function(){
var $ulContainer=$(".nav-tabs");
// 獲取所有子元素的寬度和
var width=30; // ul上有padding-left
$ulContainer.children().each(function(index,ele){
width+=ele.clientWidth; // 或$(ele).width()
});
// 如果當前ul寬度超出螢幕寬度,為ul設定寬度,顯示橫向滾動條
if(width>$(window).width()){
$ulContainer
.css("width",width+"px")
.parent().css("overflow-x","scroll");
}
});
3、工具提示tooltip
在元素上新增如下程式碼。且必須通過js初始化。
data-toggle="tooltip" data-placement="top" title="提示內容"
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
4、附加導航Affix
附加導航(Affix)外掛允許指定 <div> 固定在頁面的某個位置position:fixed。
如需向元素新增附加導航(Affix)行為,只需向需要監聽的元素新增data-spy="affix"即可。使用偏移data-offset-來定義何時切換元素的鎖定和移動。
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
...
</div>
5、模態框Modal
一個視窗,覆蓋整個螢幕,螢幕的其它內容不能被點選。但對於Bootstrap,點選螢幕其它位置模態框被關閉。
模態框儘量作為body的直接子元素,建議放在html程式碼尾部。
<!-- 點選該元素觸發模態框,不一定是<button> -->
<button type="button" data-toggle="modal" data-target="#myModal">觸發模態框</button>
<!-- 模態框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">模態框標題</h4>
</div>
<div class="modal-body">
<p>正文內容</p>
</div>
<div class="modal-footer"> <!-- 不用時可刪除 -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>