AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色效果
更新時(shí)間：2016年09月07日 10:52:52 作者：Jennry
這篇文章給大家介紹了如何利用AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色的效果，文中提供了實(shí)例代碼，對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，下面來一起看看吧。
本文用angularJS簡單實(shí)現(xiàn)了一個(gè)小的按鈕提示，按鈕點(diǎn)擊后會(huì)變色，注意html文件中需要引入jquery.js和angular.js
運(yùn)行截圖：
當(dāng)點(diǎn)擊按鈕的時(shí)候 按鈕的樣式改變：
css代碼：
<style type="text/css">
*{margin: 0px;padding: 0px;}
.bucSelectedButton{width: 100px;line-height: 30px;text-align: center;position: relative;}
.bucSelected {border:1px solid rgb(195,195,195);color:#000;cursor: pointer;border-radius: 6px;background-color: rgb(255,255,255);}
.bucSelectedHover{border: 1px solid rgb(74,201,255);color: rgb(74,201,255);cursor: pointer;border-radius: 6px;background-color: rgb(238,249,254);}
.bucSelectedHover .tip {color: rgb(0,0,0);background-color: rgb(255,255,255);}
</style>
html代碼：
<div ng-controller="bucTipController"> <!-- 指令 --> <buc-button id="numberType" my-title="按鈕" tip-title = "這個(gè)是提示" style="margin-top:60px;"></buc-button> </div>
js代碼：
<script type="text/javascript">
var app = angular.module("tip",[]);
app.controller("bucTipController",function(){
})
.directive("bucButton",function(){
return {
restrict : 'E',
replace : true,
scope : {
myTitle : "@",
id : "@",
tipTitle : "@"
},
template : "<button class='bucSelectedButton bucSelected' ng-click='clicked()' ng-mouseover = 'mouseover()' ng-mouseout = 'mouseout()'>{{myTitle}}\
<div style='border:1px solid #dcdcdc;border-radius:6px;width:auto;height:20px;line-height:20px;position:absolute;top:-40px;padding:5px;white-space:nowrap;background-color:#fafafa;display:none;color:#000;left:20px;' class='tip'>{{tipTitle}}\
<span style='position:absolute;top:25px;left:10px;background-color:#fafafa;border:1px solid #dcdcdc;width:10px;height:10px;transform:rotate(45deg);border-left:none;border-top:none;'>\
</span>\
</div>\
</button>",
link : function(scope,elem,attrs) {
scope.mouseover = function(){
$(".tip").show();
}
scope.mouseout = function(){
$(".tip").hide();
}
scope.clicked = function(){
elem.toggleClass("bucSelectedHover");
$(".tip").hide();
}
}
}
})
</script>
鼠標(biāo)移入按鈕，tip提示出現(xiàn)，鼠標(biāo)移出的時(shí)候，tip消失。tip的小三角我是利用了css3的屬性來實(shí)現(xiàn)的。
總結(jié)
以上就是這篇文章的全部內(nèi)容，希望對大家學(xué)習(xí)AngularJS能有所幫助。如果有疑問大家可以留言交流。
您可能感興趣的文章:
相關(guān)文章
Angular入口組件（entry component）與聲明式組件的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Angular入口組件（entry component）與聲明式組件的區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
這篇文章主要給大家介紹了關(guān)于angular瀏覽器兼容性問題的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
AngularJs的$http發(fā)送POST請求,php無法接收Post的數(shù)據(jù)問題及解決方案
這篇文章主要介紹了AngularJs的$http發(fā)送POST請求,php無法接收Post的數(shù)據(jù)的問題及解決方案,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
AngularJS基礎(chǔ) ng-focus 指令簡單示例
本文主要介紹AngularJS ng-focus 指令,這里整理了ng-focus的一些基礎(chǔ)資料,并附一個(gè)實(shí)例代碼,有需要的小伙伴參考下2016-08-08
詳解AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)
本篇文章主要介紹了AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
本文主要介紹AngularJS 依賴注入的知識(shí)，這里整理了相關(guān)的基礎(chǔ)知識(shí)，并附示例代碼和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
這篇文章主要給大家介紹了關(guān)于Angular變更檢測的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
AngularJS解決ng界面長表達(dá)式(ui-set)的方法分析
這篇文章主要介紹了AngularJS解決ng界面長表達(dá)式(ui-set)的方法,通過具體問題的分析并結(jié)合實(shí)例形式給出了AngularJS長表達(dá)式的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
Angularjs實(shí)現(xiàn)控制器之間通信方式實(shí)例總結(jié)
這篇文章主要介紹了Angularjs實(shí)現(xiàn)控制器之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-03-03
AngularJS修改model值時(shí),顯示內(nèi)容不變的實(shí)例
今天小編就為大家分享一篇AngularJS修改model值時(shí),顯示內(nèi)容不變的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09