未加星标

Node.js引入UIBootstrap的方法示例

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

很多Web管理系统的侧边菜单是可折叠的(手风琴样式),我们在前面两篇文章里的HTML模板,自己用div、css做了一些处理,可效果不好。所以我请来了一个前端UI框架,UI Bootstrap,来帮忙。别看它名字里带一个Bootstrap,但它并不依赖Bootstrap,而是用AngularJS实现的原生指令哦。我讨厌太多的依赖,这个我喜欢。

这篇我们以“Angular简单示例”里的AngularDemo为基础,我说到的目录什么的,都遵循express应用的默认目录结构。

UI Bootstrap

UI Bootstrap在github上有一个简单介绍:

Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required.

还有一个Readme,把安装、构建等讲了个大概,这些我都不感兴趣,我要快速将其引入Node.js的应用里,所以一切手动来做,直接下载人家Build好的文件。

安装

最小安装需要:

ui-bootstrap-tpls
angular-animate
bootstrap CSS文件
bootstrap CSS需要的字体文件glyphicons-halflings-regular.woff

我选择带模板的ui-bootstrap库,即带tpls的,这种版本的库,模板与指令混在一起了,不能自定义模板和样式。如果你要自定义外观,那就下载不带tpls的。Build好的文件可以在这里https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files下载,选你喜欢的好了。

0.13.x版本的UI Bootstrap要求Angular 1.3.x或1.4.x。我使用0.13.3版本的UI Bootstrap、1.4.3版本的AngularJS及angular-animate。

1.4.3的Angular及animate组件,都可以到这里下载:https://code.angularjs.org/1.4.3/。打不开就翻qiang或VPN。

bootstrap的CSS文件,这里可以下载:http://www.bootstrapcdn.com/。字体文件google一下可以下载到,或者http://code.taobao.org/svn/mczg/trunk/mczg/WebRoot/bootstrap/fonts/glyphicons-halflings-regular.woff。

都下载后,需要处理一下。

angular-1.4.3.min.js,这个之前就说过了,放在public/javascripts目录下。
angular-animate-1.4.3.min.js(不是这个名字的就改成这样),放在public/javascripts目录下。
ui-bootstrap-tpls-0.13.3.min.js(不是这个名字的就改成这样),放在public/javascripts目录下。
bootstrap-3.1.1.min.css(不是这个名字的就改成这样),放在public/stylesheets目录下。
glyphicons-halflings-regular.woff(不是这个名字的就改成这样),在public目录下新建一个fonts目录,放进去

OK,手动安装基本就绪了。

使用UI Bootstrap组件

为了使用UI Bootstrap,要引入三个js文件,一个css文件。HTML模板大概是这样的:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/stylesheets/bootstrap-3.1.1.min.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
...
<script src="/javascripts/angular-1.4.3.min.js"></script>
<script src="/javascripts/angular-animate-1.4.3.min.js"></script>
<script src="/javascripts/ui-bootstrap-tpls-0.13.3.min.js"></script>
</body>
</html>

然后,你使用Angular,至少还有一个实现作用域模型的js文件,放在“/body”标签上面吧。

在HTML中添加了相关文件后,就可以照着UI Bootstrap的文档来学怎么用相关组件和指令了。

UI Bootstrap的详细文档在这里:http://angular-ui.github.io/bootstrap/。里面对现在支持的指令做了详细介绍,还有现成的例子可以拿赖学习。不过,要翻qiang。

使用UI Bootstrap的Demo

修改两个文件,admin.html和admin.js。

bootstrap-admin.html

把public目录下的admin.html复制一份,重命名为bootstrap-admin.html,用notepad++打开,将内容修改成下面这样:

