AngularJS開發(fā)WebApp實(shí)現(xiàn)高亮跳轉(zhuǎn)按鈕效果，ui-sref和ui-sref-active的使用方法

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:12:53

AngularJS開發(fā)WebApp實(shí)現(xiàn)高亮跳轉(zhuǎn)按鈕效果，ui-sref和ui-sref-active的使用方法

AngularJS開發(fā)WebApp實(shí)現(xiàn)高亮跳轉(zhuǎn)按鈕效果，ui-sref和ui-sref-active的使用方法:WebApp底部菜單欄的高亮效果需要用到一個指令，其實(shí)還需要做一個交互，就是點(diǎn)擊的時(shí)候需要跳轉(zhuǎn)，像這種情況一般會用到ui.router路由模塊的一個指令，跳轉(zhuǎn)一般有兩種方法，一種是使用指令進(jìn)行跳轉(zhuǎn)，一種是利用服務(wù)進(jìn)行跳轉(zhuǎn)。指令是ui-sref，這相當(dāng)于給這個元

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀AngularJS開發(fā)WebApp實(shí)現(xiàn)高亮跳轉(zhuǎn)按鈕效果，ui-sref和ui-sref-active的使用方法:WebApp底部菜單欄的高亮效果需要用到一個指令，其實(shí)還需要做一個交互，就是點(diǎn)擊的時(shí)候需要跳轉(zhuǎn)，像這種情況一般會用到ui.router路由模塊的一個指令，跳轉(zhuǎn)一般有兩種方法，一種是使用指令進(jìn)行跳轉(zhuǎn)，一種是利用服務(wù)進(jìn)行跳轉(zhuǎn)。指令是ui-sref，這相當(dāng)于給這個元

WebApp底部菜單欄的高亮效果需要用到一個指令，其實(shí)還需要做一個交互，就是點(diǎn)擊的時(shí)候需要跳轉(zhuǎn)，像這種情況一般會用到ui.router路由模塊的一個指令，跳轉(zhuǎn)一般有兩種方法，一種是使用指令進(jìn)行跳轉(zhuǎn)，一種是利用服務(wù)進(jìn)行跳轉(zhuǎn)。

指令是ui-sref，這相當(dāng)于給這個元素綁定一個點(diǎn)擊事件，當(dāng)這個元素被點(diǎn)擊的時(shí)候，它就會跳轉(zhuǎn)到對應(yīng)的頁面或者是路由。

同時(shí)被點(diǎn)擊的時(shí)候，按鈕還需要有個高亮的效果，這個指令叫做ui-sref-active=”select”

html

<ul class="bg-w foot">
 <li ui-sref-active="select" ui-sref="main"><span>首頁</span></li>
 //這個意思是說如果當(dāng)前點(diǎn)擊的路由是main的話，首先點(diǎn)擊這個路由會跳轉(zhuǎn)到main的頁面，
 //然后如果當(dāng)前頁面就是它的話,那么就會包含select這個樣式類的名稱 <li ui-sref-active="select" ui-sref="search"><span>附近</span></li>
 <li ui-sref-active="select" ui-sref="me"><span>我</span></li></ul>

路由

'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');
}])

.Less文件

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com