將介紹如何用AngularJS構(gòu)建一個(gè)強(qiáng)大的web前端系統(tǒng)。angularjs是由Google團(tuán)隊(duì)開發(fā)的一款非常優(yōu)秀web前端框架。在當(dāng)前如此多的web框架下,AngularJS能脫穎而出,從架構(gòu)設(shè)計(jì)上就高人一等,雙向數(shù)據(jù)綁定,依賴注入,指令,MVC,模板。Angular.js創(chuàng)新地把后臺(tái)技術(shù)融入前端開發(fā),掃去jQuery一度的光芒。用angularjs就像寫后臺(tái)代碼,更規(guī)范,更結(jié)構(gòu)化,更可控。
成都創(chuàng)新互聯(lián)公司長(zhǎng)期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為鄠邑企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè),鄠邑網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
本文將介紹如何實(shí)現(xiàn)多限級(jí)導(dǎo)航菜單。
目錄
1.靜態(tài)多級(jí)菜單實(shí)現(xiàn)
2.動(dòng)態(tài)多級(jí)菜單實(shí)現(xiàn)
1. 靜態(tài)多級(jí)菜單實(shí)現(xiàn)
要實(shí)現(xiàn)多級(jí)菜單,我們要分兩步走,第一步就是把靜態(tài)菜單的功能實(shí)現(xiàn),通過純靜態(tài)的HTML代碼完成。第二步,通過Angluarjs進(jìn)行動(dòng)態(tài)實(shí)現(xiàn),最后把數(shù)據(jù)和程序分離,通過Ajax加載多級(jí)菜單數(shù)據(jù)。
我們先從靜態(tài)多級(jí)菜單開始動(dòng)手,一個(gè)六級(jí)導(dǎo)航菜單是什么樣子呢?
如上圖所示,我們定義一些功能需求。
1級(jí)菜單是導(dǎo)航條上的文字。
當(dāng)1級(jí)菜單導(dǎo)航事件被觸發(fā),顯示2級(jí)菜單導(dǎo)航,在1級(jí)菜單的正下方顯示。
當(dāng)2級(jí)菜單導(dǎo)航事件被觸發(fā),顯示3級(jí)菜單導(dǎo)航,在2級(jí)菜單的右方顯示。
當(dāng)3級(jí)菜單導(dǎo)航事件被觸發(fā),顯示4級(jí)菜單導(dǎo)航,在3級(jí)菜單的右方顯示。
以此類推,不考慮下級(jí)菜單顯示出界問題。
繼續(xù)上文中的項(xiàng)目環(huán)境,增加一個(gè)新HTML文件: page3.html
~ vi D:\workspace\javascript\angular-navbar\page3.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>多級(jí)導(dǎo)航菜單</title> <meta name="description" content="多級(jí)導(dǎo)航菜單"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="fragment" content="!" /> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" > <link rel="stylesheet" href="/css/main.css" rel="external nofollow" rel="external nofollow" > </head> <body ng-app="page2"> <div class="container"> <div class="row" ng-controller="NavbarCtrl"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >多級(jí)菜單導(dǎo)航</a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li> <li class="dropdown"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Multi Level <b class="caret"></b></a> <ul class="dropdown-menu menu-top"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 1</a></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a> </li> <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a> <ul class="dropdown-menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 3</a> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 3</a> </li> <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a> <ul class="dropdown-menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 4</a> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 4</a> </li> <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a> <ul class="dropdown-menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 5</a> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 5</a> </li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a> </li> </ul> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 1</a></li> </ul> </li> </ul> </div> </nav> </div> </div> <script src="/bower_components/jquery/dist/jquery.min.js"></script> <script src="/bower_components/angular/angular.min.js"></script> <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="/bower_components/angular-route/angular-route.min.js"></script> <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> <script src="/js/app.js"></script> </body> </html>
新建一個(gè)css文件:main.css
~ vi D:\workspace\javascript\angular-navbar\css\main.css .dropdown:hover .menu-top { display: block; } .dropdown-submenu{ position:relative; } .dropdown-submenu > .dropdown-menu{ top:0; left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu{ display:block; } .dropdown-submenu > a:after{ display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#cccccc; margin-top:5px; margin-right:-10px; } .dropdown-submenu:hover > a:after{ border-left-color:#ffffff; } .dropdown-submenu .pull-left{ float:none; } .dropdown-submenu.pull-left > .dropdown-menu{ left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px; }
刷新一下網(wǎng)頁,我們能就看到上面的截圖的效果,代碼參考:http://firdaus.grandexa.com/2013/09/twitter-bootstrap-3-multilevel-dropdown-menu/
通過HTML和CSS就實(shí)現(xiàn)了多級(jí)菜單的靜態(tài)展示效果,如果導(dǎo)航菜單不是經(jīng)常變化,那么用靜態(tài)的方式,把代碼寫死就可以了。但有一些場(chǎng)景,菜單是需要?jiǎng)討B(tài)生成,比如通過權(quán)限控制訪問鏈接,每個(gè)用戶的權(quán)限不一樣,那么能看到的菜單選項(xiàng)也就不一樣,這個(gè)時(shí)候就需要做成動(dòng)態(tài)的,用程序去控制菜單的加載和展示。
2. 動(dòng)態(tài)多級(jí)菜單實(shí)現(xiàn)
有了靜態(tài)多級(jí)導(dǎo)航菜單的HTML代碼結(jié)構(gòu),改寫成動(dòng)態(tài)的,其實(shí)也不太復(fù)雜。
我們需要做2件事:
把導(dǎo)航菜單的數(shù)據(jù)結(jié)構(gòu)化存儲(chǔ),比如 存放到文件 nav.json。
用Angularjs的API加載nav.json數(shù)據(jù),進(jìn)行展示。
我們先定義一下導(dǎo)航菜單的數(shù)據(jù)格式,以JSON格式定義,每個(gè)菜單項(xiàng)都有3個(gè)屬性字段
label: 導(dǎo)航菜單項(xiàng)顯示的名字。
link: 導(dǎo)航菜單項(xiàng)的跳轉(zhuǎn)鏈接,可以不定義。
children: 導(dǎo)航菜單項(xiàng)的子菜單,循環(huán)對(duì)象存儲(chǔ)。
{ "label": "levelA", "link": "#", "children": [ { "label": "levelB", "link": "#", "children": [] } ] }
下面我們用真實(shí)的數(shù)據(jù)定義導(dǎo)航菜單,以我的金融系統(tǒng)為例。
新建JSON數(shù)據(jù)文件:nav.json。
~ vi D:\workspace\javascript\angular-navbar\js\nav.json [ { "label": "債券", "children": [ { "label": "可轉(zhuǎn)債", "children": [ {"label": "可轉(zhuǎn)債溢價(jià)率分析","link":"#"}, {"label": "可轉(zhuǎn)債NS定價(jià)","link":"#"}, {"label": "可轉(zhuǎn)債歸因分析","link":"#"}, {"label": "可轉(zhuǎn)債套利實(shí)時(shí)監(jiān)控","link":"#"} ] }, { "label": "信用債", "children": [ {"label": "交易所債券監(jiān)控","link":"#"} ] }, { "label": "利率債","link":"#", "children": [] }, { "label": "國債期貨", "children": [ {"label": "國債期貨表現(xiàn)分析","link":"#"}, {"label": "國債期貨實(shí)時(shí)套利監(jiān)控","link":"#"}, {"label": "IRR歷史時(shí)間序列查詢","link":"#"}, {"label": "IRR實(shí)時(shí)監(jiān)控","link":"#"} ] } ] }, { "label": "股票", "children": [ { "label": "基本面分析", "children": [ {"label": "上市公司基本面數(shù)據(jù)查看","link":"#"} ] }, { "label": "量化選股策略", "children": [] } ] }, { "label": "宏觀", "children": [ { "label": "宏觀數(shù)據(jù)", "children": [ {"label": "宏觀數(shù)據(jù)概覽","link":"#"} ] }, { "label": "宏觀經(jīng)濟(jì)預(yù)測(cè)", "children": [] }, { "label": "宏觀經(jīng)濟(jì)和大類資產(chǎn)表現(xiàn)", "children": [] } ] } ]
我們看到這個(gè)導(dǎo)航菜單的數(shù)據(jù),有3級(jí),“債券–>可轉(zhuǎn)債–>可轉(zhuǎn)債歸因分析”,那么接下我們就直接實(shí)現(xiàn)對(duì)三級(jí)菜單的編程。創(chuàng)建HTML文件page4.html。
~ vi D:\workspace\javascript\angular-navbar\page4.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>多級(jí)動(dòng)態(tài)導(dǎo)航菜單</title> <meta name="description" content="多級(jí)動(dòng)態(tài)導(dǎo)航菜單"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="fragment" content="!" /> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" > <link rel="stylesheet" href="/css/main.css" rel="external nofollow" rel="external nofollow" > </head> <body ng-app="page4"> <div class="container"> <div class="row" ng-controller="NavbarCtrl"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="/" rel="external nofollow" >量化投資平臺(tái)</a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li ng-repeat="a1 in navbar" class="dropdown"> <a href="?{{ a1.label }}" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">{{ a1.label }} <b class="caret"></b></a> <ul class="dropdown-menu menu-top"> <li ng-repeat="a2 in a1.children" class="dropdown-submenu"> <a tabindex="-1" href="?{{ a2.label }}" rel="external nofollow" >{{ a2.label }}</a> <ul ng-show="a2.children.length>0" class="dropdown-menu"> <li ng-repeat="a3 in a2.children"> <a href="?{{ a3.label }}" rel="external nofollow" ng-click="go(a3.link)">{{ a3.label }}</a> </li> </ul> </li> </ul> </li> </ul> </div> </nav> </div> </div> <script src="/bower_components/jquery/dist/jquery.min.js"></script> <script src="/bower_components/angular/angular.min.js"></script> <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="/bower_components/angular-route/angular-route.min.js"></script> <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> <script src="/js/app.js"></script> </body> </html>
在Angularjs的控制器文件app.js文件中,增加page4的定義。
var page4 = angular.module('page4', ['ui.bootstrap', 'ngRoute']); page4.config(['$routeProvider', '$locationProvider', '$sceProvider', function ($routeProvider, $locationProvider, $sceProvider) { $routeProvider .when('/', {controller: 'DemoCtrl'}) .otherwise({redirectTo: '/'}); $locationProvider.html5Mode(true); }]); page4.controller('NavbarCtrl', function ($scope,$http,$location) { $http.get("/js/nav.json").success(function(json){ $scope.navbar = json; }); }); page4.controller('DemoCtrl', function () { // nothing });
查看一下顯示效果,與上面的截圖類似。
文章到這里就結(jié)束了,已經(jīng)實(shí)現(xiàn)了我的功能需求。但這個(gè)話題還有很多可以優(yōu)化的地方,比如實(shí)現(xiàn)無限級(jí)的導(dǎo)航菜單,菜單的展示樣式替換,展示區(qū)間的控制,鼠標(biāo)動(dòng)作事件,封裝成Angularjs的插件開源項(xiàng)目等。有興趣的同學(xué),可以我的程序的基礎(chǔ)上繼續(xù)努力,做出優(yōu)秀的開源項(xiàng)目來。
代碼已上傳到github:https://github.com/bsspirit/angular-navbar,同學(xué)可以根據(jù)需要自行下載,也可以直接通過命令下載代碼。
git clone https://github.com/bsspirit/angular-navbar.git cd angular-navbar bower install anywhere
總結(jié)
以上所述是小編給大家介紹的AngularJS+Bootstrap3多級(jí)導(dǎo)航菜單的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
本文標(biāo)題:AngularJS+Bootstrap3多級(jí)導(dǎo)航菜單的實(shí)現(xiàn)代碼
網(wǎng)站地址:http://bm7419.com/article44/iiojhe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、網(wǎng)站設(shè)計(jì)、服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)