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指令(https://angular-ui.github.io/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本地离线构建。不过建议这种优化放在快上线前进行,因为项目前期我们不能确切知道具体需要那些指令样式。

发表评论

电子邮件地址不会被公开。 必填项已用*标注