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


Posted in Javascript onSeptember 07, 2016

本文用angularJS简单实现了一个小的按钮提示,按钮点击后会变色,注意html文件中需要引入jquery.js和angular.js

运行截图:

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

当点击按钮的时候 按钮的样式改变:

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

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

Javascript 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 #Javascript
利用Angularjs实现幻灯片效果
Sep 07 #Javascript
轻松掌握JavaScript状态模式
Sep 07 #Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 #Javascript
JS实现的幻灯片切换显示效果
Sep 07 #Javascript
javascript宿主对象之window.navigator详解
Sep 07 #Javascript
Angular 理解module和injector,即依赖注入
Sep 07 #Javascript
You might like
菜鸟学PHP之Smarty入门
2007/01/04 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Python制作爬虫采集小说
2015/10/25 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python中的set实现不重复的排序原理
2018/01/24 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
python2与python3共存问题的解决方法
2018/09/18 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
销售求职信范文
2014/05/26 职场文书
财务会计专业求职信
2014/06/09 职场文书
酒店端午节活动方案
2014/08/26 职场文书
人事代理委托书
2014/09/27 职场文书
学术会议通知
2015/04/15 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
Django migrate报错的解决方案
2021/05/20 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android