ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件

序言

Bootstrap的JavaScript插件是以JQuery为基础,提供了全新的功能并且还可以扩展现有的Bootstrap组件。通过添加data attribute(data 属性)可以轻松的使用这些插件,当然你也可以使用编程方式的API来使用。 为了使用Bootstrap插件,我们需要添加Bootstrap.js或者Bootstrap.min.js文件到项目中。这两个文件包含了所有的Bootstrap插件,推荐引用Bootstrap.min.js。当然你也可以包含指定的插件来定制化Bootstrap.js,已达到更好的加载速度。

Data属性 VS 编程API

Bootstrap提供了完全通过HTML标记的方式来使用插件,这意味着,你可以不写任何JavaScript代码,事实上这也是Bootstrap推荐的使用方式。

举个栗子,若要使Alert组件支持关闭功能,你可以通过添加data-dismiss="alert"属性到按钮(Botton)或者链接(A)元素上,如下代码所示:

 <div class="alert alert-danger"> 
 
  <button data-dismiss="alert" class="close" type="button">x</button> 
 
  <strong>警告</strong>10秒敌人到达 
 
 </div> 
 

当然,你也可以通过编程方式的API来实现同样的功能:

 <div class="alert alert-danger" id="myalert"> 
 
  <button data-dismiss="alert" class="close" type="button" onclick="$('#myalert').alert('close')">x</button> 
 
  <strong>警告</strong>10秒敌人到达 
 
 </div> 
 

下拉菜单(dropdown.js)

使用dropdown插件(增强交互性),你可以将下拉菜单添加到绝大多数的Bootstrap组件上,比如navbar、tabs等。注:将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素中

如下是一个地域的菜单,通过Razor引擎动态绑定菜单元素:

 <div class="form-group"> 
 
             @Html.LabelFor(model => model.TerritoryId, new { @class = "control-label col-md-2" }) 
 
             @Html.HiddenFor(model => model.TerritoryId) 
 
  <div class="col-md-10"> 
 
  <div id="territorydropdown" class="dropdown"> 
 
  <button id="territorybutton" class="btn btn-sm btn-info" data-toggle="dropdown">@Model.Territory.TerritoryDescription</button> 
 
  <ul id="territories" class="dropdown-menu"> 
 
                         @foreach (var item in ViewBag.TerritoryId) 
 
                         { 
 
  <li><a href="#" tabindex="-1" data-value="@item.Value">@item.Text</a></li> 
 
                         } 
 
  </ul> 
 
  </div> 
 
  </div> 
 
  </div> 
 

注意:通过添加data属性:data-toggle="dropdown" 到Button或者Anchor上,可以切换dropdown下拉菜单,增加了交互性。其中菜单的<a>元素设置tabindex=-1,这样做是为了防止元素成为tab次序的一部分。

模态框(modal.js)

模态框以弹出框的形式可以为用户提供信息亦或者在此之中完成表单提交功能。Bootstrap的模态框本质上有3部分组成:模态框的头、体和一组放置于底部的按钮。你可以在模态框的Body中添加任何标准的HTML标记,包括Text或者嵌入的Youtube视频。

一般来说,务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能。

如下即为一个标准的模态框,包含Header、Body、Footer:

将下面这段HTML标记放在视图的Top或者Bottom:

 <div class="modal fade" id="deleteConfirmationModal" tabindex="-1" role="dialog" aria-hidden="true"> 
 
  <div class="modal-dialog"> 
 
  <div class="modal-content"> 
 
  <div class="modal-header"> 
 
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
  <h4 class="modal-title">删除</h4> 
 
  </div> 
 
  <div class="modal-body"> 
 
  <p>即将删除 '@Model.CompanyName'. </p> 
 
  <p> 
 
  <strong>你确定要继续吗</strong> 
 
  </p> 
 
                 @using (Html.BeginForm("Delete", "Customers", FormMethod.Post, new { @id = "delete-form", role = "form" })) 
 
                 { 
 
                     @Html.HiddenFor(m => m.CustomerId) 
 
                     @Html.AntiForgeryToken() 
 
                 } 
 
  </div> 
 
  <div class="modal-footer"> 
 
  <button type="button" class="btn btn-default" onclick="$('#delete-form').submit();">是.删除</button> 
 
  <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button> 
 
  </div> 
 
  </div> 
 
  </div> 
 
 </div> 

注意:通过在Button上添加data属性:data-dismiss="modal"可以实现对模态框的关闭,当然你也可以使用编程方式API来完成:

 <button type="button" class="btn btn-primary" onclick="$('#deleteConfirmationModal').modal('hide')">取消</button> 

为了展示模态框,我们可以不写任何JavaScript代码,通过添加data-toggle="modal"属性到Button或者Anchor元素上即可,同时,为了表示展示哪一个模态框,需要通过data-target来指定模态框的Id。

 <a href="#" data-toggle="modal" data-target="#deleteConfirmationModal">Delete</a> 

同样,也可以使用编程方式API来打开一个模态框:

 $(document).ready(function () { 
 
 $('#deleteConfirmationModal').modal('show'); 
 
 });

