Angularjs/Bootstrap - 如何創建一個無狀態按鈕

使用Bootstrap and Angularjs我想創建一個從未顯示爲「活動」的按鈕。當鼠標放在它上面時，我希望按鈕稍微變暗，並且當它被點擊時，我希望它會進一步變暗。但是，當鼠標離開按鈕時，我希望它恢復到原來的樣子。Angularjs/Bootstrap - 如何創建一個無狀態按鈕

從語義上講，我使用按鈕來「重置」我的應用程序的一部分。點擊時我想執行一些代碼。然而，按下之後，按鈕仍處於「按下」狀態是沒有意義的。

這是live example。

任何想法？

來源

2014-03-31 dB'

看起來像你現在有。 – Fresheyeball

或者，您可以使用ng-mouseenter和ng-mosueleave指令。

例如：

<div ng-app="ButtonApp"> 
    <div ng-controller="MainCtrl"> 
     <button ng-class="buttonClass" 
       ng-mouseenter="onMouseEnter()" 
       ng-mouseleave="onMouseLeave()"> Click Me! 
    </div> 
</div>

而在你的控制器：

var app = angular.module('ButtonApp',[]); 
app.controller('MainCtrl', ['$scope',function($scope){ 

    var defaultButtonClass = ['btn','btn-foxtrot']; 
    $scope.buttonClass = defaultButtonClass; 

    $scope.onMouseEnter = function(){ 
     $scope.buttonClass = ['btn','btn-bravo']; 
    }; 

    $scope.onMouseLeave = function() { 
     $scope.buttonClass = defaultButtonClass; 
    } 

}]);

你可以看到我的JSFiddle。

要生成按鈕顏色，您可以使用類似Beautiful Buttons for Twitter Bootstrappers之類的東西。

來源

2014-03-31 23:02:46

我想給它另一個類，比如btn-reset並添加下面的CSS。

// the order of these two is also important 
.btn-reset:hover{ 
    background-color: Dark !important; 
} 

.btn-reset:active{ 
    background-color: Darkest !important; 
} 

// you need this to reset it after it's been clicked and released 
.btn-reset:focus{ 
    background-color: Normal !important; 
}

它的工作在這裏http://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview

的問題是:focus僞類具有比標準按鈕較暗的顏色，所以之後它被點擊它仍然專注所以還是有較深的顏色，如果你想要堅持使用標準顏色，您可以爲:focus僞類添加一個新選擇器。

來源

2014-03-31 22:46:52 BenCr

這似乎在Chrome開發人員工具中工作，但我無法讓它堅持在plunkr示例中 – BenCr

我拼寫「顏色」顏色而不是錯誤。 – BenCr

Angularjs/Bootstrap - 如何創建一個無狀態按鈕

回答

相關問題