AngularJS UI Bootstrap 渐进增强

UI Bootstrap 是 AngularJS 团队在 Bootstrap 基础上，用 AngularJS 实现的一组 UI 控件，包括 Tab 页，手风琴，下拉菜单，模态窗，日期选择等等。原本这些控件在 Bootstrap 里是用 Jquery 写的，而 UI Bootstrap 不依赖 Jquery。刚好最近项目也用到了不小 UI Bootstrap 控件，由于要对 IE8 优雅降级，所以 AngularJS 使用了 1.2.32，Bootstrap 样式使用了 3.x，UI Bootstrap 使用了 0.12.0。

UI Bootstrapt 很强大，不过在具体项目中我们需要对它进行渐进增强。

Radio、Checkbox 自定义样式

尽管 Bootstrap 的 Radio、Checkbox 已经够好看了，可是在不同的浏览器下显示效果还是不一致。简单用 CSS 来修改，很难向下兼容 IE8。怎么办？变通一下，UI Bootstrap 的buttons 指令可模拟 Radio、Checkbox 功能，剩下的就是修改按钮样式了。简单吧，推荐使用字体图标。以 iconfont 为例：

.checkbox, .radio {
  display: inline-block;
  vertical-align: middle;
  font-family: unset !important;
  font-size: 13px;
  font-weight: normal;
  -webkit-font-smoothing: unset;
  -moz-osx-font-smoothing: unset;
}
.checkbox:before, .radio:before, .checkbox.active:before, .radio.active:before {
  vertical-align: middle;
  margin-right: 4px;
  font-family: "iconfont";
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.checkbox.active:before {
  content: "\e864";
}
.checkbox:before {
  content: "\e863";
}
.radio.active:before {
  content: "\e862";
}
.radio:before {
  content: "\e861";
}

先点击此处查看效果。

Modal 垂直居中显示

推荐通过设置 windowClass 选项参数来实现。

.modal.center .modal-dialog {
  position: fixed;
  top: 40%;
  left: 50%;
  min-width: 300px;
  max-width: 600px;
  width: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%)
}

由于要对 IE8 优雅降级，所以用了 HTML 条件注释判断。先点击此处查看效果。

支持 dropdown-submenu

Bootstrap 3 去除了 Bootstrap 2 中的 dropdown-submenu 样式。所以如果我们的下拉菜单要支持子级菜单，就要从 Bootstrap 2 中还原。主要用到下面代码：

.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}
.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
  margin-top: 0;
  margin-bottom: -2px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
  border-left-color: #262626;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}

点击此处查看效果。

UI Bootstrap 和 Bootstrap 代码支持在线离线自定义构建，很容易按需优化。所谓在线构建说是通过网站选择自己需要的指令样式下载，当然也可以使用 UI Bootstrap 插件，编译 less 本地离线构建。不过建议这种优化放在快上线前进行，因为项目前期我们不能确切知道具体需要那些指令样式。