In diesem Artikel wird AngularJs verwendet, um einfach eine kleine Schaltfläche zu implementieren. Die Schaltfläche ändert die Farbe nach dem Klicken. Beachten Sie, dass Jquery.js und Angular.js in die HTML -Datei eingeführt werden müssen.
Laufen Screenshot:
Beim Klicken auf die Schaltfläche ändert sich der Stil der Schaltfläche:
CSS -Code:
<style type = "text/css"> *{margin: 0px; padding: 0px; 6px; Hintergrundfarbe: RGB (255,255,255); .tip {color: rgb (0,0,0); Hintergrundfarbe: RGB (255,255,255);} </style>HTML -Code:
<div ng-controller = "buctipcontroller"> <!-Richtlinie-> <buc-button id = "numbertype" my-title = "button" tip-title = "Dies ist eine schnelle" style = "margin-top: 60px;"> </buc-button> </div> </div> </div>
JS -Code:
<script type = "text/javaScript"> var app = angular.module ("Tipp", []); app.controller ("buctipcontroller", function () {}). Anweisung ("Bucbutton", function () {return Vorlage: "<button class = 'bucSelectedButton BucSelected' ng-klick = 'klickte ()' ng-mouseover = 'mouseover ()' ng-mouseout = 'mouseout ()'> {{mytitle}}/ < #DCDCDC; Border-Radius: 6px; Breite: auto; Höhe: 20px; Zeilenhöhe: 20px; Position: Absolut; Top: -40px; Padding: 5px; weißer Space: Nowrap; Hintergrundfarbe: #fafa; Display: keine; Farbe:#000; style = 'Position: absolut; top: 25px; links: 10px; Hintergrundfarbe: #fafafa; Rand: 1px solid #dcdcdc; Breite: 10px; Höhe: 10px; scope.mouseover = function () {$ (". Tipp")Bewegen Sie die Maus in die Taste, die Spitze erscheint und wenn die Maus ausgeschaltet wird, verschwindet die Spitze. Ich habe das CSS3 -Attribut verwendet, um das kleine Dreieck des Tipps zu implementieren.
Zusammenfassen
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für alle hilfreich sein, AngularJs zu lernen. Wenn Sie Fragen haben, überlassen Sie bitte eine Nachricht, um zu kommunizieren.