<!DOCTYPE html>
<html ng-app="x-admin">
<head>
<meta charset="UTF-8">
<title>X管理系统</title>
<link rel="stylesheet" href="/stylesheets/admin.css" rel="external nofollow" >
<link rel="stylesheet" href="/stylesheets/bootstrap-3.1.1.min.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div class="x-view-full" ng-controller="x-controller">
<div class="x-project-header">
<div id="x-project-title">X管理后台</div>
<div id="x-login-user"><a href="/user/tttt" rel="external nofollow" >{{currentUser}}</a> <a href="/logout" rel="external nofollow" >退出</a></div>
</div>
<div class="x-sidemenu">
<accordion close-others="oneAtATime">
<accordion-group heading="{{menu.text}}" ng-repeat="menu in menus" is-open="$first">
<div ng-repeat="subMenu in menu.subMenus"><a href="" ng-click=" rel="external nofollow" setContent(subMenu.action)">{{subMenu.text}}</a></div>
</accordion-group>
</accordion>
</div>
<div class="x-contents">
<div ng-include="content"></div>
</div>
</div>
<script src="/javascripts/angular-1.4.3.min.js"></script>
<script src="/javascripts/angular-animate-1.4.3.min.js"></script>
<script src="/javascripts/ui-bootstrap-tpls-0.13.3.min.js"></script>
<script src="/javascripts/bootstrap-admin.js"></script>
</body>
</html>

你可以和原来的admin.html比较一下,我把class为x-sidemenu的div元素内的item模板,用UI Bootstrap的accordion和accordion-group重写了一下。

accordion定义一个手风琴菜单区域,close-others属性可以指定本区域内的菜单组的展开是否互斥,值为true时,一次只能展开一个菜单组,为false,可以存在多个展开的菜单。(注:这里用菜单一词不太准确,先这么着。)

accordion-group定义手风琴上的可折叠内容,它的heading属性指定折叠区域的标题,is-open属性指定当前菜单是否打开,为true时打开,你在HTML中指定true或false时,是初始值,用户点击后,会改变。你也可以把这个属性和Angular作用域模型中的数据关联在一起。我引用了Angular的ng-repeat指令内置的first属性,由ng−repeat生成的第一个item的first属性值为true。所以我设计的手风琴区域,初始加载时第一个可折叠菜单时打开的。

bootstrap-admin.js

复制原来的admin.js为bootstrap-admin.js,内容修改为下面这样:

angular.module('x-admin', ['ui.bootstrap', 'ngAnimate']).
controller('x-controller', function ($scope, $http) {
$scope.currentUser="ZhangSan";
$scope.content = '/welcome.html';
$scope.oneAtATime = false;
$scope.menus =[
{
text: "系统管理",
enabled: true,
subMenus:[
{
text: "用户管理",
enabled: true,
action:"/admin/addUser"
},
{
text: "角色管理",
enabled: true,
action:"/role"
},
{
text: "权限管理",
enabled: true,
action:"/access"
}
]
},
{
text: "内容管理",
enabled: true,
subMenus:[
{
text: "直播流监控",
enabled: true,
action:"/stream-monitor"
},
{
text: "预约管理",
enabled: true,
action:"/book-mgr"
}
]
},
{
text: "推送管理",
enabled: true,
subMenus:[
{
text: "推送列表",
enabled: true,
action:"/push-list"
},
{
text: "新增推送",
enabled: true,
action:"/add-push"
}
]
}
];
$scope.setContent = function(action){
console.log(action);
$scope.content=action;
};
});

我给$scope设置了oneAtATime属性,初值为false,HTML中accordion元素的close-others属性和oneAtATime绑定了。所以,最终我们的管理菜单是可以同时打开多个的。

最重要的改动是第一行代码:

angular.module('x-admin', ['ui.bootstrap', 'ngAnimate']).

注入了对ui.bootstrap和ngAnimate两个模块的依赖。

好了,最终在浏览器里打开“http://localhost:3000/bootstrap-admin.html”,效果如下:

Node.js引入UIBootstrap的方法示例

点击内容管理后,效果如下:

Node.js引入UIBootstrap的方法示例

更多UI Bootstrap组件的用法,去看文档喽。更多Angular UI,看这里喽:https://github.com/angular-ui。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


您可能感兴趣的文章:Node.js中Bootstrap-table的两种分页的实现方法

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: lt,gt,bootstrap,js,div,Bootstrap,true,script,UI,angular,html,text,min,action
分页:12
转载请注明
本文标题:Node.js引入UIBootstrap的方法示例
本站链接:https://www.codesec.net/view/576441.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(63)