HTML5禾粒农场智能管理系统门户网站设计(6)
时间:2022-07-21 21:13 来源:毕业论文 作者:毕业论文 点击:次
<p class="container-fluid"> <p class="navbar-header animated fadeInLeft"> <a class="navbar-brand" href="#">禾粒农场</a> </p> <p> <ul class="nav navbar-nav animated fadeInLeft"> <li class="active" ng-click="goHome()" tt> <a href="">首页</a></li> <li class="" tt> <a href="" ui-sref="。news">新闻资讯</a></li> <li class="" tt> <a href="#products">产品介绍</a></li> <li class="" tt> <a href="#farm">农场问问</a></li> <li class="" tt> <a href="#board">问卷调查</a></li></ul> <ul class="nav navbar-nav navbar-right animated fadeInRight"> <li><a href="" ng-click="goRegister()"> <span class="glyphicon glyphicon-user"></span> 注册</a></li> <li><a href="" ng-click="goLogin()"> <span class="glyphicon glyphicon-log-in"></span> 登录</a></li></ul></p></p></nav></p> JS function tt(){ return{ restrict:'A', scope:false, link:function(scope,ele,attr){ ele。bind('click',function(){ $(this)。siblings()。attr('class', ' '); $(this)。attr('class', 'active'); })}};} angular 。module('main') 。directive('tt', tt); 使用AngularJS的指令模块定义了一个名为tt的属性指令,为拥有该属性的标签绑定一个鼠标点击事件,当用户点击某个标签页的时候他会搜索相同父节点下的兄弟标签,把他们的class属性全部重置为空,然后再把自己的class属性设置为active,然后配合css添加不同的样式用以区别,让用户能够直观看到自己现在所属的页面位置。指令模块作为AngularJS的主要功能模块,可以让用户自定义指令可用来修改页面的DOM的结构,例如添加、删除、修改HTML标签及其属性样式,并且还能够配合jQuery使用快速获取DOM节点。 Directive指令模块常用的属性包括这里的restrict属性,该属性有四个参数可选,为AECM,可设置指令调用方式。scope属性是用来设置当前变量环境,这里的false表示能够使用定义在父作用域里的变量以及函数。 图 4。2 关于禾粒 图 4。3 产品介绍 HTML <p class="body-part1"> <p class="body-part1-left"> <h1 class="text-4em">ABOUT HELI'S FARM</h1> <h1>关于禾粒</h1> <p class="arrow-down">↓</p> </p> <img src="img/about。jpg" class="about"> <p class="body-part1-right"> <p> 禾粒社区农场是一群IT人士/大学教师/CXO(CEO,CTO^_^)联合创办的体验式农场,为社员们定制绿色健康的食品,同时也提供有趣的亲子教育,自助式的田园小聚,每个社区成员都参与农场劳作,体验生活的艰辛与收获的喜悦。 </p> <p class="icon"> <p class=""> <img src="img/sy_icon1.png"> <span> 品牌理念<br>Brand Concept</span> (责任编辑:qin) |