บทความนี้ใช้ AngularJS เพียงแค่ใช้พรอมต์ปุ่มเล็ก ๆ ปุ่มจะเปลี่ยนสีหลังจากคลิก โปรดทราบว่าต้องมีการแนะนำ jQuery.js และ angular.js ลงในไฟล์ HTML
กำลังใช้งานภาพหน้าจอ:
เมื่อคลิกปุ่มสไตล์ของปุ่มจะเปลี่ยนไป:
รหัส CSS:
<style type = "text/css"> *{margin: 0px; padding: 0px;} .bucselectedbutton {ความกว้าง: 100px; สายไฟ: 30px; text-allign: จุดศูนย์กลาง: สัมพัทธ์;}. bucselected 6px; พื้นหลังสี: RGB (255,255,255);}. bucselectedhover {ชายแดน: 1px ของแข็ง RGB (74,201,255); สี: RGB (74,201,255); เคอร์เซอร์: ตัวชี้ .BucselectedHover .Tip {สี: RGB (0,0,0); พื้นหลังสี: RGB (255,255,255);} </style>รหัส HTML:
<div ng-controller = "buctipcontroller"> <!-directive-> <buc-button id = "numberType" my-title = "ปุ่ม" title = "นี่คือพรอมต์" style = "margin-top: 60px;"> </buc-button>
รหัส JS:
<script type = "text/javascript"> var app = angular.module ("tip", []); app.controller ("buctipcontroller", function () {}). Directive ("Bucbutton", function () {returt: 'e' เทมเพลต: "<button class = 'bucselectedbutton bucselected' ng-click = 'คลิก ()' ng-mouseover = 'mouseover ()' ng-mouseout = 'mouseout ()'> {{mytitle}}/ <div style = 'border: 1px solid #DCDCDC; Border-Radius: 6px; Width: Auto; ความสูง: 20px; Line-Height: 20px; ตำแหน่ง: Absolute; Top: -40px; Padding: 5px; Space White: Nowrap; style = 'ตำแหน่ง: สัมบูรณ์; ด้านบน: 25px; ซ้าย: 10px; พื้นหลังสี: #fafafa; เส้นขอบ: 1px แข็ง #dcdcdc; ความกว้าง: 10px; ความสูง: 10px; แปลง: หมุน (45deg); Scope.mouseover = function () {$ (". tip"). show ();เลื่อนเมาส์ไปที่ปุ่มปลายจะปรากฏขึ้นและเมื่อเมาส์ถูกเลื่อนออกไปปลายจะหายไป ฉันใช้แอตทริบิวต์ CSS3 เพื่อใช้สามเหลี่ยมเล็ก ๆ ของ TIP
สรุป
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ AngularJs หากคุณมีคำถามใด ๆ โปรดฝากข้อความเพื่อสื่อสาร