标签页(tab.js)

Tabs可以使用在大的表单上,通过Tabs分割成若干部分显示局部信息,比如在Northwind数据库中存在Customer顾客信息,它包含了基本信息和地址,可以通过Tabs进行Split,如下所示:

要使用Tabs也是非常简单的:首先创建标准的无序列表<ul>元素,需要为它的class设置为nav nav-tabs 或者nav nav-pills。其中<li>包含的<a>元素即为Tab元素,需要设置其data-toggle为tab或者pill属性以及点击它指向的<div>内容:

 <ul id="customertab" class="nav nav-tabs"> 
 
  <li class="active"><a href="#info" data-toggle="tab">Customer Info</a></li> 
 
  <li><a href="#address" data-toggle="tab">Address</a></li> 
 
 </ul> 

为了设置Tabs的内容,需要创建一个父<div>元素并设置class为tab-content,在父的div容器中为每一个Tab内容创建div元素,并设置class为tab-pane和标识的Id,通过添加active来激活哪一个Tab内容的显示。

 <div class="tab-content well"> 
 
  <div class="tab-pane active" id="info"> 
 
  Customer Info 
 
  </div> 
 
  <div class="tab-pane" id="address"> 
 
  Customer Address 
 
  </div> 
 
 </div> 

当然也可以通过编程方式的API来激活:

 $(document).ready(function () { 
 
  $('.nav-tabs a[href="#address"]').tab('show'); 
 
 }); 

工具提示(tooltip.js)

Tooltip能为用户提供额外的信息,Boostrap Tooltip能被用在各种元素上,比如Anchor:

 <a data-toggle="tooltip" data-placement="top" data-original-title="这是提示内容" href="#" >工具提示?</a>  

你可以添加data-toggle="tooltip"来使用tooltip,当然你也可以设置内容的显示位置,通过添加data-placement属性来实现,Bootstrap为我们提供了4种位置:

  • top
  • bottom
  • left
  • right

最后,通过设置data-original-title设置了需要显示的Title。

注意:为了性能的考虑,Tooltip的data-api是可选的,这意味着你必须手动初始化tooltip插件:

 <script type="text/javascript"> 
 
  $(document).ready(function () { 
 
  $('[data-toggle="tooltip"]').tooltip(); 
 
  }); 
 
 </script> 

弹出框(popover.js)

弹出框和Tooltip类似,都可以为用户提供额外的信息,但弹出框可以展示更多的信息,比如允许我们展示一个Header和Content,如下所示:

 <a data-content="关于基础建设问题需要有具体的研讨和商量...." data-placement="bottom" title="" data-toggle="popover" href="#" data-original-title="转至百度">城市规划</a> 

和Tooltip一样,为了性能的考虑,data-api是可选的,这意味着你必须手动初始化popover插件:

 <script type="text/javascript"> 
 
  $(document).ready(function () { 
 
  $('[data-toggle="popover"]').popover(); 
 
  }); 
 
 </script> 

显示的结果如下所示:

手风琴组件(collapse.js)

手风琴组件有若干panel groups组成,每一个panel group依次包含了若干header和content 元素,最常见的使用场景就是FAQ,如下所示:

为了使用手风琴组件,需要对Panel Heading中的<a>设置data-toggle="collapse"和点击它展开的容器(Div)Id,具体如下所示:

 <div class="row"> 
 
  <div class="panel-group" id="accordion"> 
 
  <div class="panel panel-default"> 
 
  <div class="panel-heading"> 
 
  <h4 class="panel-title"> 
 
  <a data-toggle="collapse" data-parent="#accordion" 
 
  href="#questionOne"> 
 
                             问题 1:什么是 Microsoft MVP 奖励? 
 
  </a> 
 
  </h4> 
 
  </div> 
 
  <div id="questionOne" class="panel-collapse collapse in"> 
 
  <div class="panel-body"> 
 
                         解答 1:Microsoft 最有价值专家 (MVP) 奖励是一项针对 Microsoft 技术社区杰出成员的年度奖励,根据 Microsoft 技术社区的成员在过去 12 个月内对 Microsoft 相关离线和在线技术社区所作贡献的大小而确定。 
 
  </div> 
 
  </div> 
 
  </div> 
 
  <div class="panel panel-default"> 
 
  <div class="panel-heading"> 
 
  <h4 class="panel-title"> 
 
  <a data-toggle="collapse" data-parent="#accordion" 
 
  href="#questionTwo"> 
 
                             问题 2:MVP 奖励存在的意义何在? 
 
  </a> 
 
  </h4> 
 
  </div> 
 
  <div id="questionTwo" class="panel-collapse collapse"> 
 
  <div class="panel-body"> 
 
                         解答 2:我们相信,技术社区可以促进自由且客观的知识交流,因此可以构建出一个可靠、独立、真实且可使每个人获益的专业知识来源。Microsoft MVP 奖励旨在表彰那些能积极与其他技术社区成员分享自身知识的全球杰出技术社区领导者。 
 
  </div> 
 
  </div> 
 
  </div> 
 
  </div> 
 
  </div> 

