تستخدم هذه المقالة AngularJS لتنفيذ موجه زر صغير. سيتغير الزر اللون بعد النقر. لاحظ أن jquery.js و angular.js بحاجة إلى تقديم في ملف HTML.
تشغيل لقطة الشاشة:
عند النقر فوق الزر ، يتغير نمط الزر:
رمز CSS:
<type type = "text/css"> *{margin: 0px ؛ padding: 0px ؛} .bucselectedButton {width: 100px ؛ line-height: 30px ؛ text-aliv: center ؛ position ؛}. 6px ؛ خلفية اللون: RGB (255،255،255) ؛} .bucselectedHover {الحدود: 1PX Solid RGB (74،201،255) ؛ اللون: RGB (74،201،255) .tip {color: rgb (0،0،0) ؛ background-color: rgb (255،255،255) ؛} </style>رمز HTML:
<div ng-controller = "buctipcontroller"> <!-التوجيه-> <buc-button id = "numberType" my-title = "button" tiTle = "this is styp style" = "margin-top: 60px ؛
رمز JS:
<script type = "text/javaScript"> var app = Angular.Module ("tip" ، []) ؛ app.controller ("BuctipController" ، function () {}). التوجيه ("bucbutton" ، function () {return {rodrict: 'e' ، استبدال: } ، قالب: "<button class = 'bucselectedbutton bucselected' ng-click = 'clicked ()' ng-mouseover = 'mouseover ()' ng-mouseout = 'mouseout ()'> {{mytitle}}/ <div style = 'porder: 1px sold: #DCDCDC ؛ الحدود-6px ؛ العرض: Auto ؛ الطول: 20px ؛ الخط: 20px ؛ الموضع: Top: -40px ؛ Padding: 5px ؛ White-Space: Nowrap ؛ background ؛ style = 'الموضع: مطلق ؛ أعلى: 25 بكسل ؛ اليسار: 10px ؛ لون الخلفية: #fafafa ؛ الحدود: 1px الصلبة #dcdcdc ؛ العرض: 10px ؛ الارتفاع: 10px ؛ تحويل: تدوير (45deg) ؛ Scope.Mouseover =) {$ ("حرك الماوس في الزر ، ويظهر الحافة ، وعندما يتم نقل الماوس ، يختفي الحافة. لقد استخدمت سمة CSS3 لتنفيذ مثلث الطرف الصغير.
لخص
ما سبق هو المحتوى الكامل لهذه المقالة. آمل أن يكون من المفيد للجميع أن يتعلموا AngularJS. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة للتواصل.