下午接着学Bootstrap框架插件设计
弹出框
框架除了提示框外，还提供了一种弹出框，主要是通过添加“.popover”类来实现的，和其他的一样，同时添加其他不同的样式类就可以实现多种多样的样式风格
这参考书忒不靠谱，代码又跑不了，我于是又在菜鸟上找了代码教程
<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>
<script>
$(function () { $("[data-toggle='popover']").popover(); });
</script>
这个是最基础的最简单的弹出框案例。写上data-toggle属性和title内容，a标签里的文字就是能触发提示框的位置（鉴于好多地方一直用到data-toggle还有data-xx具体我一下子我忘了，反正这篇文章的最后，我对这两个属性的用法内容要进行一下总结）
动态弹出框稍微复杂点（其实这个静态和动态，我看就是一个依附在文字上，一个依附在按钮上而已，也没一个不会动，一个活蹦乱跳的情况）
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"
data-container="body" data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"
data-container="body" data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
和提示框有点类似，class添加的类还是btn和btn-default，data-placemen还是表示方向，不同的是在提示框里，title属性里的内容是提示内容，而弹出框中的title属性的内容是弹出内容中的标题栏，而主要内容是写在data-content属性中的，data-toggle改成popover，至于这个data-container=“body”的作用，我尝试删除，似乎没什么关系，网上查了一下也没什么结果，说是表示将提示框绑定到指定元素上，可本来就是写在body中的，这么写又能有什么意义呢（container是容器的意思）
警告框
<div class="alert alert-warning alert-dismissible fade in">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<strong>Alert!</strong>这是一个警告框
</div>
警告框他是基于button的，在最外层的div里alert和alert-warning类是一定要添加的，后面的3个东西我看菜鸟上是没有的，也可以正常使用，然后button添加一个close类，添加属性aria-hidden=“true”
关于这个data-dismiss=“alert”，他的作用是给警告添加一个取消键，添加取消键有两种方式，这是其一，还有一种方式是添加js代码
$(".alert").alert()
bootstrap的按钮
框架的按钮有很多种类，例如状态按钮、复选按钮、单选按钮，都是比较常用的插件
状态按钮
这是一款据说非常有特色的按钮，用户在点击后按钮状态将会自动改变，通过JavaScript代码还可以实现按钮状态的重置
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
type="button"> 加载状态
</button>
<script>
$(function() {
$("#fat-btn").click(function(){
$(this).button('loading').delay(100).queue(function() {
$(this).button('reset');
$(this).dequeue();
});
});
});
</script>
button需要添加btn和btn-primary类，还有编写中间状态的属性值data-loading-text
然后js里面就是选中button元素执行函数button（“loading”），即可
后面的语句的意思是延迟，然后依次执行队列中的函数，函数button（‘reset’）的作用是释放按钮重置状态，后面那个dequeue我也说不上来，就当他是配对使用的吧
复选按钮
bootstrap框架提供了自定义风格的复选按钮，主要是通过把标签input定义为checkbox类型来实现的
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> 选项 1
</label>
<label class="btn btn-primary">
<input type="checkbox"> 选项 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> 选项 3
</label>
</div>
</body>
这是基于label元素的，添加btn和btn-primary类
并且赋值input的type类型为checkbox即可
书上还额外添加了autocomplete=“off”，这个是禁止浏览器自动填充表单的功能，没有虽然也能用，我目前还没怎么遇到过自动填充的问题，关于自动填充应该就是类似于输入账号后自动填充浏览器保存的密码这样的吧。
单选按钮
将input标签定义为radio就可以实现单选按钮了
<div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" />单选按钮1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off" >单选按钮2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off" >单选按钮3
</label>
</div>
</div>
这里我是把它写进了一个按钮组里的
bootstrap的折叠
在bootstrap框架中折叠插件使用“.accordion”类来实现，也可以添加一些额外的样式
效果如下：
代码：
<body>
<div>
<div class="panel-group" id="accordion" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
可折叠分组#1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" aria-labelledby="headingOne">
<div class="panel-body">
可折叠分组#1内容区域
克制爹分组#1.......
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
可折叠分组 #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" aria-labelledby="headingTwo">
<div class="panel-body">
可折叠分组 #2
可折叠
可折叠
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
可折叠分组 #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" aria-labelledby="headingThree">
<div class="panel-body">
可折叠分组 #3
可折叠
可折叠
</div>
</div>
</div>
</div>
</div>
</body>
乍一看挺多的，其实量只有这样的三分之一，只是上面的代码写了3个可折叠插件而已
这个可折叠写了多个的话，只有一个插件能够处于折叠状态，也就是说当1处于展开状态时，点击2,2会展开，但是1也会同时折叠
现在来分析一下功能代码的组成
首先是外面一层大的div，3个折叠组件都是包含在里面的，这个div元素中添加了“panel-group”类，和aria-multiselectable=“true"属性，这个属性我百度出来说表示是否能多选，true表示可以，默认为false，但是这里赋值为true还是不能一次展开多个，有点奇怪。后来我看到一个博客说是因为后面代码中的data-parent=”#accordion"让他自动折叠在别人扩展的时候，嗯，确实，我删掉后可以一次展开多个了，但是我又把aria-multiselectable改成false值，还是可以多展开，所以，和这个属性没关系，害，搞人嘛这不是。
继续分析代码吧
在里面一层的div添加panel和panel-default类，还有panel-heading类，把id值设为headingOne
然后是折叠标题部分，添加类“panel-title”，在里面的a标签中添加属性data-toggle=“collapse”还有用id值连接data-parent=“#accordion”，href=“#collapseOne”这个是连接后面的折叠内容，还有还有脸两个属性，aria-expanded=“true”，aria-controls=“collapseOne”，接下来是标题内容
第二部分是折叠内容，div标签设置id值collapseOne，添加类panel-collapse，collapse in还有属性值aria-labelledby=“headingOne，最后是div，带有类名panel-body的折叠内容
这代码里面好像没有用到accordion类，唯一提及的也是id值，但id值可以是任意的，说明不了什么，我看主要的关键词是panel和他的衍生词，有点奇怪的
bootstrap幻灯
最后一个插件了
幻灯是使用.carousel类来实现目标功能的
这个插件书上的太简单，我直接在菜鸟上找了一个幻灯大礼包，多功能
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<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>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg" alt="First slide">
</div>
<div class="item">
<img src="img/2.jpg" alt="Second slide">
</div>
<div class="item">
<img src="img/3.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- 控制按钮 -->
<div style="text-align:center;">
<input type="button" class="btn start-slide" value="Start">
<input type="button" class="btn pause-slide" value="Pause">
<input type="button" class="btn prev-slide" value="Previous Slide">
<input type="button" class="btn next-slide" value="Next Slide">
<input type="button" class="btn slide-one" value="Slide 1">
<input type="button" class="btn slide-two" value="Slide 2">
<input type="button" class="btn slide-three" value="Slide 3">
</div>
<script>
$(function(){
// 初始化轮播
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// 停止轮播
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
// 循环轮播到上一个项目
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// 循环轮播到下一个项目
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
// 循环轮播到某个特定的帧
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>
</body>
明天再分析吧
··········································第二天··············································
整体是能够实现下一张，上一张，指定一张，自动播放，暂停播放，这些功能之前我用jQuery也实现过
首先是一个大的div，id设置为myCarousel，后面会用到，并添加类“carousel slide”，ol元素实现的是里面的小圈导航，在ol元素内添加类“carousel-indicators”，然后是3个li元素，定义了具体的帧下标。然后是添加具体图片的div，添加类名“carousel-inner”，里面每张幻灯元素都添加item类，默认选中的额外添加active。后面的两个a定义了幻灯左右的切换。再后面是几个按钮的定义，里面除了btn还定义了几个类，这是为了和后面js中的方法连接。后面jQuery的方法参考下面这张表：
好的现在是对两个data做一下归纳
data-toggle
这个通常指以什么事件类型触发，常用的有
下拉菜单：data-toggle=“dropdown”
模态框：data-toggle=“model”
提示框：data-toggle=“tooltip”
标签页：data-toggle=“tab”
折叠：data-toggle=“collapse”
弹出框：“data-toggle=“popover”
按钮事件：data-toggle=“button”
data-target
事件一般会作用在标签对象，这个时候就需要用到data-target来指向目标标签
比如：
data-target=“#abc”
data-target=“.cba”
这样就清楚很多了，data-toggle跟的是事件名，data-target是元素名，通常这两个会一起用到
扫一扫
3160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
