BootStrap组件的解释以及使用

UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件。

1. 关于ng-router(angular-router.js)和ui-router(angular-ui-router.js)的区别

ngroute是用AngularJS框架的路由的核心部分。

ui-router是一个社区库,它是用来提高完善ngroute路由功能的。

实例:

使用ng-router:

首先引入js文件

<script src="https://www.jb51.net/js/angular.js"></script> <script src="https://www.jb51.net/js/angular-route.js"></script>

然后在html中

<h2>示例AngularJS 路由应用</h2> <ul> <li><a href="#/" >首页</a></li> // 在angular中,用#号后面内容作为路由跳转的路径(因为在浏览器中#号后面的url是被忽略不计的,所以只相当于浏览器处于同一页面,而 <li><a href="#/computers" >电脑</a></li> //angular根据#号后面的内容来动态更改显示的内容) <li><a href="#/printers" >打印机</a></li> <li><a href="#/blabla" >其他</a></li> </ul> <hr /> <div ng-view> </div> // 用ng-view来显示对应的html视图

在controller中

var myApp = angular.module('myApp',['ngRoute']).config(['$routeProvider', function ($routeProvider) { // 首先在模块中加入那个Route依赖,函数中引入$routerProvider $routeProvider .when('https://www.jb51.net/', {template:'this is main page'}) // 根据提供的when函数来进行相应配置 .when('/computers',{ template:'this is conputer page' }) .when('/printers', { template:'this is printer page' .otherwise({redirectTo: 'https://www.jb51.net/'}); }]);

完成

使用ui-router:

ui-router的使用方法://www.jb51.net/article/78895.htm

1. 使用uib-tooltip

<!--使用Uib-tooltip提示框--> <div> <div> <button uib-tooltip="this is example" tooltip-placement="right" type="button"> 文本提示框 </button> </div> <div> <button href="#" uib-tooltip-html="htmlToolTip">使用html的提示框</button> </div> <div> <button type="text" uib-tooltip-template = "'myTooltipTemplate.html'" tooltip-placement="top-right">模板提示框</button> </div> </div>

<script type="text/ng-template" > <div> <span>使用模板的提示框</span> </div> </script>

tooltip可以使用的属性有:

属性名 默认值 备注
tooltip-animation   true    是否在显示和隐藏时使用动画
tooltip-append-to-body  false   是否将提示框放在body的末尾
tooltip-class       加在tooltip上的自定义的类名
tooltip-enable  true    是否启用
tooltip-is-open false   是否显示提示框
tooltip-placement   top 提示框的位置。可设置的值包括:top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-top,right-bottom
tooltip-popup-close-delay   0   关闭提示框前的延迟时间
tooltip-popup-delay 0   显示提示框前的延迟时间
tooltip-trigger mouseenter  显示提示框的触发事件

2. 使用popover

<!--使用popover提示框--> <div> <div> <button uib-popover="this is popover box" popover-placement="auto" popover-trigger="'mouseenter'">文本提示框</button> </div> <div > <button uib-popover-html="htmlToolTip" popover-trigger="'mouseenter'">html提示框</button> </div> <div> <button uib-popover-template="'myTooltipTemplate.html'" popover-trigger="'mouseenter'" popover-title="tittle here" popover-placement="auto" >模板提示框</button> </div> </div>

popover的属性有:

popover-animation   true    是否在显示和隐藏时使用动画
popover-append-to-body  false   是否将提示框放在body的末尾
popover-enable  true    是否启用
popover-is-open false   是否显示提示框
popover-placement   top 提示框的位置。可设置的值包括:top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-top,right-bottom
popover-popup-close-delay   0   关闭提示框前的延迟时间
popover-popup-delay 0   显示提示框前的延迟时间
popover-trigger mouseenter  显示提示框的触发事件
popover-title       标题

大部分属性和tooltip也是一样的,只是没有popover-class,另外多了个popover-title。

需要注意的一点是,popover的全局配置和tooltip一样,是使用$uibTooltipProvider来配置的。

全局配置tooltip和popover参照网址 https://www.jb51.net/article/143727.htm

2. 使用uib-datepicker并且封装成指令

这个插件是datepicker只能获取日期!不是datetimepicker!还有一个叫timepicker,真纳闷为什么angular团队不把这两个插件组成一个。。。

因为项目用到的第三方库实在太多,不愿意再去别的地方再弄一个时间控件,所以就用了angular自带的这个, 说实话,很一般。。。

上代码吧:

指令声明:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/379f33fc74a422d6a1bd42f4d7198cf6.html