您好,登錄后才能下訂單哦!
一.標(biāo)簽頁(yè)
標(biāo)簽頁(yè)也就是通常所說(shuō)的選項(xiàng)卡功能。
//基本用法
<ul class="nav nav-tabs">
<li class="active"><a href="#html5"
data-toggle="tab">HTML5</a></li>
<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
<li><a href="#jquery" data-toggle="tab">jQuery</a></li>
<li><a href="#extjs" data-toggle="tab">ExtJS</a></li>
</ul>
<div class="tab-content" >
<div class="tab-pane active" id="html5">...</div>
<div class="tab-pane" id="bootstrap">...</div>
<div class="tab-pane" id="jquery">...</div>
<div class="tab-pane" id="extjs">...</div>
</div>
//可以設(shè)置淡入淡出效果 fade,而 in 表示首選的內(nèi)容默認(rèn)顯示
<div class="tab-pane fade in active" id="html5">
//也可以換成膠囊式
<ul class="nav nav-pills">
//data-target
使用 data-target 綁定或不綁定效果都是一樣的
//使用 JavaScript,直接使用 tab 方法。
$('#nav a').on('click', function (e) { e.preventDefault();
$(this).tab('show');
});
//事件,其他雷同
$('#nav a').on('show.bs.tab', function () {
alert('調(diào)用 tab 時(shí)觸發(fā)!');
});
$('#nav a').on('shown.bs.tab', function () {
alert('顯示完 tab 時(shí)觸發(fā)!');
});
二.工具提示
工具提示就是通過(guò)鼠標(biāo)移動(dòng)選定在特定的元素上時(shí),顯示相關(guān)的提示語(yǔ)。
//基本實(shí)例
<a href="#" data-toggle="tooltip" title="超文本標(biāo)識(shí)符">HTML5</a>
//JS 部分需要聲明
$('#section').tooltip();
工具提示有很多屬性來(lái)配置提示的顯示,具體如下:
<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本標(biāo)識(shí)符" data-animation="false"
data-html="true"
data-placement="auto"
data-selector="a[rel=tooltip]" data-trigger="click"
data-delay="500"
data-template="<b>123</b>"
>HTML5</a>
JavaScript 方式直接去掉前面的 data 即可。包括:animation、html、placement、
selector、original-title、title、trigger、delay、container 和 template 等屬性。
//JavaScript 方式
$('#section a').tooltip({ delay : {
show : 500,
hide : 100,
});
},
container : 'body'
JavaScript 有四個(gè)方法:show、hide、toggle 和 destroy 四種。
//顯示
$('#section a').tooltip('show');
//隱藏
$('#section a').tooltip('hide');
//反轉(zhuǎn)顯示和隱藏
$('#section a').tooltip('toggle');
//隱藏并銷毀
$('#section a').tooltip('destroy');
Tooltip 中事件有四種。
//事件,其他雷同
$('#select a').on('show.bs.tooltip', function () {
alert('調(diào)用 show 時(shí)觸發(fā)!');
});
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。