bootstrap(選項卡、提示框和彈出框)
選項卡(Tabs)
選項卡Tabs是Web中一種非常常用的功能。使用者點選或懸浮對應的選單項,能切換出對應的內容
Bootstrap框架中的選項卡主要有兩部分內容組成:
選項卡元件(也就是選單元件),對應的是 Bootstrap的 nav-tabs)
底部可以切換的選項卡面板,在 Bootstrap 中通常 tab-pane 來表示.
<!-- 選項卡元件(選單項nav-tabs)-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href ="#bulletin" role="tab" data-toggle="tab">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="tab">規則</a></li>
<li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li>
<li><a href="#security" role="tab" data-toggle ="tab">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane active" id="bulletin">公告內容面板</div>
<div class="tab-pane" id="rule">規則內容面板</div>
<div class="tab-pane" id="forum">論壇內容面板</div>
<div class="tab-pane" id="security">安全內容面板</div>
<div class="tab-pane" id="welfare">公益內容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
選項卡–選項卡的結構
一個選項卡主要包括兩個部分,其一是選單項,其二是內容面板
關鍵一點,選項卡中連結的錨點要與對應的面板內容容器的ID相匹配。
對於面板內容tab-pane都是隱藏的,只有當前面板內容才是顯示的:
css原始碼:
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
選項卡–觸發切換效果
選項卡也定義data屬性來觸發切換效果。當然前提你也要先載入bootstrap.js或者是tab.js。宣告式觸發選項卡需要滿足以下幾點要求:
1、選項卡導航連結中要設定 data-toggle=”tab”
2、並且設定 data-target=”對應內容面板的選擇符(一般是ID)”;
如果是連結的話,還可以通過 href=”對應內容面板的選擇符(一般是ID)”
主要起的作用是使用者點選的時候能找到該選擇符所對應的面板內容 tab-pane。
3、面板內容統一放在 tab-content 容器中,而且每個內容面板 tab-pane 都需要設定一個獨立的選擇符(最好是ID)與選項卡中的 data-target 或 href 的值匹配。
選項卡–為選擇卡新增fade樣式
為了讓面板的隱藏與顯示在切換的過程效果更流暢,可以在面板中新增類名 fade,讓其產生漸入的效果。
在新增 fade 樣式時,最初的預設顯示的內容面板一定要記得加上 in 類名,不然其內容使用者無法看到
<!-- 選項卡元件(選單項nav-tabs)-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="tab">規則</a></li>
<li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li>
<li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告內容面板</div>
<div class="tab-pane fade" id="rule">規則內容面板</div>
<div class="tab-pane fade" id="forum">論壇內容面板</div>
<div class="tab-pane fade" id="security">安全內容面板</div>
<div class="tab-pane fade" id="welfare">公益內容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
選項卡–膠囊式選項卡(nav-pills)
在Bootstrap除了可以讓 nav-tabs 具有選項卡的切換功能之外,還可以對膠囊式 nav-pills 導航也具有選項卡的功能。我們只需要將 nav-tabs 換成 nav-pills,另外關鍵一點是將 data-toggle=”tab”換成data-toggle=”pill”。
<!-- 選項卡元件(選單項nav-pills)-->
<ul id="myTab" class="nav nav-pills" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="pill">規則</a></li>
<li><a href="#forum" role="tab" data-toggle="pill">論壇</a></li>
<li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告內容面板</div>
<div class="tab-pane fade" id="rule">規則內容面板</div>
<div class="tab-pane fade" id="forum">論壇內容面板</div>
<div class="tab-pane fade" id="security">安全內容面板</div>
<div class="tab-pane fade" id="welfare">公益內容面板</div>
</div>
選項卡–JavaScript觸發方法
在每個連結的單擊事件中呼叫tab(“show”)方法,顯示對應的標籤面板內容。針對上面的示例,刪除HTML中自定義的 data-toggle=”tab” 或 data-toggle=”pill” 的屬性,然後通過下面的指令碼來呼叫:
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
例項 :
<!-- 選項卡元件(選單項nav-tabs)-->
<ul id="myTab2" class="nav nav-tabs" role="tablist">
<li><a href="#a" role="tab">娛樂</a></li>
<li><a href="#b" role="tab">房產</a></li>
<li><a href="#c" role="tab">國內</a></li>
<li><a href="#d" role="tab">國外</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent2" class="tab-content">
<div class="tab-pane fade in active" id="a">娛樂內容面板</div>
<div class="tab-pane fade" id="b">房產內容面板</div>
<div class="tab-pane fade" id="c">國內內容面板</div>
<div class="tab-pane fade" id="d">國外內容面板</div>
</div>
<script>
$(function(){
$("#myTab2 a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
</script>
提示框(Tooltip)
樣式檔案:
LESS版本:對應原始檔 tooltips.less
<style id="jsbin-css">
body {
padding: 100px;
}
.btn {
margin: 20px 10px 20px;
}
</style>
</head>
<body>
<h3>按鈕做的提示框</h3>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="left"
data-original-title="提示框居左"
title="">
提示框居左
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="top"
data-original-title="提示框在頂部">
提示框在頂部
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="bottom"
data-original-title="提示框在底部">
提示框在底部
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="right"
data-original-title="提示框居右">
提示框居右
</button>
<h3>連結製作的提示框</h3>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="left"
title="提示框居左">
提示框居左
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="top"
title="提示框在頂部">
提示框在頂部
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="bottom"
title="提示框在底部">
提示框在底部
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="right"
title="提示框在居右">
提示框居右
</a>
<a href="##"
class="btn btn-primary"
id="myTooltip">
我是提示框
</a>
<a href="##"
class="btn btn-primary"
id="myTooltip2">
我是提示框2
</a>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
//新增提示框的事件
$('[data-toggle="tooltip"]').tooltip();
//能過js來更改提示框
$('#myTooltip').tooltip({
title:"我是一個提示框,我在頂部出現",
placement:'top'
});
});
</script>
通過 title 屬性的值來定義提示資訊(也可以使用自定義屬性 data-original-title 來設定提示資訊)。
通過 data-placement 自定義屬性來控制提示資訊框的位置,根據四種不同的位置,data-placement具有四個值:top、right、bottom和left,分別表示提示框出現的位置在頂部、右邊、底部和左邊。
還有一個最重要的引數不可缺少,data-toggle=”tooltip”。
需要特別注意的是:
1、如果同時設定了 data-original-title 和 title 定義提示資訊,那麼 data-original-title 的優先順序要高於 title。只有 data-original-title 值為空時,才會取 title 的值做為提示資訊的內容。
2、Bootstrap框架中的提示框的觸發方式和前面介紹的外掛略有不同。不能直接通過自定義的屬性 data- 來觸發。必須得依賴於JavaScript的程式碼觸發。
提示框–其他的自定義屬性
提示框–JS設定引數方法
彈出框(Popover)
不同的是:彈出框除了有標題 title 以外還增加了內容 content 部分。這個在提示框中是沒有的。
樣式檔案:
☑ LESS版本:對應的原始檔是 popovers.less
<button type="button" class="btn btn-default" id="myPopover">猛擊我吧</button>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#myPopover').popover({
title:"我是彈出框的標題",
content:"我是彈出框的內容",
placement:"right"
});
});
</script>
<button type="button"
data-toggle="popover"
class="btn btn-default"
id="myPopover">
滑鼠放上顯示彈出框
</button>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
//通過js來定義彈出框
$(function(){
$('#myPopover').popover({
title:"我是彈出框的標題",
content:"我是彈出框的內容",
placement:"top",
trigger:"hover"
});
});
</script>
彈出框–提示框和彈出框的異同
提示框 tooltip 的預設觸發事件是 hover 和 focus,而彈出框 popover 是 click
提示框 tooltip 只有一個內容(title),而彈出框不僅可以設定標題(title)還可以設定內容(content)
提示框tooltip的模板:
<div class="tooltip" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>
彈出框popover的模板:
<div class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>