如何加载引导选项卡面板与选项卡单击
How to load Bootstrap tab panel with tab click?
我在网站上使用Bootstrap选项卡面板:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#chartcontainer1" aria-controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li>
<li role="presentation"><a href="#chartcontainer2" aria-controls="chartcontainer2" role="tab" data-toggle="tab">Chart 2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="chartcontainer1">
<div id="layeredcolumnchart"></div>
</div>
<div role="tabpanel" class="tab-pane" id="chartcontainer2">
<div id="piechart"></div>
</div>
</div>
我想做的是加载非活动面板上的标签点击。
(现在,它加载页面加载的每个面板)
注意:显示隐藏不是我的解决方案,我想要显示的不是外部URL。
如果您希望在单击选项卡时加载选项卡面板内容,则必须使用Ajax。
下面是一个例子。
HTML代码
<ul class="nav nav-tabs tabs-up" id="friends">
<li><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li>
<li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li>
<li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
Javascript代码
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
点击这里查看JSFiddle的演示:-
我认为你需要使用选项卡事件来(重新)加载选项卡内容中的div。
例如:$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
if (e.target=='#chartcontainer1') {
$('#layeredcolumnchart').html('YOUR HTML/JAVASCRIPT/ETC HERE');
// If you need to load jQuery plugins like charts, you need to load
// it here each time you display the tab-content
// $('#layeyedcolumnchart .somediv').somePlugin();
}
})
查看http://getbootstrap.com/javascript/#tabs上的Events部分
我认为你正在寻找一个带有css的load animation
,而不是实际的信息负载。
只需将类fade in
添加到您的活动tabpanel
(您的#chartcontainer1
)和fade
添加到其他tabpanel
,您将激活此效果。
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="chartcontainer1"><!-- Notice the "fade in" classes -->
<div id="layeredcolumnchart">...</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="chartcontainer2"> <!-- Notice the face class -->
<div id="piechart">...</div>
</div>
</div>
我的JSFiddle示例
所以,在做了一些需求过程之后,我想我可能有一个解决方案。
你需要在标签上吹出内容,然后加载图表应用程序来获得动画。
<li role="presentation" class="active"><a href="#chartcontainer1" aria-controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li>
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
if (e.target=='#chartcontainer1') {
$('#chartcontainer1').html('');
makeChartOne();
}
})
function makeChartOne(){
var chart = AmCharts.makeChart( "#chartcontainer1", {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
} ],
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} );
}
相关文章:
- AngularJs列表ng单击以选择选项转换
- 如何在不需要单击按钮的情况下获取选项的值
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 单击Chrome通知后,转到已打开的选项卡
- 如何在快速选项卡式面板中禁用选项卡单击
- 如何在ASP.NET中单击按钮后激活启动选项卡
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 单击select'时将数组行回显到文本区域中;s选项
- 单击选项卡时jquery选项卡选择不起作用
- 单击按钮进入下一个选项卡,而不是单击选项卡
- 单击选项卡时,为什么不在每次单击时切换
- 如何更改单击按钮时的javascript滑块选项
- 单击事件在jquery easyui多选项卡中不起作用
- 关闭浏览器时发出警报,关闭选项卡并前后单击按钮时发出警报
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 隐藏选择选项,并在单击定义的选项后显示它们
- 如何在不刷新页面的情况下每次单击一组选项卡时刷新视图内容窗格
- 高图表图选项单击事件仅在鼠标停留在块中时触发一次
- 选项单击两次
- 提交表单以选择选项.单击