在响应式选项卡中引导响应式表
Bootstrap responsive tables inside responsive tabs
在 Boostrap 响应式选项卡中使用可脚的,并且在调整大小后出现问题。如果您在桌面上加载页面,则在您调整屏幕大小之前,一切都按预期工作。调整屏幕大小后,选项卡中的表格将不再起作用。这是双向的,就像您使用浏览器窗口缩小加载页面一样,表格将在响应式选项卡中工作,但是当您展开窗口时,它们会中断。
在 jsfiddle 中重现了该问题
(外部资源可以在小提琴上找到)
$(document).ready(function(){
fakewaffle.responsiveTabs(['xs']);
$('.footable').footable();
});
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<ul class="nav nav-tabs responsive">
<li class="active">
<a data-toggle="tab" href="#tab1">This</a>
</li>
<li>
<a data-toggle="tab" href="#tab2">Is</a>
</li>
<li>
<a data-toggle="tab" href="#tab3">My</a>
</li>
<li>
<a data-toggle="tab" href="#tab4">Boomstick!</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in">
<table class="table table-striped table-bordered table-hover footable toggle-medium">
<thead>
<th>Identifier</th>
<th data-hide="all">Column2</th>
<th data-hide="all">Column3</th>
</thead>
<tbody>
<tr>
<td>Clickme</td>
<td>Okay</td>
<td>Whatever</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Okay</td>
<td>Still Whatever</td>
</tr>
</tbody>
</table>
</div>
<div id="tab2" class="tab-pane fade active">
<table class="table table-striped table-bordered table-hover footable toggle-medium">
<thead>
<th>Identifier</th>
<th data-hide="all">Column2</th>
<th data-hide="all">Column3</th>
</thead>
<tbody>
<tr>
<td>Clickme</td>
<td>Okay</td>
<td>Whatever</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Okay</td>
<td>Still Whatever</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
出现此问题的原因是,当"Boostrap 响应选项卡"更改显示模式(选项卡或手风琴)时,它会从选项卡中删除所有 HTML 内容并将其附加到手风琴,反之亦然。因此,footable 使用的 javascript 事件被删除。
为了使它正常工作,您必须在每次"Boostrap响应选项卡"更改显示模式时重新初始化调整大小的footable。
var panelView = $('.panel-group.responsive').is(':visible');
$( window ).resize( function () {
if ( $('.panel-group.responsive').is(':visible') != panelView ) {
$('.footable').removeClass('footable-loaded').footable();
panelView = $('.panel-group.responsive').is(':visible');
}
} );
现场演示:http://jsfiddle.net/us7hgf3g/
相关文章:
- 如何将垂直选项卡式内容面板更改为具有媒体查询和 jquery 的响应式可折叠面板
- 响应式选项卡的透明背景
- 在响应式选项卡中引导响应式表
- 如何使用引导程序创建导航栏,如响应选项卡
- 具有多个选项和响应的数组
- 在 AJAX 响应后重新选择选项值
- jQueryUI Ressize able 在选项更改时没有响应
- 从 jquery ajax json 响应更新“选择”框中的选项值
- 通过 ajax 在新的浏览器选项卡中打开 JQuery UI 选项卡将直接显示 ajax 响应的 HTML
- 无法在不同的选项卡中呈现多个响应式画布图
- 引导组件选项卡、轮播等没有响应
- 在多个选项卡中测试 websocket 连接会使页面快速响应
- Bootstrap Menu with“;更多“;选项响应性问题
- 将选项卡式内容响应到手风琴-单击选项卡时手风琴关闭
- 试图使响应导航在每个页面中默认隐藏选项
- 为什么在可拖动事件中显示和隐藏snap对象时,可拖动元素不响应snap选项?
- ajax preflight在firefox中出现选项响应200失败
- 添加额外的响应选项卡按钮
- 当将响应选项设置为true时,Chartjs不呈现图表
- 引导响应选项卡显示一段时间后