bootstrap一些注意事项

在开发中我们会经常运用模态框、标签页来显示一些表格之类的数据，但是有些在页面点开就加载完了，造成我们模态框的子级找不到宽高，细节处理还麻烦，所以会用到一些bootstrap自带的事件来处理，方便快捷.

参考文档 http://www.runoob.com/bootstrap/bootstrap-intro.html

模态框 modal

$('#modal').modal('show') //手动打开模态框。
$('#modal').modal('hide')//手动隐藏模态框。

模态框 modal时事件

//在调用 show 方法后触发。
$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})
//当模态框对用户可见时触发（将等待 CSS 过渡效果完成)
$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})
//当调用 hide 实例方法时触发。
$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})
//当模态框完全对用户隐藏时触发。
$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})

Bootstrap 标签页（Tab）插件

// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')

// 选取第一个标签页
$('#myTab a:first').tab('show')

// 选取最后一个标签页
$('#myTab a:last').tab('show')

Bootstrap 标签页（Tab）事件

//事件在标签页显示时触发 但是必须在新标签页被显示之前
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
   var activeTab = $(e.target)[0].hash;
   if(activeTab =="#home"){
        //做些什么
   }
   if(activeTab =="#profile"){
         //做些什么
   }
})

//该事件在标签页显示时触发 但是必须在某个标签页已经显示之后
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
   var activeTab = $(e.target)[0].hash;
   if(activeTab =="#home"){
        //做些什么
   }
   if(activeTab =="#profile"){
         //做些什么
   }
})

赏

谢谢你请我吃糖果

支付宝

微信