В этой статье используется AngularJS для простого реализации небольшой подсказки кнопки. Кнопка изменит цвет после нажатия. Обратите внимание, что jquery.js и angular.js должны быть введены в файл HTML.
Скриншот работает:
При нажатии на кнопку стиль кнопки меняется:
CSS -код:
<style type = "text/css"> *{маржа: 0px; падки: 0px;} .bucsecectedbutton {ширина: 100px; линейная-высота: 30px; текстовый анктив: центр; позиция: относительно;} .bucselected {граница: 1px solid rgb (195,195,195); 6px; фоновый цвет: rgb (255,255,255);} .bucseceedhover {граница: 1px solid rgb (74,201,255); цвет: RGB (74,201,255); cursor: pointer; граница-радий: 6px; founal-color: rgb (238,249,25). .tip {color: rgb (0,0,0); фоновый цвет: rgb (255,255,255);} </style>HTML -код:
<div ng-controller = "buctipcontroller"> <!-Директива-> <buc-button id = "numbertype" my-title = "кнопка" tip-title = "Это подсказка" style = "margin-top: 60px;" </buc-button> </div>
JS -код:
<script type = "text/javascript"> var app = angular.module ("tip", []); app.controller ("buctipcontroller", function () {}). Directive ("Bucbutton", function () {return {Rentrict: 'e', заменить: true, scope: {mytitle: "@"@"@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@wipt: }, шаблон: "<<button class = 'bucseceedbutton bucsected' ng-click = 'clicked ()' ng-mouseover = 'mouseover ()' ng-mouseout = 'mouseout ()'> {{mytitle}}/ <div Style = 'border: 1px sold #dcdcdc; граница-радиус: 6px; ширина: Auto; Height: 20px; Line-Height: 20px; Положение: Absolute; Top: -40px; Padding: 5px; белое пространство: nowrap; фоновый цвет: #fafa; disploy: none; color:#000; слева: 20px; ' Style = 'Положение: Absolute; Top: 25px; слева: 10px; фоновый цвет: #fafafa; граница: 1px solid #dcdcdc; ширина: 10px; высота: 10px; преобразование: вращение (45deg); граница-лето: нет; scope.mouseover = function () {$ (". Tip"). Show ();Переместите мышь в кнопку, появляется наконечник, и когда мышь перемещается, наконечник исчезает. Я использовал атрибут CSS3 для реализации маленького треугольника наконечника.
Суммировать
Вышеуказанное - все содержание этой статьи. Я надеюсь, что всем будет полезно изучать Angularjs. Если у вас есть какие -либо вопросы, пожалуйста, оставьте сообщение для общения.