I need to add google webkit functionality to my application. I want something similar to what we have in gmail right now, where once we place the mouse over "+" symbol, it expands and provides us with various options like "insert photos', "insert links" etc. I am new to angularjs and any help will be greatly appreciated.
2 Answers
You can make use of ng-mouseenter and ng-mouseleave, a simple directive such as this
myApp.directive('expando', function () {
return {
restrict: 'A',
scope: {
},
controller: ['$scope', function ($scope) {
$scope.open = false;
}],
link: function ($scope, elem, attrs, ctrl) {
$scope.toggleState = function () {
if ($scope.open) {
$scope.open = false;
} else {
$scope.open = true;
}
};
},
replace: true,
transclude: true,
template: '<div ng-mouseenter="toggleState()" ng-mouseleave="toggleState()"> <span ng-hide="open" class="sectionIndicator">+</span> <div ng-show="open" class="inline" ng-transclude></div> </div>'
};});
would probably do what you need. Here is a fiddle - http://jsfiddle.net/LukeMaso/LwFws/
Comments
You can use ngMouseover, ngMouseleave and ngGlass for simple effect:
HTML
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="menu" data-ng-controller="MenuController">
<div class="button" data-ng-mouseover="expand($event)" data-ng-class="{hidden:expanded}">
+
</div>
<div class="button-shell" data-ng-class="{expanded:expanded}" data-ng-mouseleave="collapse($event)">
<div class="button">
1
</div>
<div class="button">
2
</div>
<div class="button">
3
</div>
</div>
</div>
</body>
</html>
JS
var m = angular.module('demoApp', []);
m.controller('MenuController', ['$scope', function($scope){
$scope.expanded = false;
$scope.expand = function(event){
$scope.expanded = true;
}
$scope.collapse = function(event){
$scope.expanded = false;
}
}]);
CSS
.menu {
background-color: #f5f5f5;
border-top: 1px solid #cfcfcf;
height: 31px;
cursor: pointer;
}
.button-shell {
height: 31px;
display: none;
}
.button {
height: 31px;
width: 31px;
line-height: 31px;
text-align: center;
display: inline-block;
}
.hidden {
display: none;
opacity: 0;
}
.expanded {
display: inline-block;
}
See this plunker for a demo
mouseover, start there.