This article uses angularJS to simply implement a small button prompt. The button will change color after clicking. Note that jquery.js and angular.js need to be introduced into the html file.
Running screenshot:
When clicking the button, the style of the button changes:
css code:
<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 code:
<div ng-controller="bucTipController"> <!-- Directive--> <buc-button id="numberType" my-title="button" tip-title = "This is a prompt" style="margin-top:60px;"></buc-button></div>
js code:
<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>Move the mouse into the button, the tip appears, and when the mouse is moved out, the tip disappears. I used the css3 attribute to implement the tip's small triangle.
Summarize
The above is the entire content of this article. I hope it will be helpful to everyone to learn AngularJS. If you have any questions, please leave a message to communicate.