Node.js引入UIBootstrap的方法示例


Posted in Javascript onMay 11, 2018

很多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好的文件。

安装

最小安装需要:

  1. ui-bootstrap-tpls
  2. angular-animate
  3. bootstrap CSS文件
  4. 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。

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

  1. angular-1.4.3.min.js,这个之前就说过了,放在public/javascripts目录下。
  2. angular-animate-1.4.3.min.js(不是这个名字的就改成这样),放在public/javascripts目录下。
  3. ui-bootstrap-tpls-0.13.3.min.js(不是这个名字的就改成这样),放在public/javascripts目录下。
  4. bootstrap-3.1.1.min.css(不是这个名字的就改成这样),放在public/stylesheets目录下。
  5. 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。

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

Javascript 相关文章推荐
js 操作符汇总
Nov 08 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
js html实现计算器功能
Nov 13 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
Node.js使用Angular简单示例
May 11 #Javascript
Node.js 使用AngularJS的方法示例
May 11 #Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 #Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 #Javascript
Node.js使用cookie保持登录的方法
May 11 #Javascript
实例解析Vue.js下载方式及基本概念
May 11 #Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 #Javascript
You might like
15种PHP Encoder的比较
2007/03/06 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python+tkinter实现学生管理系统
2019/08/20 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
信息工程学院毕业生推荐信
2013/11/05 职场文书
建筑施工员岗位职责
2013/11/26 职场文书
社区义诊活动总结
2014/04/30 职场文书
医德医风演讲稿
2014/05/20 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
教师工作表现评语
2014/12/31 职场文书
大国崛起日本观后感
2015/06/02 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书