Панель инструментов. Пример, как обернуть jQuery-плагин директивой AngularJS
<!doctype html>
<html ng-app="Toolbar">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://paulkinzett.github.com/toolbar/js/jquery.toolbar.js"></script>
<script>
angular.module('Toolbar', [])
.directive('toolbarTip', function() {
return {
link: function(scope, element, attrs) {
// Функция link отдает в качестве параметра элемент, помеченный нашим атрибутом.
// Оборачиваем этот элемент jQuery, и получаем из attrs значение атрибута.
// Функция scope.$eval() вычисляет переданное ей выражение. В нашем случае
// просто превращает строку в массив с параметрами плагина
$(element).toolbar(scope.$eval(attrs.toolbarTip));
}
};
});
</script>
<link rel="stylesheet" type="text/css" href="http://paulkinzett.github.com/toolbar/css/toolbars.css">
<style>
#format-toolbar {
margin-left: auto;
margin-right: auto;
}
#format-toolbar-options { display: none; }
.settings-button {
width: 36px;
height: 28px;
border-radius: 5px;
border: 1px solid #161615;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
opacity: 0.3;
background-color: #343433;
z-index: 2;
display: block;
margin: 60px 44px;
}
.settings-button:hover, .pressed {
background-color: #343433;
opacity: 0.7;
cursor: pointer;
z-index: 2;
}
.settings-button img {
margin: 5px auto 0px auto;
display: block;
z-index: -1;
}
</style>
</head>
<body>
<!-- Место, куда нужно щелкать, чтобы показалась панель инструментов -->
<div id="format-toolbar" class="settings-button" toolbar-tip="{content: '#format-toolbar-options', position: 'top'}">
<img src="http://paulkinzett.github.com/toolbar/img/icon-cog-small.png">
</div>
<!-- Код панели инструментов -->
<div id="format-toolbar-options">
<a href="#"><i class="icon-align-left"></i></a>
<a href="#"><i class="icon-align-center"></i></a>
<a href="#"><i class="icon-align-right"></i></a>
</div>
</body>
</html>