摘要:今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一.UI控件选择 Angularjs是不缺控件的,Github里现成的控件非常丰富,基本上足以应付一个普通管理系统中常见的控件需求。但是控件的丰富会带来选择的困难。选
阅读全文
摘要:Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件。 1 <!DOCTYPE html> 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> 3 <he
阅读全文
摘要:进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条。第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条。 这是一个使用uib-progressbar指令的例子: 1 <!DOCTYPE html> 2 <ht
阅读全文
摘要:Rating是一个用于打分或排名的控件。看一个最简单的例子: 1 <!DOCTYPE html> 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv=
阅读全文
摘要:Typeahead指令是一个用于智能提示或自动完成的控件,就像Jquery的AutoComplete控件一样。来看一个最简单的例子: 1 <!DOCTYPE html> 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/
阅读全文
摘要:alert指令会在页面上显示一条提示消息,效果是这样: 代码为: 1 <!DOCTYPE html> 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equi
阅读全文
摘要:tooltip和popover是轻量的、可扩展的、用于提示的指令。对于移动端来讲,这两个指令虽然可以正常工作,但是从用户体验的角度并不推荐使用。 先说tooltip,tooltip有三种使用方式: (1) uib-tooltip 定义提示的文本 (2)uib-tooltip-html 定义提示的ht
阅读全文
摘要:tabs控件使用uib-tabset指令和uib-tab指令,效果是这样的: 1 <!DOCTYPE html> 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta htt
阅读全文
摘要:ui-bootstrap中有两个分页控件,一个是轻量级的Pager,只有上一页和下一页的功能,另一个是功能完整的Pagination,除了上一页和下一页,还可以选择首页和最后页,并且支持多种页数的显示方式。 这是Pager的例子: 1 <!DOCTYPE html> 2 <html ng-app="
阅读全文
摘要:Datepicker Popup是用来选择日期的控件,一般和文本框一起使用,功能和Jquery的插件My97DatePicker一样。在Datepicker Popup内部使用了ui-bootstrap的另一个组件Datepicker,是Datepicker的扩展。 使用Datepicker Pop
阅读全文
摘要:Accordion手风琴控件使用uib-accordion和uib-accordion-group指令。 效果为: uib-accordion的属性: 属性名称 默认值 说明 close-others true 展开一个面板时是否关闭其他面板 template-url template/accord
阅读全文
摘要:Collapse折叠控件使用uib-collapse指令 1 <!DOCTYPE html> 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="C
阅读全文
摘要:最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得。 目录: AngularJs的UI组件ui-Bootstrap分享(一) AngularJs的UI组件ui-Bootstrap分享(二)——Collapse AngularJs
阅读全文