首頁  >  文章  >  web前端  >  AngularJS開發WebApp實現高亮跳躍按鈕效果,ui-sref和ui-sref-active的使用方法

AngularJS開發WebApp實現高亮跳躍按鈕效果,ui-sref和ui-sref-active的使用方法

一个新手
一个新手原創
2017-09-23 09:39:061983瀏覽

AngularJS開發WebApp實現高亮跳躍按鈕效果,ui-sref和ui-sref-active的使用方法

WebApp底部選單列的AngularJS開發WebApp實現高亮跳躍按鈕效果,ui-sref和ui-sref-active的使用方法需要用到一個指令,其實還需要做一個交互,就是點擊的時候需要跳轉,像這種情況一般會用到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;
    }
  }

以上是AngularJS開發WebApp實現高亮跳躍按鈕效果,ui-sref和ui-sref-active的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn