AngularJS实现按钮提示与点击变色效果
2016-09-07 00:00
831 查看
本文用angularJS简单实现了一个小的按钮提示,按钮点击后会变色,注意html文件中需要引入jquery.js和angular.js
运行截图:
当点击按钮的时候 按钮的样式改变:
css代码:
html代码:
js代码:
鼠标移入按钮,tip提示出现,鼠标移出的时候,tip消失。tip的小三角我是利用了css3的属性来实现的。
总结
以上就是这篇文章的全部内容,希望对大家学习AngularJS能有所帮助。如果有疑问大家可以留言交流。
AngularJS $injector 依赖注入详解
AngularJs ng-route路由详解及实例代码
Angularjs 实现分页功能及示例代码
Angularjs CURD 详解及实例代码
AngularJS 所有版本下载地址
Angularjs 制作购物车功能实例代码
基于AngularJS实现iOS8自带的计算器
Angularjs 实现一个幻灯片示例代码
AngularJS 面试题集锦
AngularJS equal比较对象实例详解
运行截图:
当点击按钮的时候 按钮的样式改变:
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 API之copy深拷贝详解及实例AngularJS $injector 依赖注入详解
AngularJs ng-route路由详解及实例代码
Angularjs 实现分页功能及示例代码
Angularjs CURD 详解及实例代码
AngularJS 所有版本下载地址
Angularjs 制作购物车功能实例代码
基于AngularJS实现iOS8自带的计算器
Angularjs 实现一个幻灯片示例代码
AngularJS 面试题集锦
AngularJS equal比较对象实例详解
相关文章推荐
- AngularJS实现按钮提示与点击变色效果
- React-Native ListView中按钮点击变色效果实现
- Android实现按钮点击效果(第一次点击变色,第二次恢复)
- Android实现按钮点击效果(第一次点击变色,第二次恢复)
- 按回车实现点击某按钮的效果 http://blog.csdn.net/jjzaihaozhe/archive/2007/08/18/1749635.aspx
- 回车直接实现点击某按钮的效果
- android仿IOS按钮点击效果,一张图片实现
- 代码实现按钮点击高亮效果
- jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
- Android_UI_点击按钮切换背景效果实现
- Android按钮点击效果的实现(selector)
- Android_UI_点击按钮切换背景效果实现
- Axure例——实现点击按钮增减效果
- 实现点击ComboBox(DBComboBox)按钮下拉出现TreeView效果
- 全文检索等鼠标滑上去(不用点击),里面提示文字要自动消失效果的实现。
- jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
- [Javascript]如何在HTML中实现点击input输入框(获得焦点)后默认提示消失的效果
- Android中图片实现按钮点击效果
- Android中图片实现按钮点击效果
- Android_UI_点击按钮切换背景效果实现