AngularJS entwickelt eine WebApp, um einen Hervorhebungs-Sprungschaltflächeneffekt zu erzielen und wie man ui-sref und ui-sref-active verwendet

Der Hervorhebungseffekt der Menüleiste am unteren Rand von WebApp erfordert einen Befehl. Tatsächlich muss auch eine Interaktion ausgeführt werden, dh es muss beim Klicken springen In diesem Fall wird normalerweise ui verwendet. Router ist eine Anweisung des Routing-Moduls. Es gibt im Allgemeinen zwei Möglichkeiten zum Springen und die andere darin, Dienste zum Springen zu verwenden. Die

-Anweisung ist ui-sref, was dem Binden eines Klickereignisses an dieses Element entspricht. Wenn auf dieses Element geklickt wird, wird zur entsprechenden Seite oder Route gesprungen.

Bei gleichzeitigem Klicken muss die Schaltfläche auch einen Hervorhebungseffekt haben. Dieser Befehl heißt 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>

Route

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

.Weniger Datei

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

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

Das obige ist der detaillierte Inhalt vonAngularJS entwickelt eine WebApp, um einen Hervorhebungs-Sprungschaltflächeneffekt zu erzielen und wie man ui-sref und ui-sref-active verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!