旋转木马组件(carousel.js)

Carousel它本质上是一个幻灯片,循环展示不同的元素,通常展示的是图片,就像旋转木马一样。你可以在许多网站上看到这种组件,要使用它也是非常方便的:

  • 将Carousel组件被包含在一个class为carousel以及data-ride为"carousel"的<div>元素中。
  • 在上述容器里添加一个有序列表<ol>,它将渲染成小圆点代表当前激活的幻灯片(显示在右下角)。
  • 紧接着,添加一个class为carousel-inner的<div>,这个<div>容器包含了实际的幻灯片
  • 然后,添加左右箭头能让用户自由滑动幻灯片
  • 最后,设置滑动切换的时间间隔,通过设置data- interval来实现。当然也可以通过编程方式API来实现
 $('#myCarousel').carousel({ 
 
 interval: 10000 
 
 }) 

将下面HTML标识放在View中即可:

<div class="container-full">
    <div id="myCarousel" class="carousel" data-ride="carousel" data-interval="10000">
        <!-- 指示灯 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="@Url.Content("~/Images/slide1.jpg")" alt="First slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Unto all said together great in image.</h1>
                        <p>Won't saw light to void brought fifth was brought god abundantly for you waters life seasons he after replenish beast. Creepeth beginning.</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Read more</a></p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="@Url.Content("~/Images/slide2.jpg")" alt="Second slide">
                <div class="container">
                    <div class="carousel-caption">
                        
                        <h1>Fowl, land him sixth moving.</h1>
                        <p>Morning wherein which. Fourth man life saying own creeping. Said sixth given.</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="@Url.Content("~/Images/slide3.jpg")" alt="Third slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Far far away, behind the word mountains.</h1>
                        <p>A small river named Duden flows by their place and supplies it with the necessary.</p>
                        <p><a class="btn btn-lg btn-primary" href="#" role="button">See all</a></p>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</div>

展示的效果如下:

小结

在这篇博客中介绍了常见的Bootstrap插件,通过使用数据属性和编程方式的API来使用这些插件,更多插件访问:http://v3.bootcss.com/javascript/ 获取。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

span不如div的地方

页面中产生格式化的效果,我一般比较喜欢用span,因为其本身就是inline的,但是,在进行精细控制时就不行了,比如我想要这个效果,每行由三个部分构成:时间,柱...

22590
来自专栏Material Design组件

后台系统设计(下篇:输入)

·容错格式,允许用户输入多种格式,并智能的处理从而满足程序的数据要求。例如电话输入,允许用户输入空格和 —,系统后台自动清理数据以满足格式要求,而不是报错提示。

16820
来自专栏非著名程序员

精选!5 个必备必知必用的前端插件

IE 不敢说话,猎豹,360 相视对瞄,世界之窗竟然动了脚步,这难道是在跃跃欲试?我靠,竟然是往后退了一步。到时火狐在跃跃欲试。这时,说时迟那时快,Chrome...

1.1K50
来自专栏進无尽的文章

基础篇-app上传小准备及上架后搜索不显示

        app上传中会需要准备一些文件,如 icon图标,launch Image ,itunes Contect 中还需要上传不同尺寸的屏幕截图等,下...

25420
来自专栏世界第一语言是java

vue2(webpack)调用amap高德地图及其UI组件vue2(webpack)调用amap高德地图及其UI组件和标记物#

30730
来自专栏Phoenix的Android之旅

如何加载一张超大高清图

"大图片加载容易做,可是这个需求要保证在不OOM的情况下能放大查看,还要能清晰展示,这得怎么呢?",愁眉苦脸的小呼说到。

10420
来自专栏ionic3+

【风雨欲来的Hybird】(2)Stencil——万物皆组件,与框架无关

Stencil也不是一个新东西,出来快有10个月了,它中文意思是“模版”,是一个Web组件的编译器,它采用微小的虚拟DOM层、有效的单向数据绑定、异步渲染管道(...

15320
来自专栏韩东吉的Unity杂货铺

零基础入门 4: 窗口介绍(完)

上一篇将Unity里几个比较重要的窗口先进行了讲解,以及如何自定义窗口布局,不知道大家都消化的怎么样,今天这篇窗口介绍,将把剩余window的窗口一一进行介绍。

16910
来自专栏魏艾斯博客www.vpsss.net

屏幕 GIF 动态图捕获软件及录制过程

作为站长有时候需要录制屏幕 GIF 动态图片,就得现学现卖。这不魏艾斯博客在使用遨游浏览器的过程中遇到一些 bug 需要提交给官方,遨游技术员希望老魏提供一段正...

25320
来自专栏菩提树下的杨过

silverlight3的"伪"3D续--图片横向轮换

上一篇里,已经知道了“伪3D”是怎么回事,今天结合以前的做的图片广告轮换,又弄了一个图片切换的小东东,不知道以后有什么用,先贴在这里备份: 效果图: ? 因为s...

23090

扫码关注云+社区

领取腾讯云代金券