AngularJS实现按钮提示与点击变色效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS实现按钮提示与点击变色效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2093字，纯文字阅读大概需要3分钟。

内容图文

本文用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能有所帮助。如果有疑问大家可以留言交流。

内容总结

以上是互联网集市为您收集整理的AngularJS实现按钮提示与点击变色效果全部内容，希望文章能够帮你解决AngularJS实现按钮提示与点击变色效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---