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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go语言操作mysql数据库简单例子

Go语言操作数据库非常的简单, 他也有一个类似JDBC的东西"database/sql" 实现类是"github.com/go-sql-driver/mysql...

3484
来自专栏大壮

iOS 动画(理论篇)

1625
来自专栏前端新视界

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

2282
来自专栏Web项目聚集地

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

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

2732
来自专栏架构之路

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

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

3185
来自专栏计算机编程

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

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

1811
来自专栏carven

利用canvas实现毛笔字帖(一)

最近在慕课网上找到了很好的canvas教程, 来自 @liuyubobobo 的 学写一个字 canvas绘图教程 在 @liuyubobobo 老师的系列ca...

1572
来自专栏程序员宝库

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

1353
来自专栏互联网杂技

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

2352
来自专栏Modeng的专栏

Canvas学习系列一:初识canvas

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!!关注微信公众号:Modeng,回复 「前端书籍」上百本经...

1523

扫码关注云+社区