Este artigo usa o AngularJS para simplesmente implementar um pequeno botão. O botão mudará de cor depois de clicar. Observe que o jQuery.js e o angular.js precisam ser introduzidos no arquivo html.
Running Screenshot:
Ao clicar no botão, o estilo do botão muda:
Código CSS:
<style type = "text/css"> *{margin: 0px; preenchimento: 0px;} .bucselectedButton {width: 100px; line-heilt: 30px; text-align: Center; Position: relativamente;} .bucselected {Border: 1px Solid Rgb (195,19,19,19); 6px; cor de fundo: RGB (255.255.255);} .BuCSelectedHover {borda: 1px RGB sólido (74,201.255); cor: rgb (74,201,255); curente: ponte-radius: 6px; 44,201,255); .tip {color: rgb (0,0,0); cor de fundo: rgb (255,255,255);} </style>Código HTML:
<div ng-controller = "buctipController"> <!-Diretiva-> <buc-button id = "numberType" my-title = "button" tip-title = "Este é um prompt" style = "margin-top: 60px;"> </buc-button> </div>
Código JS:
<script type = "text/javascript"> var app = angular.module ("tip", []); app.Controller ("BuctipController", function () {}). Directive ("Bucbutton", function () {return {restrit: 'e',, verdadeiro: scope {myttit: mytit () {Return {restrito: 'e',, true: scope {myttit: mytit: myttit: myttit: myttit: mytitle: myttiT: "@"@"@"@"idiat: mytit () {return {}). }, modelo: "<Button class = 'bucselectedButton bucselected' ng-click = 'clicked ()' ng-mouseover = 'mouseOver ()' ng-mouseout = 'mouseout ()'> {{mytitle}}/ <div estilo = 'borda: 1px sólido #dcdcdc; radio de borda: 6px; largura: auto; altura: 20px; altura de linha: 20px; posição: absoluto; topo: -40px; preenchimento: 5px; espaço branco: agora############000; style = 'Posição: Absoluto; topo: 25px; esquerda: 10px; cor de fundo: #fafafa; borda: 1px sólido #dcdcdc; largura: 10px; altura: 10px; transform: giratate (45deg); border-left: nenhum; border-top: nenhum; scope.mouseOver = function () {$ ("Mova o mouse para o botão, a ponta aparece e, quando o mouse for movido, a ponta desaparece. Usei o atributo CSS3 para implementar o pequeno triângulo da TIP.
Resumir
O acima é o conteúdo inteiro deste artigo. Espero que seja útil para todos aprenderem o AngularJs. Se você tiver alguma dúvida, deixe uma mensagem para se comunicar.