AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色效果
本文用angularJS簡(jiǎn)單實(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的屬性來(lái)實(shí)現(xiàn)的。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)AngularJS能有所幫助。如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼
這篇文章主要介紹了AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼,需要的朋友可以參考下2017-09-09基于AngularJS實(shí)現(xiàn)的工資計(jì)算器實(shí)例
這篇文章主要介紹了基于AngularJS實(shí)現(xiàn)的工資計(jì)算器,結(jié)合具體實(shí)例形式分析了AngularJS數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2017-06-06詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套
這篇文章主要介紹了詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04AngularJS中的API(接口)簡(jiǎn)單實(shí)現(xiàn)
本文主要介紹AngularJS API(接口),這里對(duì)AngularJS API的知識(shí)做了詳細(xì)講解,并附簡(jiǎn)單代碼實(shí)例,有需要的小伙伴可以參考下2016-07-07用Angular實(shí)現(xiàn)一個(gè)掃雷的游戲示例
這篇文章主要介紹了用Angular實(shí)現(xiàn)一個(gè)掃雷的游戲示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05AngularJS中關(guān)于ng-class指令的幾種實(shí)現(xiàn)方式詳解
這篇文章給大家介紹了angularJS中ng-class指令的三種實(shí)現(xiàn)方式,其中包括通過(guò)數(shù)據(jù)的雙向綁定、通過(guò)對(duì)象數(shù)組和通過(guò)key/value這三種方式,有需要的朋友們可以參考學(xué)習(xí),下面來(lái)一起看看吧。2016-09-09