AngularJS實現按鈕提示與點擊變色效果_AngularJS

本文用angularJS簡單實現了一個小的按鈕提示，按鈕點擊後會變色，注意html檔案中需要引入jquery.js和angular.js

運行截圖：

當點擊按鈕的時候 按鈕的樣式改變：

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 = "這個是提示" 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>

滑鼠移入按鈕，tip提示出現，滑鼠移出的時候，tip消失。tip的小三角我是利用了css3的屬性來實現的。

總結

以上就是這篇文章的全部內容，希望對大家學習AngularJS能有所協助。如果有疑問大家可以留言交流。