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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lzj_learn_note

RecyclerView的一些开源LayoutManager

Google默认为RecyclerView提供了LinearLayoutManager、StaggeredGridLayoutManager、GridLayou...

77630
来自专栏進无尽的文章

实践-小效果 II

UIApplication *app = [UIApplication sharedApplication]; // 应用程序右上角数字 app.applica...

11210
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:Poplist控件在APP中的应用场景以及代码

23230
来自专栏程序员宝库

分享前端开发常用代码片段

如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

18550
来自专栏Flutter入门

Flutter开发实战分析-animation_demo解析导读

以下代码基本参考于 flutter_gallery中的animation_demo示例。(可以结合本文看源码) 整体动画效果预览

1K30
来自专栏Web项目聚集地

Javascript将HTML转成PDF并下载「支持多页」

由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览...

46520
来自专栏前端新视界

Angular CLI 升级 6.0 之后遇到的问题

27320
来自专栏计算机编程

SNS项目笔记<六>--手势Gestures

这里直接贴上angular源码地址:angular源码之hammer_gestures <这里方便它更新后的修改> 这里又贴上该地址的源码以便说明:

20810
来自专栏架构之路

HTML5 自定义属性 data-* 和 jQuery.data 详解

新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支...

34850
来自专栏老司机的简书

老司机读书笔记——Weex学习笔记

Weex整体上与Vue语法大概一直,基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。

38040

扫码关注云+社区

领取腾讯云代金券