Rumah >hujung hadapan web >tutorial js >AngularJS开发WebApp实现高亮跳转按钮效果,ui-sref和ui-sref-active的使用方法

AngularJS开发WebApp实现高亮跳转按钮效果,ui-sref和ui-sref-active的使用方法

一个新手
一个新手asal
2017-09-23 09:39:062020semak imbas

高亮效果

WebApp底部菜单栏的高亮效果需要用到一个指令,其实还需要做一个交互,就是点击的时候需要跳转,像这种情况一般会用到ui.router路由模块的一个指令,跳转一般有两种方法,一种是使用指令进行跳转,一种是利用服务进行跳转。

指令是ui-sref,这相当于给这个元素绑定一个点击事件,当这个元素被点击的时候,它就会跳转到对应的页面或者是路由。

同时被点击的时候,按钮还需要有个高亮的效果,这个指令叫做ui-sref-active=”select”

html

<ul class="bg-w foot">
  <li ui-sref-active="select" ui-sref="main"><span>首页</span></li>
  //这个意思是说如果当前点击的路由是main的话,首先点击这个路由会跳转到main的页面,
  //然后如果当前页面就是它的话,那么就会包含select这个样式类的名称  <li ui-sref-active="select" ui-sref="search"><span>附近</span></li>
  <li ui-sref-active="select" ui-sref="me"><span>我</span></li></ul>

路由

&#39;use strict&#39;;
angular.module(&#39;app&#39;).config([&#39;$stateProvider&#39;, &#39;$urlRouterProvider&#39;, function($stateProvider, $urlRouterProvider) {
  $stateProvider.state(&#39;main&#39;, {
    url: &#39;/main&#39;,
    templateUrl: &#39;view/main.html&#39;,
    controller: &#39;mainCtrl&#39;
  });
  $urlRouterProvider.otherwise(&#39;main&#39;);
}])

.Less文件

@highlightBgColor: #dbf9f4;@highlightColor: #01c2a3;

  li {    font-size: 20px;
    width: 33.33%;
    color: @muteColor;
    &.select {      background-color: @highlightBgColor;
      color: @highlightColor;
    }
  }

Atas ialah kandungan terperinci AngularJS开发WebApp实现高亮跳转按钮效果,ui-sref和ui-sref-active的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn