Cet article utilise AngularJS pour simplement implémenter une petite invite de bouton. Le bouton modifiera la couleur après avoir cliqué. Notez que jquery.js et angular.js doivent être introduits dans le fichier html.
Capture d'écran en cours:
Lorsque vous cliquez sur le bouton, le style du bouton change:
Code CSS:
<Style Type = "Text / CSS"> * {marge: 0px; padding: 0px;} .bucselectedButton {largeur: 100px; line-height: 30px; text-align: Center; Position: relative;} .bucselected {border: 1px solide rgb (195,195,195); couleur: # 000; 6px; fond-couleur: RVB (255 255 255);} .BucSelectedHover {border: 1px solide RGB (74.201.255); Color: RVB (74,201,255); Cursor: Pointer; Border-Radius: 6px; background-colore: rgb (238,249,254);}; .BucSelectedHover .tip {Color: RGB (0,0,0); Background-Color: RGB (255,255,255);} </ style>Code html:
<div ng-controlller = "buctipController"> <! - Directive -> <buc-button id = "numberType" My-title = "Button" Tip-Title = "Ceci est une invite" style = "margin-top: 60px;"> </buc-buut> </v> =
Code js:
<script type = "text / javascript"> var app = angular.module ("tip", []); app.Controller ("buctipController", fonction () {}). Template: "<Button class = 'BucselectedButton Bucselected' ng-Click = 'clicked ()' ng-souover = 'MouseOver ()' ng-Mouseout = 'Mouseout ()'> {{myTitle}} / <div style = 'border: 1px solide solide #dcdcdc; Border-Radius: 6px; largeur: Auto; hauteur: 20px; line-height: 20px; position: Absolute; top: -40px; padding: 5px; white-espace: nowrap; background-color: #fafafa; Style = 'Position: Absolut; top: 25px; gauche: 10px; fond-couleur: #fafafa; bordure: 1px solide #dcdcdc; width: 10px; height: 10px; transform: rotate (45deg); border-left: non; border-top: non;'> / </span> / </v> / </ / bouton> ", lien: fonction (scope, arem, ait, ° scope.mouseOver = fonction () {$ (.Déplacez la souris dans le bouton, la pointe apparaît et lorsque la souris est déplacée, la pointe disparaît. J'ai utilisé l'attribut CSS3 pour implémenter le petit triangle de la pointe.
Résumer
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre AngularJS. Si vous avez des questions, veuillez laisser un message pour communiquer.