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 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
在HTML5 localStorage中存储对象的示例代码
Apr 21 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
js同源策略详解
2015/05/21 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
Python可变参数函数用法实例
2015/07/07 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
python交易记录链的实现过程详解
2019/07/03 Python
python多线程并发及测试框架案例
2019/10/15 Python
django-csrf使用和禁用方式
2020/03/13 Python
Python操作Jira库常用方法解析
2020/04/10 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
西安当代医院管理研究院笔试题
2015/12/11 面试题
办公室文秘自我评价
2013/09/21 职场文书
优秀团支部申报材料
2014/12/26 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers