--------------------------------------------------动画过渡(Transitions:css3)-----------------------------------------------------------------------------
模态弹出框(modal) “div.modal”、“div.modal-dialog”和“div.modal-content”
[modal-header][modal-body][modal-foote]
关闭图标:<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
实现方式1:<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data(id/class)" type="button">通过data-target触发</button>
实现方式2:$("#mymodal").modal("toggle")
modal-dialog同级的 modal-lg/sm:控制弹出框大小 “modal”增加类名“fade”为模态弹出框增加一个过渡动画
data-参数说明 http://www.imooc.com/code/3863
data-toggle data-target data-backtrop data-keyboard data-show herf
方法: Options/Toggle/Hide/show
$('#identifier').modal({toggle:false});
$('#identifier').modal('toggle/hide/show');
事件: show/shown.bs.modal 加载前/加载后
hide/hiden.bs.modal
<------------例子--------------->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>*/
/*-----------------------------折叠插件------------------------
<div class="container">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo1" data-parent=
".container">
折叠组件1
</button>
<div class="collapse in" id="demo1">
<h2>qqqqqqqqqqqq</h2>
</div>
</div>
方法: Options/Toggle/Hide/show
$('#identifier').collapse({toggle:false});
$('#identifier').collapse('toggle/hide/show');
事件: show/shown.bs.collapse 加载前/加载后
hide/hiden.bs.collapse
$(function () {
$("#demo1").on('shown.bs.collapse', function(){
alert("内容加载成功!");
});
});
1)<body data-spy="scroll" data-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
等同于$('body').scrollspy({ target: '#navbar-example' })
<---------例子--------->
//设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接。
同时为导航条定义一个id值“navbar-menu”(id名称可自由定义),方便滚动监控。
<nav id="navbar-example" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" title="" class="navbar-brand">教程名称</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#ios" title="">ios</a></li>
<li><a href="#svn" title="">svn</a></li>
<li class="dropdown">
<a href="#" title="" class="dropdown-toggle" data-toggle="dropdown">java</a>
<ul class="dropdown-menu">
<li><a href="#jmeter" title="">jmeter</a></li>
<li><a href="#ejb" title="">ejb</a></li>
<li><a href="#spring" title="">spring</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<----------------------------------内容部分------------------------------------>
设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy(这个类名可自由定义)的容器中,
其中放了多个子内容框。每个子内容框有一个标题,而且每个标题的ID值与导航菜单项中的锚点链接名相对应,
并且注意加入“data-target="#navbar-menu"”属性(这个属性值要与前面的nav标签的id名称保持一致)
监听的组件(body居多)是相对定位,内部样式改写, 加入data-spy="scroll", data-target="#ID"
<---------例子--------->
<div data-spy="scroll" data-target="#navbar-example" style="height:200px;overflow:auto;position:relative;border:2px solid red">
<h3 id="ios">ios</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="svn">svn</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="jmeter">jmeter</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="ejb">ejb</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="spring">spring</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
</div>
--------------------------------------------------------------------------------------标签页插件(选项卡)--------------------------------------
1.选项卡导航链接中要设置 data-toggle="tab"
2. data-target/herf对应内容面板的选择符(一般是ID)";
3.面板内容统一放在 tab-content 容器中,.tab-pane负责每个小窗口,与2中ID相对应
4.胶囊式选项卡:将 nav-tabs 换成 nav-pills,另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。
<!------- 选项卡组件(菜单项nav-tabs)------>
<ul id="myTab" class="nav nav-tabs" role="tablist"> //默认显示第一栏内容,即<li>.active
<li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
<li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!------ 选项卡面板 .tab-content .tab-pane------->
使用fade第一栏要加in
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
<div class="tab-pane fade" id="rule">规则内容面板</div>
<div class="tab-pane fade" id="forum">论坛内容面板</div>
<div class="tab-pane fade" id="security">安全内容面板</div>
<div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
-------------方法与事件--------
方法:tab("show")
删除HTML中自定义的 data-toggle="tab/pill"
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();//阻止默认事件
$(this).tab("show");
});
})
事件: show/shown.bs.tab
$(function (){
$("a[data-toggle="tab"]").on('shown.bs.tab', function(e){
//获取已激活的标签页名称
var activeTab = $(e.target).text();
//获取上一个激活的标签页名称
var previousTab = $(e.relatedTarget).text();
$('.active-tab span').html(activeTab);
$('.previous-tab span').html(previousTab);
})
});
/*--------------------提示框---------------------------->
1.title 属性来定义提示信息 data-toggle="tooltip"
2.data-placement控制提示框出现方位 top/right/bottom/left/auto
3.!!!!!!所有提示框都需要以下脚本
$(function(){$("[data-toggle='tooltip']").tooltip(); });
--------例子-------
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="right"
title="提示框在居右">
提示框居右
</a>
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
$('#myTooltip').tooltip({
title:"我是一个提示框,我在顶部出现",
placement:'top'
});
});
</script>
--------其他属性方法------
data-animation:css渐变滤镜,默认true
data-html/text:向提示工具插入html 默认false
placement: auto left表示优先左边; title selector
data-trigger: 触发方式click/hover/focus
data-delay: 延迟触发
方法tooltip()参数: show/hide/toggle/destroy
事件:show/shown/hide/hiden.bs.tooltip
-------------------弹出框(Popover)----------------------------------
1.相比于提示框,多了 data-content data-toggle="popover"
2.提示框 tooltip 的默认触发事件是 hover 和 focus,而弹出框 popover 是 click
$(function(){
$('#myPopover').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"top"
});
});
-----------------警告框--------------------------------------------
1.在“警示框组件”基础上添加了一个关闭的按钮; 操作关闭按钮时都是先查找 data-target 属性,再查找 href属性
2.如果关闭按钮都没有定义这两个属性,就会操作其父元素
使按钮或链接具有关闭属性:data-dismiss="alert"
<div class="alert alert-success" role="alert">
<button class="close" data-dismiss="alert" type="button" >×</button>
<p>恭喜您操作成功!</p>
</div>
js:$(function(){
$("#close").on("click",function(){
$(this).alert("close");
});
});
-----------------------------------------------------------------------------------图片轮播 Carousel插件----------------------------------------------
1.<div id="slidershow" class="carousel slide(图片切换平滑)" data-ride="carousel">2..3..4..</div>
2.设计轮播图片计数器
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0">1</li>
<li data-target="#slidershow" data-slide-to="1">2</li>
<li data-target="#slidershow" data-slide-to="2">3</li>
</ol>
3.制作图片容器
<div class="carousel-inner"> //carousel-inner控制图片总容器
<div class="item active"> //item控制图片小容器
<a href="##"><img></a>
</div>
<div class="item">
<a href="##"><img></a>
</div>
4. <!-- 设置轮播图片控制器 -->
<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">>
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">>
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
5. 在1中 data-interval:切换等待时间 ,默认5s,false为取消自动切换
data-pause="click" 切换方式,默认hover data-wrap:是否循环,默认true
6.js
属性:interval/pause/wrap
.carousel("cycle"):从左向右循环播放;
.carousel("pause"):停止循环播放;
.carousel("number"):循环到指定的帧,下标从0开始,类似数组;
.carousel("prev"):返回到上一帧;
.carousel("next"):下一帧
$(function(){
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
});
*/
模态弹出框(modal) “div.modal”、“div.modal-dialog”和“div.modal-content”
[modal-header][modal-body][modal-foote]
关闭图标:<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
实现方式1:<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data(id/class)" type="button">通过data-target触发</button>
实现方式2:$("#mymodal").modal("toggle")
modal-dialog同级的 modal-lg/sm:控制弹出框大小 “modal”增加类名“fade”为模态弹出框增加一个过渡动画
data-参数说明 http://www.imooc.com/code/3863
data-toggle data-target data-backtrop data-keyboard data-show herf
方法: Options/Toggle/Hide/show
$('#identifier').modal({toggle:false});
$('#identifier').modal('toggle/hide/show');
事件: show/shown.bs.modal 加载前/加载后
hide/hiden.bs.modal
<------------例子--------------->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>*/
/*-----------------------------折叠插件------------------------
<div class="container">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo1" data-parent=
".container">
折叠组件1
</button>
<div class="collapse in" id="demo1">
<h2>qqqqqqqqqqqq</h2>
</div>
</div>
方法: Options/Toggle/Hide/show
$('#identifier').collapse({toggle:false});
$('#identifier').collapse('toggle/hide/show');
事件: show/shown.bs.collapse 加载前/加载后
hide/hiden.bs.collapse
$(function () {
$("#demo1").on('shown.bs.collapse', function(){
alert("内容加载成功!");
});
});
1)<body data-spy="scroll" data-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
等同于$('body').scrollspy({ target: '#navbar-example' })
<---------例子--------->
//设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接。
同时为导航条定义一个id值“navbar-menu”(id名称可自由定义),方便滚动监控。
<nav id="navbar-example" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" title="" class="navbar-brand">教程名称</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#ios" title="">ios</a></li>
<li><a href="#svn" title="">svn</a></li>
<li class="dropdown">
<a href="#" title="" class="dropdown-toggle" data-toggle="dropdown">java</a>
<ul class="dropdown-menu">
<li><a href="#jmeter" title="">jmeter</a></li>
<li><a href="#ejb" title="">ejb</a></li>
<li><a href="#spring" title="">spring</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<----------------------------------内容部分------------------------------------>
设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy(这个类名可自由定义)的容器中,
其中放了多个子内容框。每个子内容框有一个标题,而且每个标题的ID值与导航菜单项中的锚点链接名相对应,
并且注意加入“data-target="#navbar-menu"”属性(这个属性值要与前面的nav标签的id名称保持一致)
监听的组件(body居多)是相对定位,内部样式改写, 加入data-spy="scroll", data-target="#ID"
<---------例子--------->
<div data-spy="scroll" data-target="#navbar-example" style="height:200px;overflow:auto;position:relative;border:2px solid red">
<h3 id="ios">ios</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="svn">svn</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="jmeter">jmeter</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="ejb">ejb</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="spring">spring</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
</div>
--------------------------------------------------------------------------------------标签页插件(选项卡)--------------------------------------
1.选项卡导航链接中要设置 data-toggle="tab"
2. data-target/herf对应内容面板的选择符(一般是ID)";
3.面板内容统一放在 tab-content 容器中,.tab-pane负责每个小窗口,与2中ID相对应
4.胶囊式选项卡:将 nav-tabs 换成 nav-pills,另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。
<!------- 选项卡组件(菜单项nav-tabs)------>
<ul id="myTab" class="nav nav-tabs" role="tablist"> //默认显示第一栏内容,即<li>.active
<li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
<li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!------ 选项卡面板 .tab-content .tab-pane------->
使用fade第一栏要加in
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
<div class="tab-pane fade" id="rule">规则内容面板</div>
<div class="tab-pane fade" id="forum">论坛内容面板</div>
<div class="tab-pane fade" id="security">安全内容面板</div>
<div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
-------------方法与事件--------
方法:tab("show")
删除HTML中自定义的 data-toggle="tab/pill"
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();//阻止默认事件
$(this).tab("show");
});
})
事件: show/shown.bs.tab
$(function (){
$("a[data-toggle="tab"]").on('shown.bs.tab', function(e){
//获取已激活的标签页名称
var activeTab = $(e.target).text();
//获取上一个激活的标签页名称
var previousTab = $(e.relatedTarget).text();
$('.active-tab span').html(activeTab);
$('.previous-tab span').html(previousTab);
})
});
/*--------------------提示框---------------------------->
1.title 属性来定义提示信息 data-toggle="tooltip"
2.data-placement控制提示框出现方位 top/right/bottom/left/auto
3.!!!!!!所有提示框都需要以下脚本
$(function(){$("[data-toggle='tooltip']").tooltip(); });
--------例子-------
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="right"
title="提示框在居右">
提示框居右
</a>
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
$('#myTooltip').tooltip({
title:"我是一个提示框,我在顶部出现",
placement:'top'
});
});
</script>
--------其他属性方法------
data-animation:css渐变滤镜,默认true
data-html/text:向提示工具插入html 默认false
placement: auto left表示优先左边; title selector
data-trigger: 触发方式click/hover/focus
data-delay: 延迟触发
方法tooltip()参数: show/hide/toggle/destroy
事件:show/shown/hide/hiden.bs.tooltip
-------------------弹出框(Popover)----------------------------------
1.相比于提示框,多了 data-content data-toggle="popover"
2.提示框 tooltip 的默认触发事件是 hover 和 focus,而弹出框 popover 是 click
$(function(){
$('#myPopover').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"top"
});
});
-----------------警告框--------------------------------------------
1.在“警示框组件”基础上添加了一个关闭的按钮; 操作关闭按钮时都是先查找 data-target 属性,再查找 href属性
2.如果关闭按钮都没有定义这两个属性,就会操作其父元素
使按钮或链接具有关闭属性:data-dismiss="alert"
<div class="alert alert-success" role="alert">
<button class="close" data-dismiss="alert" type="button" >×</button>
<p>恭喜您操作成功!</p>
</div>
js:$(function(){
$("#close").on("click",function(){
$(this).alert("close");
});
});
-----------------------------------------------------------------------------------图片轮播 Carousel插件----------------------------------------------
1.<div id="slidershow" class="carousel slide(图片切换平滑)" data-ride="carousel">2..3..4..</div>
2.设计轮播图片计数器
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0">1</li>
<li data-target="#slidershow" data-slide-to="1">2</li>
<li data-target="#slidershow" data-slide-to="2">3</li>
</ol>
3.制作图片容器
<div class="carousel-inner"> //carousel-inner控制图片总容器
<div class="item active"> //item控制图片小容器
<a href="##"><img></a>
</div>
<div class="item">
<a href="##"><img></a>
</div>
4. <!-- 设置轮播图片控制器 -->
<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">>
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">>
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
5. 在1中 data-interval:切换等待时间 ,默认5s,false为取消自动切换
data-pause="click" 切换方式,默认hover data-wrap:是否循环,默认true
6.js
属性:interval/pause/wrap
.carousel("cycle"):从左向右循环播放;
.carousel("pause"):停止循环播放;
.carousel("number"):循环到指定的帧,下标从0开始,类似数组;
.carousel("prev"):返回到上一帧;
.carousel("next"):下一帧
$(function(){
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
});
*/