Este artículo utiliza AngularJS para simplemente implementar un mensaje de botón pequeño. El botón cambiará de color después de hacer clic. Tenga en cuenta que JQuery.js y Angular.js deben introducirse en el archivo HTML.
Ejecución de captura de pantalla:
Al hacer clic en el botón, cambia el estilo del botón:
Código CSS:
<style type = "text/css"> *{margen: 0px; padding: 0px;} .bucselectedButton {ancho: 100px; line-height: 30px; text-align; Center; posición: relativo;} .bucselected {borde: 1px sólido rgb (195,195,195); color:##000; 6px; Color de fondo: RGB (255,255,255);} .BucSelectedHover {Border: 1px Solid RGB (74,201,255); color: RGB (74,201,255); cursor: Potinter; Border-Radius: 6PX; Color de fondo: RGB (238,249,254);}. .tip {color: RGB (0,0,0); Color de fondo: RGB (255,255,255);} </style>Código HTML:
<div ng-concontroller = "buctipController"> <!-Directiva-> <buc-button id = "numberType" my-title = "button" tip-title = "Este es un indicador" style = "margin-top: 60px;"> </buc-button> </div> </div> </div>
Código 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 : "@" }, plantilla: "<button class = 'bucelectedButton bucelected' ng-c-ciclk = 'clicked ()' ng-mouseover = 'mouseover ()' ng-mouseout = 'mouseout ()'> {{mytitle}}/ <div style = 'borde: 1px sólido sólido #dcdcdc; border-radio: 6px; ancho: auto; altura: 20px; line-height: 20px; posición: absoluto; top: -40px; padding: 5px; space white: nowrap; background-color: #fafafa; visual estilo = 'posición: absoluto; top: 25px; izquierda: 10px; fondo de fondo: #fafafa; border: 1px sólido #dcdcdc; ancho: 10px; altura: 10px; transform: rotate (45deg); border-soft: none; border-top: none;'>/ </span>/ </div>/ </botin> ", enlink: function (scope, elem, atople) Scope.MouseOver = Function () {$ (". TIP"). Show ();Mueva el mouse al botón, aparece la punta, y cuando el mouse se mueve, la punta desaparece. Utilicé el atributo CSS3 para implementar el pequeño triángulo de la punta.
Resumir
Lo anterior es todo el contenido de este artículo. Espero que sea útil para todos aprender Angularjs. Si tiene alguna pregunta, deje un mensaje para comunicarse.