欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Node.js引入UIBootstrap的方法示例

 更新時間:2018年05月11日 10:23:04   作者:foruok  
這篇文章主要介紹了Node.js引入UIBootstrap的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

很多Web管理系統(tǒng)的側邊菜單是可折疊的(手風琴樣式),我們在前面兩篇文章里的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管理系統(tǒng)</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>&nbsp;<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定義一個手風琴菜單區(qū)域,close-others屬性可以指定本區(qū)域內的菜單組的展開是否互斥,值為true時,一次只能展開一個菜單組,為false,可以存在多個展開的菜單。(注:這里用菜單一詞不太準確,先這么著。)

accordion-group定義手風琴上的可折疊內容,它的heading屬性指定折疊區(qū)域的標題,is-open屬性指定當前菜單是否打開,為true時打開,你在HTML中指定true或false時,是初始值,用戶點擊后,會改變。你也可以把這個屬性和Angular作用域模型中的數據關聯(lián)在一起。我引用了Angular的ng-repeat指令內置的first屬性,由ng−repeat生成的第一個item的first屬性值為true。所以我設計的手風琴區(qū)域,初始加載時第一個可折疊菜單時打開的。

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: "系統(tǒng)管理",
   enabled: true,
   subMenus:[
    {
     text: "用戶管理",
     enabled: true,
     action:"/admin/addUser"
    },
    {
     text: "角色管理",
     enabled: true,
     action:"/role"    
    },
    {
     text: "權限管理",
     enabled: true,
     action:"/access"    
    }
   ]
  },
  {
   text: "內容管理",
   enabled: true,
   subMenus:[
    {
     text: "直播流監(jiān)控",
     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”,效果如下:

點擊內容管理后,效果如下:

更多UI Bootstrap組件的用法,去看文檔嘍。更多Angular UI,看這里嘍:https://github.com/angular-ui。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • Node.js靜態(tài)服務器的實現方法

    Node.js靜態(tài)服務器的實現方法

    這篇文章主要介紹了Node.js靜態(tài)服務器的實現方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-02-02
  • Node.js中調用mysql存儲過程示例

    Node.js中調用mysql存儲過程示例

    這篇文章主要介紹了Node.js中調用mysql存儲過程示例,本文在windows環(huán)境測試通過,本文一并給出了創(chuàng)建數據庫、錄入數據、創(chuàng)建存儲過程、調用存儲過程等例子,需要的朋友可以參考下
    2014-12-12
  • node.js基于socket.io快速實現一個實時通訊應用

    node.js基于socket.io快速實現一個實時通訊應用

    這篇文章主要介紹了node.js基于socket.io快速實現一個實時通訊應用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • nestjs搭建HTTP與WebSocket服務詳細過程

    nestjs搭建HTTP與WebSocket服務詳細過程

    這篇文章主要介紹了nestjs搭建HTTP與WebSocket服務詳細過程的相關資料,需要的朋友可以參考下
    2022-11-11
  • node學習記錄之搭建web服務器教程

    node學習記錄之搭建web服務器教程

    本篇文章主要介紹了詳解node學習記錄——搭建web服務器,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • Node.JS在命令行中檢查Chrome瀏覽器是否安裝并打開指定網址

    Node.JS在命令行中檢查Chrome瀏覽器是否安裝并打開指定網址

    這篇文章主要介紹了Node.JS在命令行中檢查Chrome瀏覽器是否安裝,并打開指定網址,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • 使用node.js對音視頻文件加密的實例代碼

    使用node.js對音視頻文件加密的實例代碼

    本文通過實例代碼給大家介紹了使用node.js對音視頻文件加密的方法,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧
    2017-08-08
  • node.js中的path.normalize方法使用說明

    node.js中的path.normalize方法使用說明

    這篇文章主要介紹了node.js中的path.normalize方法使用說明,本文介紹了path.normalize的方法說明、語法、使用實例和實現源碼,需要的朋友可以參考下
    2014-12-12
  • nodejs使用socket5進行代理請求的實現

    nodejs使用socket5進行代理請求的實現

    這篇文章主要介紹了nodejs使用socket5進行代理請求的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-02-02
  • Nodejs文件上傳、監(jiān)聽上傳進度的代碼

    Nodejs文件上傳、監(jiān)聽上傳進度的代碼

    這篇文章主要介紹了Nodejs文件上傳、監(jiān)聽上傳進度,本文通過實例代碼給大家詳細介紹,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-03

最新評論