ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
2015-04-13 10:10
495 查看
阅读目录
序言
Data属性 VS 编程API
下拉菜单(dropdown.js)
模态框(modal.js)
标签页(tab.js)
工具提示(tooltip.js)
弹出框(popover.js)
手风琴组件(collapse.js)
旋转木马组件(carousel.js)
小结
回到顶部
Bootstrap的JavaScript插件是以JQuery为基础,提供了全新的功能并且还可以扩展现有的Bootstrap组件。通过添加data attribute(data 属性)可以轻松的使用这些插件,当然你也可以使用编程方式的API来使用。
为了使用Bootstrap插件,我们需要添加Bootstrap.js或者Bootstrap.min.js文件到项目中。这两个文件包含了所有的Bootstrap插件,推荐引用Bootstrap.min.js。当然你也可以包含指定的插件来定制化Bootstrap.js,已达到更好的加载速度。
回到顶部
举个栗子,若要使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>
回到顶部
如下是一个地域的菜单,通过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次序的一部分。
回到顶部
一般来说,务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能。
如下即为一个标准的模态框,包含Header、Body、Footer:
展示的效果如下:
回到顶部
序言
Data属性 VS 编程API
下拉菜单(dropdown.js)
模态框(modal.js)
标签页(tab.js)
工具提示(tooltip.js)
弹出框(popover.js)
手风琴组件(collapse.js)
旋转木马组件(carousel.js)
小结
回到顶部
序言
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:
<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>
展示的效果如下:
回到顶部
小结
相关文章推荐
- ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
- ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
- ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
- ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
- ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
- ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers
- ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers
- ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
- ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers
- ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
- ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers
- [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序处理并发
- [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序更新相关数据