Bootstrap響應式前端框架筆記十九——標籤頁的使用

Bootstrap響應式前端框架筆記十九——標籤頁的使用

    Bootstrap中經過爲導航標籤增長data-toggle="tab"，配合類或id來進行標籤頁的關聯，示例以下：

<ul class="nav nav-tabs">
			<li class="active">
				<a href="#one" data-toggle="tab" id="aone">第一頁</a>
			</li>
			<li>
				<a href="#two" data-toggle="tab" id="atwo">第二頁</a>
			</li>
			<li>
				<a href="#three" data-toggle="tab" id="athree">第三頁</a>
			</li>
			<li>
				<a href="#four" data-toggle="tab" id="afour">第四頁</a>
			</li>
		</ul>

		<!-- Tab panes -->
		<div class="tab-content">
			<div class="tab-pane active fade in" id="one">On iPhone 7 and iPhone 7 Plus, haptics provide additional ways to physically engage users with tactile feedback that gets attention and reinforces actions. Some system-provided interface elements, such as pickers, switches, and sliders, automatically provide haptic feedback as users interact with them</div>
			<div class="tab-pane" id="two">Using one of the concrete subclasses, you ask the system to generate haptics for a specific scenario and iOS manages the strength and behavior of the feedback based on the scenario you choose. In addition, you can call the prepare method of UIFeedbackGenerator to inform the system that haptic feedback is about to be required and to minimize latency. To learn how to use haptics to provide the best user experience in your app, see 「Haptic Feedback」 in iOS Human Interface Guidelines.

</div>
			<div class="tab-pane" id="three">When the user makes a request involving your service, SiriKit sends your extension an intent object, which describes the user’s request and provides any data related to that request. You use the intent object to provide an appropriate response object, which includes details of how you can handle the user’s request. Siri typically handles all user interactions, but you can use an extension to provide custom UI that incorporates branding or additional information from your app.</div>
			<div class="tab-pane" id="four">To learn how to support SiriKit and give users new ways to access your services, read SiriKit Programming Guide. When you’re ready to implement the app extensions that handle various intents, see Intents Framework Reference and Intents UI Framework Reference.

</div>
		</div>

效果如圖：

 

爲tab-pane類增長fade in類可使標籤切換時帶漸入動畫。

    Bootstrap中的標籤頁JS組件提供了一個tab函數，使用這個方法能夠實現代碼控制標籤的切換，示例以下：

<button class="btn btn-primary" id="cone">第一頁</button>
		<button class="btn btn-primary" id="ctwo">第二頁</button>
		<button class="btn btn-primary" id="cthree">第三頁</button>
		<button class="btn btn-primary" id="cfour">第四頁</button>
		<script>
			$("#cone").on("click",function(){
				$("#aone").tab('show');
			});
			$("#ctwo").on("click",function(){
				$("#atwo").tab('show');
			});
			$("#cthree").on("click",function(){
				$("#athree").tab('show');
			});
			$("#cfour").on("click",function(){
				$("#afour").tab('show');
			});
		</script>

Bootstrap中還提供了一些監聽事件，開發者能夠嚮導航標籤中添加這些監聽事件來監聽標籤頁的狀態，示例以下：

$("#aone").on("show.bs.tab",function(){
				console.log("此標籤頁將要顯示");
			});
			$("#aone").on("shown.bs.tab",function(){
				console.log("此標籤頁已經顯示");
			});
			$("#aone").on("hide.bs.tab",function(){
				console.log("此標籤頁將要隱藏");
			});
			$("#aone").on("hidden.bs.tab",function(){
				console.log("此標籤頁已經隱藏");
			});

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

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

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