이 기사는 AngularJS를 사용하여 작은 버튼 프롬프트를 구현합니다. 클릭 후 버튼이 색상이 변경됩니다. jQuery.js 및 Angular.js는 HTML 파일에 도입되어야합니다.
스크린 샷 실행 :
버튼을 클릭하면 버튼 스타일이 변경됩니다.
CSS 코드 :
<스타일 유형 = "text/css"> *{마진 : 0px; 패딩 : 0px;} .BucSelectedButton {width : 100px; line-height : 30px; 텍스트-정렬 : 중심; 위치;} .BUcSelected {Porder : 1Px Solid RGB (195,195,195); 6px; 배경색 : RGB (255,255,255);} .BucSelectedHover {Border : 1PX Solid RGB (74,201,255); 컬러 : RGB (74,201,255); 커서 : 포인터; 국경-라디 우스 : 6px : RGB (238,249,254); .TIP {색상 : RGB (0,0,0); 배경색 : RGB (255,255,255);} </style>HTML 코드 :
<div ng-controller = "vuctipcontroller"> <!-지시-> <buc-button id = "numbertype"my-title = "button"tip-title = "이것은 프롬프트입니다.
JS 코드 :
<script type = "text/javaScript"> var app = angular.Module ( "tip", []); App.Controller ( "BuctipController", function () {}). 지시 ( "BucButton", function () {return {restrict : 'e', true, scope : {mytittle :@", id. }, 템플릿 : "<button class = 'bucSelectedButton bucSelected'ng-click = 'clicked ()'ng-mouseover = 'mouseover ()'ng-mouseout = 'mouseout ()'> {{myTitle}}/ <div style = '테두리 : 1px solid #dcdcdc; Border-Radius : 6px; 너비 : 자동; 높이; 높이 : 20px; 선-높이 : 20px; 위치 : 절대; 상단 : -40px; 패딩 : 5px; 흰색 공간 : Nowrap; 배경-콜로 : #fafafa; display : none; color :#000; 왼쪽 : 20px; 스타일 = '위치 : 상단; 상단 : 25px; 왼쪽 : 10px; 배경색 : #fafafa; 테두리 : 1px solid #dcdcdc; 너비 : 10px; 높이 : 10px; transform : 회전 (45deg); 테두리 왼쪽 : 없음; 테두리 : 없음;'>/ </ span>/ </ div> </ div> </ div> ", 링크 : intures (scope : elem, elem,, elem). scope.mouseover () {$ ().} scope.mouseout () {hide ()마우스를 버튼으로 이동하면 팁이 나타나고 마우스가 꺼지면 팁이 사라집니다. CSS3 속성을 사용하여 팁의 작은 삼각형을 구현했습니다.
요약
위는이 기사의 전체 내용입니다. Angularjs를 배우는 것이 도움이되기를 바랍니다. 궁금한 점이 있으면 의사 소통 할 메시지를 남겨주세요.