Meta

文章分类 Tech

标签 Bootstrap

目录

以前写过一篇collapse的简单应用： Bootstrap.Collapse

这次还用到了Expandable Table和Glyphicons图标

Bootstrap 3甚至是mini ver都包含了以下插件相关的js

用例

(html代码，防止被解析请清除start tag里面的空格)

	< tr data-toggle="collapse" href="#finding">
		< td>
			< span class="glyphicon glyphicon-plus-sign"></span>
			...
		</ td>
		< td align="center">#NumItems#</td>
		...
	</ tr>

	< tr id="finding" class="collapse" aria-expanded="false">
			...
	</ tr>

几个要点：

• 响应部分
  • 设置data-toggle="collapse"
  • 设置href的值为对应被响应部分的选择器字串
• 被响应部分
  • 设置class="collapse" aria-expanded="false"
  • 使其能够被响应部分的href选择器选中即可

关于Collapse状态按钮图标

这里使用的是通过Class来添加按钮的方式，展开后为减号，未展开为加号

• 设置其class="glyphicon glyphicon-plus-sign"即可前端添加一个加号按钮
• 建议放到一个空的span当中
• 当点击的时候可以调用以下这段js则在可以在点击后改变按钮

注意

过渡效果的transition.js未被引用或者浏览器不支持的时候，点击按钮后会立刻执行onclick让按钮改变，而collapse效果一段时间过渡，onclick事件完成过快可能导致collapse效果和按钮变化不同步（多次点击可能出现显示错误，因为collapse太慢了o(` · ~ · ′。)o ），这时候只需要关闭过渡效果即可

	$( document ).ready(function() {
		// 关闭过渡效果
		// $.support.transition = false;

		$('.glyphicon').click(function(){
			if ($(this).hasClass('glyphicon-plus-sign') ) {
				$(this).removeClass('glyphicon-plus-sign');
				$(this).addClass('glyphicon-minus-sign');
			}else{
				$(this).removeClass('glyphicon-minus-sign');
				$(this).addClass('glyphicon-plus-sign');
			};
		});
	});

突然想换Hexo了怎么办

参考文献

• Bootstrap3 组件