CUF Navigation

├── .gitignore ├── Gruntfile.js ├── README.md ├── bower.json ├── build ├── css │ └── angular-cuf-nav.min.css └── js │ └── angular-cuf-nav.min.js ├── code-prettify ├── prettify.css └── prettify.js ├── css └── style.css ├── data └── navConf.json ├── img └── angular-cuf-nav.png ├── index.html ├── index.js ├── package.json ├── partials ├── api.html ├── example1.html ├── example2.html ├── example3.html ├── example4.html ├── example5.html └── usage.html └── src ├── css └── angular-cuf-nav.css ├── js └── angular-cuf-nav.js └── template ├── cufNav.html ├── cufNavChildItem.html └── cufNavItem.html /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components/ 2 | node_modules/ 3 | tmp/ 4 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | // Load grunt tasks automatically 4 | require('load-grunt-tasks')(grunt); 5 | 6 | // Time how long tasks take. Can help when optimizing build times 7 | require('time-grunt')(grunt); 8 | 9 | // Project configuration. 10 | grunt.initConfig({ 11 | pkg: grunt.file.readJSON('package.json'), 12 | banner: '/*! <%= pkg.name %> by hjzheng <%= grunt.template.today("yyyy-mm-dd") %> */\n', 13 | uglify: { 14 | options: { 15 | banner: '<%= banner %>' 16 | }, 17 | build: { 18 | src: 'tmp/<%= pkg.name %>.all.js', 19 | dest: 'build/js/<%= pkg.name %>.min.js' 20 | } 21 | }, 22 | cssmin: { 23 | options: { 24 | banner: '<%= banner %>' 25 | }, 26 | build: { 27 | src: 'src/css/<%= pkg.name %>.css', 28 | dest: 'build/css/<%= pkg.name %>.min.css' 29 | } 30 | }, 31 | html2js: { 32 | options: { 33 | module: 'cuf-nav-template' 34 | }, 35 | main: { 36 | src: ['src/template/*.html'], 37 | dest: 'tmp/templates.js' 38 | } 39 | }, 40 | copy: { 41 | main: { 42 | files:[ 43 | {expand: true, cwd: 'src/js', src: ['*.js'], dest: 'tmp/'} 44 | ] 45 | } 46 | }, 47 | concat: { 48 | main: { 49 | src: ['tmp/templates.js', 'tmp/<%= pkg.name %>.js'], 50 | dest: 'tmp/<%= pkg.name %>.all.js' 51 | } 52 | }, 53 | clean: { 54 | all: ['tmp', 'build/*'], 55 | tmp: ['tmp'] 56 | }, 57 | //use ngmin for uglify angular bug 58 | ngmin: { 59 | main: { 60 | src: 'tmp/<%= pkg.name %>.all.js', 61 | dest: 'tmp/<%= pkg.name %>.all.js' 62 | } 63 | } 64 | }); 65 | 66 | //Load the plugin that provides the task. 67 | //grunt.loadNpmTasks('grunt-contrib-uglify'); 68 | //grunt.loadNpmTasks('grunt-contrib-cssmin'); 69 | 70 | // Default task(s). 71 | grunt.registerTask('default', ['clean:all', 'copy:main', 'html2js:main', 'concat:main', 'ngmin', 'uglify', 'cssmin']); 72 | 73 | }; 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-cuf-nav 2 | 基于angular的导航菜单 http://get-set.cn/angular-cuf-nav 3 | 4 | ![ScreenShot](https://github.com/hjzheng/angular-cuf-nav/raw/master/img/angular-cuf-nav.png) 5 | 6 | ### Usage 7 | 8 | - Step1: 引入依赖的文件 9 | ```html 10 | 11 | 12 | 13 | 14 | 15 | 16 | ``` 17 | 18 | - Step2: 配置依赖模块 19 | ```javascript 20 | angular.module('test', ['cuf.nav']); 21 | ``` 22 | 23 | ### API 24 | 25 | | 指令 | 描述 | 26 | | ----- | --------- | 27 | | cufNav | 最上层标签 | 28 | | cufNavItem | cufNav的直接子标签 | 29 | | cufNavChildItem | 最后一层标签,可以自己相互嵌套，达到多级菜单效果 | 30 | 31 | **cufNav** 32 | 33 | |参数 | 值 | 作用 | 34 | | --- | --- | ----| 35 | |triggered-event| click 或者 mouseover 默认click | 决定导航菜单以什么事件触发展开| 36 | 37 | **cufNavItem** 38 | 39 | | 参数 | 值 |作用 | 40 | | ----- | --------- | ----| 41 | | label | 字符串 | 决定菜单显示, 它的值必须唯一| 42 | |href |字符串 |一般结合ngRoute或ui.router去使用| 43 | |triggered-event| click 或者 mouseover 默认会使用cufNav的triggered-event值 |决定导航子菜单以什么事件触发展开| 44 | |has-children |布尔值 | 如果cufNavItem下需要包含cufNavChildItem标签，就必须配置该属性，反之不要配| 45 | |item-click | 函数 | | 46 | 47 | 48 | **cufNavChildItem** 49 | 50 | |参数| 值| 作用| 51 | | ----- | --------- | ----| 52 | |label |字符串 |决定菜单显示, 它的值必须唯一| 53 | | href |字符串 |一般结合ngRoute或ui.router去使用| 54 | |has-children |布尔值 | 如果cufNavChildItem下需要嵌套cufNavChildItem标签，就必须配置该属性，反之不要配| 55 | |item-click | 函数 | | 56 | 57 | ### Example 58 | - [Example1](http://get-set.cn/angular-cuf-nav/#/example1) 59 | - [Example2](http://get-set.cn/angular-cuf-nav/#/example2) 60 | - [Example3](http://get-set.cn/angular-cuf-nav/#/example3) 61 | - [Example4](http://get-set.cn/angular-cuf-nav/#/example4) 62 | - [Example5](http://get-set.cn/angular-cuf-nav/#/example5) 63 | 64 | ### More 65 | - git clone https://github.com/hjzheng/angular-cuf-nav 66 | - cd angular-cuf-nav 67 | - npm install 68 | - bower install 69 | - 启动一个喜欢的web server, 使用喜欢的浏览器访问即可 70 | - 或者直接访问 http://get-set.cn/angular-cuf-nav 71 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-cuf-nav", 3 | "description": "Angular Navigation Menu", 4 | "version": "0.0.0", 5 | "homepage": "https://github.com/hjzheng/angular-cuf-nav", 6 | "license": "MIT", 7 | "private": true, 8 | "dependencies": { 9 | "angular": "~1.3.x", 10 | "jquery": ">=1.10.2", 11 | "bootstrap": "~3.1.1", 12 | "angular-ui-router": "^0.2.13", 13 | "angular-resource": "~1.3.x" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /build/css/angular-cuf-nav.min.css: -------------------------------------------------------------------------------- 1 | .link{cursor:pointer}.dropdown-open{background-color:#EEE!important}.dropdown-menu-show{display:block!important}.dropdown-submenu{position:relative}.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px;-moz-border-radius:0 6px 6px;border-radius:0 6px 6px}.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent transparent transparent #ccc;border-style:solid;border-width:5px 0 5px 5px;margin-top:5px;margin-right:-10px}.dropdown-submenu:hover>a:after{border-left-color:#fff}.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}@media (max-width:768px){.platform-nav-area{min-height:0!important}.dropdown-menu-show{position:static!important;float:none!important;width:auto!important;margin-top:0!important;background-color:transparent!important;border:0!important;box-shadow:none!important}.dropdown-submenu>a:after{display:inline-block;content:"";float:none;width:0;height:0;border-color:#777 transparent transparent!important;border-style:solid;border-width:5px 5px 0!important;margin-top:5px;margin-left:5px}} -------------------------------------------------------------------------------- /build/js/angular-cuf-nav.min.js: -------------------------------------------------------------------------------- 1 | /*! angular-cuf-nav by hjzheng 2016-02-29 */ 2 | angular.module("cuf-nav-template",["template/cufNav.html","template/cufNavChildItem.html","template/cufNavItem.html"]),angular.module("template/cufNav.html",[]).run(["$templateCache",function(a){a.put("template/cufNav.html",'')}]),angular.module("template/cufNavChildItem.html",[]).run(["$templateCache",function(a){a.put("template/cufNavChildItem.html",'

