Bootstrap響應式前端框架筆記二十——工具條的應用

Bootstrap響應式前端框架筆記二十——工具條的應用

    工具條用於向用戶進行某個操做的提示，在Bootstrap框架中，爲按鈕添加工具條十分簡單，只需以下代碼：

<button class="btn btn-primary" data-toggle="tooltip" data-placement="top" id="btn">工具條</button>

須要注意，要使工具條顯現，必須先進行工具條對象的構造，示例以下：

$("#btn").tooltip({
	animation:false,
	delay:1000,
	placement:'top',
	title:'標題！！！！',
	trigger:'click'
});

這個方法中能夠傳入一個對象參數，其中animation屬性設置工具條的顯隱是否有動畫效果；delay屬性設置觸發後延遲多久進行工具條的顯隱操做；placement屬性設置工具條出現的位置，可選top，bottom，left，right，auto選項；title屬性設置工具欄標題；trigger屬性設置觸發方式，可選click，hover，focus和manual。

工具條效果以下：

    開發者也能夠手動調用方法來控制工具條的顯示隱藏，示例以下：

//顯示工具欄
$('#show').on('click',function(){
	$('#btn').tooltip('show');
});
//隱藏工具欄
$('#hide').on('click',function(){
	$('#btn').tooltip('hide');
});
//切換顯隱狀態
$('#toggle').on('click',function(){
	$('#btn').tooltip('toggle');
});

Bootstrap中還對工具條提供了一些狀態監聽方法，示例以下：

$('#btn').on('show.bs.tooltip',function(){
	console.log("工具條將要開啓");
});
$('#btn').on('shown.bs.tooltip',function(){
	console.log("工具條已經開啓");
});
$('#btn').on('hide.bs.tooltip',function(){
	console.log("工具條將要關閉");
});
$('#btn').on('hidden.bs.tooltip',function(){
	console.log("工具條已經關閉");
});

   另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/toolJS.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536