欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色效果

 更新時(shí)間:2016年09月07日 10:52:52   作者:Jennry  
這篇文章給大家介紹了如何利用AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色的效果,文中提供了實(shí)例代碼,對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,下面來(lái)一起看看吧。

本文用angularJS簡(jiǎn)單實(shí)現(xiàn)了一個(gè)小的按鈕提示,按鈕點(diǎn)擊后會(huì)變色,注意html文件中需要引入jquery.js和angular.js

運(yùn)行截圖:

當(dāng)點(diǎn)擊按鈕的時(shí)候 按鈕的樣式改變:

css代碼:

<style type="text/css">
  *{margin: 0px;padding: 0px;}
  .bucSelectedButton{width: 100px;line-height: 30px;text-align: center;position: relative;}
  .bucSelected {border:1px solid rgb(195,195,195);color:#000;cursor: pointer;border-radius: 6px;background-color: rgb(255,255,255);}
  .bucSelectedHover{border: 1px solid rgb(74,201,255);color: rgb(74,201,255);cursor: pointer;border-radius: 6px;background-color: rgb(238,249,254);}
  .bucSelectedHover .tip {color: rgb(0,0,0);background-color: rgb(255,255,255);}
 </style>

html代碼:

<div ng-controller="bucTipController">
 <!-- 指令 -->
 <buc-button id="numberType" my-title="按鈕" tip-title = "這個(gè)是提示" 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 {
  restrict : 'E',
  replace : true,
  scope : {
   myTitle : "@",
   id : "@",
   tipTitle : "@"
  },
  template : "<button class='bucSelectedButton bucSelected' ng-click='clicked()' ng-mouseover = 'mouseover()' ng-mouseout = 'mouseout()'>{{myTitle}}\
    <div style='border:1px solid #dcdcdc;border-radius:6px;width:auto;height:20px;line-height:20px;position:absolute;top:-40px;padding:5px;white-space:nowrap;background-color:#fafafa;display:none;color:#000;left:20px;' class='tip'>{{tipTitle}}\
     <span style='position:absolute;top:25px;left:10px;background-color:#fafafa;border:1px solid #dcdcdc;width:10px;height:10px;transform:rotate(45deg);border-left:none;border-top:none;'>\
     </span>\
    </div>\
    </button>",
  link : function(scope,elem,attrs) {
   scope.mouseover = function(){
    $(".tip").show();
   }

   scope.mouseout = function(){
    $(".tip").hide();
   }

   scope.clicked = function(){
    elem.toggleClass("bucSelectedHover");
    $(".tip").hide();
   }
  }
 }
})
</script>

鼠標(biāo)移入按鈕,tip提示出現(xiàn),鼠標(biāo)移出的時(shí)候,tip消失。tip的小三角我是利用了css3的屬性來(lái)實(shí)現(xiàn)的。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)AngularJS能有所幫助。如果有疑問(wèn)大家可以留言交流。

相關(guān)文章

  • 詳解Angular-Cli中引用第三方庫(kù)

    詳解Angular-Cli中引用第三方庫(kù)

    本篇文章主要介紹了詳解Angular-Cli中引用第三方庫(kù) ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-05-05
  • 詳解angular如何調(diào)用HTML字符串的方法

    詳解angular如何調(diào)用HTML字符串的方法

    這篇文章主要介紹了詳解angular如何調(diào)用HTML字符串的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-06-06
  • AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼

    AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼

    這篇文章主要介紹了AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼,需要的朋友可以參考下
    2017-09-09
  • angular異步驗(yàn)證防抖踩坑實(shí)錄

    angular異步驗(yàn)證防抖踩坑實(shí)錄

    這篇文章主要給大家介紹了關(guān)于angular異步驗(yàn)證防抖踩坑的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • 基于AngularJS實(shí)現(xiàn)的工資計(jì)算器實(shí)例

    基于AngularJS實(shí)現(xiàn)的工資計(jì)算器實(shí)例

    這篇文章主要介紹了基于AngularJS實(shí)現(xiàn)的工資計(jì)算器,結(jié)合具體實(shí)例形式分析了AngularJS數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下
    2017-06-06
  • 詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套

    詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套

    這篇文章主要介紹了詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • AngularJS 日期格式化詳解

    AngularJS 日期格式化詳解

    AngularJS的日期格式化有兩種形式,一種是在HTML頁(yè)面,一種是在JS代碼里,都是用到AngularJS的過(guò)濾器$filter
    2015-12-12
  • AngularJS中的API(接口)簡(jiǎn)單實(shí)現(xiàn)

    AngularJS中的API(接口)簡(jiǎn)單實(shí)現(xiàn)

    本文主要介紹AngularJS API(接口),這里對(duì)AngularJS API的知識(shí)做了詳細(xì)講解,并附簡(jiǎn)單代碼實(shí)例,有需要的小伙伴可以參考下
    2016-07-07
  • 用Angular實(shí)現(xiàn)一個(gè)掃雷的游戲示例

    用Angular實(shí)現(xiàn)一個(gè)掃雷的游戲示例

    這篇文章主要介紹了用Angular實(shí)現(xiàn)一個(gè)掃雷的游戲示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • AngularJS中關(guān)于ng-class指令的幾種實(shí)現(xiàn)方式詳解

    AngularJS中關(guān)于ng-class指令的幾種實(shí)現(xiàn)方式詳解

    這篇文章給大家介紹了angularJS中ng-class指令的三種實(shí)現(xiàn)方式,其中包括通過(guò)數(shù)據(jù)的雙向綁定、通過(guò)對(duì)象數(shù)組和通過(guò)key/value這三種方式,有需要的朋友們可以參考學(xué)習(xí),下面來(lái)一起看看吧。
    2016-09-09

最新評(píng)論