\n \n \n \n

')}]),angular.module("template/cufNavItem.html",[]).run(["$templateCache",function(a){a.put("template/cufNavItem.html",'

\n \n \n

122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;ci[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m), 9 | l=[],p={},d=0,g=e.length;d=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, 10 | q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/, 11 | q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g, 12 | "");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a), 13 | a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e} 14 | for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], 18 | "catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"], 19 | H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], 20 | J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+ 21 | I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]), 22 | ["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css", 23 | /^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}), 24 | ["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes", 25 | hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p=0){var k=k.match(g),f,b;if(b= 26 | !k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p 2 | 3 | 4 | 5 | 6 | CUF Navigation 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

25 |

26 |

27 | 62 | 63 | 97 |

98 |

99 | 100 |

101 |

102 |

103 |

104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * cuf Module 3 | * 4 | * Description 5 | */ 6 | angular.module('test', ['ui.router','ngResource', 'cuf.nav']) 7 | .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 8 | 9 | //$urlRouterProvider.otherwise("/example1"); 10 | 11 | $stateProvider 12 | .state('/example1', { 13 | url: '/example1', 14 | templateUrl: 'partials/example1.html' 15 | }) 16 | .state('example2', { 17 | url: '/example2', 18 | templateUrl: 'partials/example2.html' 19 | }) 20 | .state('example3', { 21 | url: '/example3', 22 | templateUrl: "partials/example3.html" 23 | }) 24 | .state('example4', { 25 | url: '/example4', 26 | templateUrl: "partials/example4.html", 27 | controller: 'navCtrl' 28 | }) 29 | .state('example5', { 30 | url: '/example5', 31 | templateUrl: "partials/example5.html" 32 | }) 33 | .state('usage', { 34 | url: '/usage', 35 | templateUrl: "partials/usage.html" 36 | }) 37 | .state('api', { 38 | url: '/api', 39 | templateUrl: "partials/api.html" 40 | }) 41 | 42 | }]) 43 | .factory('navConf', ['$resource', function($resource){ 44 | return $resource("data/navConf.json", {}, {query: {method:'GET', isArray:true}}); 45 | }]) 46 | .controller('navCtrl', ['$scope', 'navConf', function($scope, navConf){ 47 | $scope.navData = navConf.query(); 48 | 49 | $scope.itemClick = function(labelName){ 50 | console.log("arguments: " + arguments); 51 | console.log("click tree item: " + labelName); 52 | } 53 | }]); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-cuf-nav", 3 | "version": "0.0.0", 4 | "description": "Angular Navigation Menu", 5 | "author": "hjzheng", 6 | "repository": "https://github.com/hjzheng/angular-cuf-nav", 7 | "license": "MIT", 8 | "devDependencies": { 9 | "bower": "^1.3.12", 10 | "grunt": "^0.4.5", 11 | "grunt-contrib-clean": "^0.6.0", 12 | "grunt-contrib-concat": "^0.5.0", 13 | "grunt-contrib-copy": "^0.7.0", 14 | "grunt-contrib-cssmin": "^0.11.0", 15 | "grunt-contrib-htmlmin": "^0.3.0", 16 | "grunt-contrib-uglify": "^0.7.0", 17 | "grunt-html2js": "^0.3.0", 18 | "grunt-ngmin": "0.0.3", 19 | "load-grunt-tasks": "^3.1.0", 20 | "time-grunt": "^1.0.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /partials/api.html: -------------------------------------------------------------------------------- 1 |

API

2 |

指令

3 |

cufNav: 最上层标签
cufNavItem: cufNav的直接子标签
cufNavChildItem: 最后一层标签,可以自己相互嵌套，达到多级菜单效果

11 |

cufNav

12 |

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

参数	值	作用
triggered-event	click 或者 mouseover 默认click	决定导航菜单以什么事件触发展开

25 |

26 |

27 | 28 |

29 |

cufNavItem

30 |

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |

参数	值	作用
label	字符串	决定菜单显示, 它的值必须唯一
href	字符串	一般结合ngRoute或ui.router去使用
triggered-event	click 或者 mouseover 默认会使用cufNav的triggered-event值	决定导航子菜单以什么事件触发展开
has-children	布尔值	如果cufNavItem下需要包含cufNavChildItem标签，就必须配置该属性，反之不要配
item-click	函数

63 |

64 |

65 | 66 |

67 |

cufNavChildItem

68 |

69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |

参数	值	作用
label	字符串	决定菜单显示, 它的值必须唯一
href	字符串	一般结合ngRoute或ui.router去使用
has-children	布尔值	如果cufNavChildItem下需要嵌套cufNavChildItem标签，就必须配置该属性，反之不要配
item-click	函数

96 |

97 |

98 | 99 |

-------------------------------------------------------------------------------- /partials/example1.html: -------------------------------------------------------------------------------- 1 |

多级导航菜单,通过click事件展开

2 | 27 | 28 | 29 |

Code

30 |

31 |   <cuf-nav triggered-event="click">
32 |     <cuf-nav-item label="item-1" href="#page"></cuf-nav-item>
33 |     <cuf-nav-item label="item-2" href="#page1" has-children="true">
34 |         <cuf-nav-child-item label="item-2-1" href="#page2"></cuf-nav-child-item>
35 |         <cuf-nav-child-item label="item-2-2" href="#page" has-children="true">
36 |             <cuf-nav-child-item label="item-2-2-1" href="#page"></cuf-nav-child-item>
37 |             <cuf-nav-child-item label="item-2-2-2" href="#page" has-children="true">
38 | 				<cuf-nav-child-item label="item-2-2-2-1" href="#page"></cuf-nav-child-item>
39 |             </cuf-nav-child-item>
40 |             <cuf-nav-child-item label="item-2-2-3" href="#page"  has-children="true">
41 |                 <cuf-nav-child-item label="item-2-2-3-1" href="#page"  has-children="true">
42 | 					<cuf-nav-child-item label="item-2-2-3-1-1" href="#page"></cuf-nav-child-item>
43 |                 </cuf-nav-child-item>
44 |             </cuf-nav-child-item>
45 |         </cuf-nav-child-item>
46 |     </cuf-nav-item>
47 |     <cuf-nav-item label="item-3" href="#page1" has-children="true">
48 |         <cuf-nav-child-item label="item-3-1" href="#page2" has-children="true">
49 |             <cuf-nav-child-item label="item-3-1-1" href="#page3"></cuf-nav-child-item>
50 |         </cuf-nav-child-item>
51 |         <cuf-nav-child-item label="item-3-2" href="#page"></cuf-nav-child-item>
52 |     </cuf-nav-item>
53 | </cuf-nav>
54 |

55 | 62 | -------------------------------------------------------------------------------- /partials/example2.html: -------------------------------------------------------------------------------- 1 |

多级导航菜单,通过mouseover事件展开

2 | 27 | 28 |

Code

29 |

30 |   <cuf-nav triggered-event="mouseover">
31 |     <cuf-nav-item label="item-1" href="#page"></cuf-nav-item>
32 |     <cuf-nav-item label="item-2" href="#page1" has-children="true">
33 |         <cuf-nav-child-item label="item-2-1" href="#page2"></cuf-nav-child-item>
34 |         <cuf-nav-child-item label="item-2-2" href="#page" has-children="true">
35 |             <cuf-nav-child-item label="item-2-2-1" href="#page"></cuf-nav-child-item>
36 |             <cuf-nav-child-item label="item-2-2-2" href="#page" has-children="true">
37 | 				<cuf-nav-child-item label="item-2-2-2-1" href="#page"></cuf-nav-child-item>
38 |             </cuf-nav-child-item>
39 |             <cuf-nav-child-item label="item-2-2-3" href="#page"  has-children="true">
40 |                 <cuf-nav-child-item label="item-2-2-3-1" href="#page"  has-children="true">
41 | 					<cuf-nav-child-item label="item-2-2-3-1-1" href="#page"></cuf-nav-child-item>
42 |                 </cuf-nav-child-item>
43 |             </cuf-nav-child-item>
44 |         </cuf-nav-child-item>
45 |     </cuf-nav-item>
46 |     <cuf-nav-item label="item-3" href="#page1" has-children="true">
47 |         <cuf-nav-child-item label="item-3-1" href="#page2" has-children="true">
48 |             <cuf-nav-child-item label="item-3-1-1" href="#page3"></cuf-nav-child-item>
49 |         </cuf-nav-child-item>
50 |         <cuf-nav-child-item label="item-3-2" href="#page"></cuf-nav-child-item>
51 |     </cuf-nav-item>
52 | </cuf-nav>
53 |

54 | -------------------------------------------------------------------------------- /partials/example3.html: -------------------------------------------------------------------------------- 1 |

支持响应式,你可以使用chrome dev tool模拟手机

2 |

3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

27 | 28 | 29 | 30 |

Code

31 |

32 |   <cuf-nav triggered-event="click">
33 |     <cuf-nav-item label="item-1" href="#page"></cuf-nav-item>
34 |     <cuf-nav-item label="item-2" href="#page1" has-children="true">
35 |         <cuf-nav-child-item label="item-2-1" href="#page2"></cuf-nav-child-item>
36 |         <cuf-nav-child-item label="item-2-2" href="#page" has-children="true">
37 |             <cuf-nav-child-item label="item-2-2-1" href="#page"></cuf-nav-child-item>
38 |             <cuf-nav-child-item label="item-2-2-2" href="#page" has-children="true">
39 | 				<cuf-nav-child-item label="item-2-2-2-1" href="#page"></cuf-nav-child-item>
40 |             </cuf-nav-child-item>
41 |             <cuf-nav-child-item label="item-2-2-3" href="#page"  has-children="true">
42 |                 <cuf-nav-child-item label="item-2-2-3-1" href="#page"  has-children="true">
43 | 					<cuf-nav-child-item label="item-2-2-3-1-1" href="#page"></cuf-nav-child-item>
44 |                 </cuf-nav-child-item>
45 |             </cuf-nav-child-item>
46 |         </cuf-nav-child-item>
47 |     </cuf-nav-item>
48 |     <cuf-nav-item label="item-3" href="#page1" has-children="true">
49 |         <cuf-nav-child-item label="item-3-1" href="#page2" has-children="true">
50 |             <cuf-nav-child-item label="item-3-1-1" href="#page3"></cuf-nav-child-item>
51 |         </cuf-nav-child-item>
52 |         <cuf-nav-child-item label="item-3-2" href="#page"></cuf-nav-child-item>
53 |     </cuf-nav-item>
54 | </cuf-nav>
55 |

56 | -------------------------------------------------------------------------------- /partials/example4.html: -------------------------------------------------------------------------------- 1 |

通过数据动态生成导航菜单

2 |

3 | 4 | 6 | 7 | 8 | 9 |

10 | 11 |

Code

12 |

13 | <cuf-nav triggered-event="click">
14 |     <cuf-nav-item ng-repeat="item in navData" href="{{item.href}}" label="{{item.name}}" 
15 |                        has-children="{{item.children && item.children.length !== 0}}">
16 |             <cuf-nav-child-item ng-repeat="itemChild in item.children" href="{{itemChild.href}}" label="{{itemChild.name}}"></cuf-nav-child-item>
17 |     </cuf-nav-item>
18 | </cuf-nav>
19 |

20 | 21 |

JSON 数据

22 |

23 | [{
24 |     "name": "first-1",
25 |     "href": "#"
26 | }, {
27 |     "name": "first-2",
28 |     "href": "#"
29 | }, {
30 |     "name": "first-3",
31 |     "href": "#",
32 |     "children": [{
33 |         "name": "second-1",
34 |         "href": "#"
35 |     }, {
36 |         "name": "second-2",
37 |         "href": "#"
38 |     }, {
39 |         "name": "second-3",
40 |         "href": "#"
41 |     }]
42 | }, {
43 |     "name": "first-4",
44 |     "href": "#",
45 |     "children": [{
46 |         "name": "second-4",
47 |         "href": "#"
48 |     }, {
49 |         "name": "second-5",
50 |         "href": "#",
51 |         "children": [{
52 |             "name": "third-1",
53 |             "href": "#"
54 |         }]
55 |     }, {
56 |         "name": "second-6",
57 |         "href": "#"
58 |     }]
59 | }]
60 |

61 | -------------------------------------------------------------------------------- /partials/example5.html: -------------------------------------------------------------------------------- 1 |

第一级菜单click事件触发，第二级以及后续使用mouseover触发

2 |

3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

27 | 28 | 29 | 30 |

Code

31 |

32 |   <cuf-nav triggered-event="click">
33 |     <cuf-nav-item label="item-1" href="#page"></cuf-nav-item>
34 |     <cuf-nav-item label="item-2" href="#page1" has-children="true" triggered-event="mouseover">
35 |         <cuf-nav-child-item label="item-2-1" href="#page2"></cuf-nav-child-item>
36 |         <cuf-nav-child-item label="item-2-2" href="#page" has-children="true">
37 |             <cuf-nav-child-item label="item-2-2-1" href="#page"></cuf-nav-child-item>
38 |             <cuf-nav-child-item label="item-2-2-2" href="#page" has-children="true">
39 | 				<cuf-nav-child-item label="item-2-2-2-1" href="#page"></cuf-nav-child-item>
40 |             </cuf-nav-child-item>
41 |             <cuf-nav-child-item label="item-2-2-3" href="#page"  has-children="true">
42 |                 <cuf-nav-child-item label="item-2-2-3-1" href="#page"  has-children="true">
43 | 					<cuf-nav-child-item label="item-2-2-3-1-1" href="#page"></cuf-nav-child-item>
44 |                 </cuf-nav-child-item>
45 |             </cuf-nav-child-item>
46 |         </cuf-nav-child-item>
47 |     </cuf-nav-item>
48 |     <cuf-nav-item label="item-3" href="#page1" has-children="true" triggered-event="mouseover">
49 |         <cuf-nav-child-item label="item-3-1" href="#page2" has-children="true">
50 |             <cuf-nav-child-item label="item-3-1-1" href="#page3"></cuf-nav-child-item>
51 |         </cuf-nav-child-item>
52 |         <cuf-nav-child-item label="item-3-2" href="#page"></cuf-nav-child-item>
53 |     </cuf-nav-item>
54 | </cuf-nav>
55 |

56 | -------------------------------------------------------------------------------- /partials/usage.html: -------------------------------------------------------------------------------- 1 |

Usage

2 | 3 |

Step1: 下载依赖文件

4 | 5 |

 6 | git clone https://github.com/hjzheng/angular-cuf-nav
 7 | bower install
 8 | //在bower_components和build文件中找到依赖的CSS和JavaScript文件
 9 |

10 | 11 |

Step2: 引入依赖的文件

12 | 13 |

14 | <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
15 | <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
16 | <link rel="stylesheet" href="build/css/angular-cuf-nav.min.css">
17 | <script src="bower_components/jquery/jquery.min.js"></script>
18 | <script src="bower_components/angular/angular.min.js"></script>
19 | <script src="build/js/angular-cuf-nav.min.js"></script>
20 |

21 | 22 |

Step3: 配置依赖模块

23 | 24 |

25 | angular.module('test', ['cuf.nav']);
26 |

27 | 28 | 35 | -------------------------------------------------------------------------------- /src/css/angular-cuf-nav.css: -------------------------------------------------------------------------------- 1 | .link { 2 | cursor: pointer; 3 | } 4 | .dropdown-open { 5 | background-color: #EEE !important; 6 | } 7 | 8 | .dropdown-menu-show { 9 | display: block !important; 10 | } 11 | 12 | .dropdown-submenu { 13 | position: relative; 14 | } 15 | .dropdown-submenu > .dropdown-menu { 16 | top: 0; 17 | left: 100%; 18 | margin-top: -6px; 19 | margin-left: -1px; 20 | -webkit-border-radius: 0 6px 6px 6px; 21 | -moz-border-radius: 0 6px 6px; 22 | border-radius: 0 6px 6px 6px; 23 | } 24 | 25 | .dropdown-submenu > a:after { 26 | display: block; 27 | content: " "; 28 | float: right; 29 | width: 0; 30 | height: 0; 31 | border-color: transparent; 32 | border-style: solid; 33 | border-width: 5px 0 5px 5px; 34 | border-left-color: #ccc; 35 | margin-top: 5px; 36 | margin-right: -10px; 37 | } 38 | .dropdown-submenu:hover > a:after { 39 | border-left-color: #fff; 40 | } 41 | .dropdown-submenu.pull-left { 42 | float: none; 43 | } 44 | .dropdown-submenu.pull-left > .dropdown-menu { 45 | left: -100%; 46 | margin-left: 10px; 47 | -webkit-border-radius: 6px 0 6px 6px; 48 | -moz-border-radius: 6px 0 6px 6px; 49 | border-radius: 6px 0 6px 6px; 50 | } 51 | 52 | /* .col-xs-* .col-sm-* */ 53 | @media (max-width: 768px) { 54 | .platform-nav-area { 55 | min-height: 0px !important; 56 | } 57 | 58 | .dropdown-menu-show { 59 | position: static !important; 60 | float: none !important; 61 | width: auto !important; 62 | margin-top: 0px !important; 63 | background-color: transparent !important; 64 | border: 0px none !important; 65 | box-shadow: none !important; 66 | } 67 | 68 | .dropdown-submenu > a:after { 69 | display: inline-block; 70 | content: ""; 71 | float: none; 72 | width: 0px; 73 | height: 0px; 74 | border-color: #777 transparent transparent transparent !important; 75 | border-style: solid; 76 | border-width: 5px 5px 0px 5px !important; 77 | margin-top: 5px; 78 | margin-left: 5px; 79 | } 80 | } -------------------------------------------------------------------------------- /src/js/angular-cuf-nav.js: -------------------------------------------------------------------------------- 1 | /** 2 | * cuf Module 3 | * 4 | * Description 5 | */ 6 | angular.module('cuf.nav', ['cuf-nav-template']).directive('cufNav', function($window){ 7 | // Runs during compile 8 | return { 9 | scope: { 10 | triggeredEvent: '@' 11 | }, 12 | restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment 13 | templateUrl: 'template/cufNav.html', 14 | replace: true, 15 | transclude: true, 16 | controllerAs: 'cufNavCtrl', 17 | controller: function($scope, $element, $attrs, $transclude){ 18 | if(!$scope.triggeredEvent) { 19 | $scope.triggeredEvent = "click"; 20 | } 21 | 22 | var items = []; 23 | 24 | this.triggeredEvent = $scope.triggeredEvent; 25 | 26 | this.addItems = function(item) { 27 | items.push(item); 28 | }; 29 | 30 | this.closeOtherItems = function(item){ 31 | angular.forEach(items, function(it) { 32 | if(it.label !== item.label){ 33 | it.show = false; 34 | angular.forEach(item.childItems, function(child){ 35 | angular.forEach(child, function(childItem){ 36 | childItem.show = false; 37 | }); 38 | }); 39 | } 40 | }); 41 | }; 42 | 43 | var closeAllItems = function(event){ 44 | $scope.$apply(function(){ 45 | angular.forEach(items, function(item) { 46 | item.show = false; 47 | angular.forEach(item.childItems, function(child){ 48 | angular.forEach(child, function(childItem){ 49 | childItem.show = false; 50 | }); 51 | }); 52 | }); 53 | }); 54 | } 55 | 56 | var closeAllItemsWhenClick = function(event){ 57 | if($scope.triggeredEvent === 'click'){ 58 | if(jQuery.contains( $element[0], event.target)){ 59 | if(jQuery(event.target.parentNode).attr('has-children')){ 60 | return; 61 | } else { 62 | closeAllItems(event); 63 | } 64 | } 65 | closeAllItems(event); 66 | } 67 | } 68 | 69 | var closeAllItemsWhenMouseover = function(event){ 70 | if($scope.triggeredEvent === 'mouseover'){ 71 | if(jQuery.contains( $element[0], event.target )){ 72 | return; 73 | } 74 | closeAllItems(event); 75 | } 76 | } 77 | 78 | jQuery($window).on("click", closeAllItemsWhenClick); 79 | 80 | jQuery($window).on("mouseover", closeAllItemsWhenMouseover); 81 | } 82 | }; 83 | }).directive('cufNavItem', function(){ 84 | // Runs during compile 85 | return { 86 | require: '^cufNav', 87 | scope: { 88 | label: '@', 89 | href: '@', 90 | triggeredEvent: '@', 91 | isChildren: '@hasChildren', 92 | itemClick: '&' // pass function with parameter 93 | }, 94 | restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment 95 | templateUrl: 'template/cufNavItem.html', 96 | replace: true, 97 | transclude: true, 98 | controllerAs: 'cufNavItem', 99 | controller: function($scope, $element, $attrs, $transclude){ 100 | 101 | $scope.hasChildren = ($scope.isChildren === 'true'); 102 | 103 | if(!$scope.triggeredEvent){ 104 | this.triggeredEvent = $scope.$parent.$parent.triggeredEvent; 105 | }else{ 106 | this.triggeredEvent = $scope.triggeredEvent; 107 | } 108 | 109 | var childItems = $scope.childItems = {}; 110 | 111 | this.addChildItems = function(label, item) { 112 | childItems[label] = childItems[label] || [] 113 | childItems[label].push(item); 114 | }; 115 | 116 | this.closeOtherChildItems = function(label, item){ 117 | angular.forEach(childItems[label], function(it) { 118 | if(it.label !== item.label){ 119 | it.show = false; 120 | } 121 | }); 122 | }; 123 | 124 | $scope.navClick = function($event){ 125 | $scope.itemClick(); 126 | $event.stopPropagation(); 127 | }; 128 | }, 129 | link: function($scope, iElm, iAttrs, cufNavCtrl) { 130 | cufNavCtrl.addItems($scope); 131 | 132 | $scope.triggeredEvent = cufNavCtrl.triggeredEvent; 133 | 134 | $scope.clickToggle = function(){ 135 | if(cufNavCtrl.triggeredEvent === 'click') { 136 | cufNavCtrl.closeOtherItems($scope); 137 | $scope.show = ($scope.show == true ? false: true); 138 | } 139 | } 140 | 141 | $scope.mouseOver = function(){ 142 | if(cufNavCtrl.triggeredEvent === 'mouseover') { 143 | cufNavCtrl.closeOtherItems($scope); 144 | $scope.show = ($scope.show == true ? false: true); 145 | } 146 | } 147 | } 148 | }; 149 | }).directive('cufNavChildItem', function(){ 150 | return { 151 | require: '^cufNavItem', 152 | scope: { 153 | label: '@', 154 | href: '@', 155 | isChildren: '@hasChildren', 156 | itemClick: '&' 157 | }, 158 | restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment 159 | templateUrl: 'template/cufNavChildItem.html', 160 | replace: true, 161 | transclude: true, 162 | controllerAs: 'cufNavItem', 163 | controller: function($scope, $element, $attrs, $transclude){ 164 | $scope.hasChildren = ($scope.isChildren === 'true'); 165 | 166 | $scope.navClick = function($event){ 167 | $scope.itemClick(); 168 | $event.stopPropagation(); 169 | }; 170 | }, 171 | link: function($scope, iElm, iAttrs, cufNavItem) { 172 | 173 | var pLabel = jQuery(iElm[0].parentNode.parentNode).attr("label"); 174 | 175 | if(pLabel) { 176 | $scope.parentLabel = pLabel; 177 | cufNavItem.addChildItems(pLabel, $scope); 178 | } 179 | 180 | 181 | $scope.clickToggle = function(){ 182 | if(cufNavItem.triggeredEvent === 'click') { 183 | cufNavItem.closeOtherChildItems($scope.parentLabel, $scope); 184 | $scope.show = ($scope.show == true ? false: true); 185 | } 186 | } 187 | 188 | $scope.mouseOver = function(){ 189 | if(cufNavItem.triggeredEvent === 'mouseover') { 190 | cufNavItem.closeOtherChildItems($scope.parentLabel, $scope); 191 | $scope.show = ($scope.show == true ? false: true); 192 | } 193 | } 194 | } 195 | }; 196 | }); -------------------------------------------------------------------------------- /src/template/cufNav.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/template/cufNavChildItem.html: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 7 |

-------------------------------------------------------------------------------- /src/template/cufNavItem.html: -------------------------------------------------------------------------------- 1 |