JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/ng-template" id="float-window">
<div class="float-window panel panel-default">
<div class="panel-heading">
{{header}}
<a href="" class="pull-right btn btn-default btn-xs" ng-click="closeWindow()">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
<div class="panel-body" ng-transclude></div>
</div>
</script>
<script type="text/ng-template" id="document">
<div class="document" ng-controller="DocumentController">
<div class="row">
<div class="col-sm-12">
{{document.data}}
</div>
</div>
</div>
</script>
<div class="container" ng-controller="ApplicationController">
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">MDI-like</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a data-toggle="dropdown" href="" ng-click="resetWindowsCounter()">Окна
<span class="badge badge-important pull-right" ng-show="newWindowsCount">{{newWindowsCount}}</span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation" class="dropdown-header">Открытые окна</li>
<li ng-repeat="window in openedWindows"...
JavaScript
var mdi = angular.module('MDIDemo',[]);
mdi.directive('floatWindow',function($templateCache){
return {
priority: 0,
template: $templateCache.get('float-window'),
transclude: true,
link: function ($scope, element, attrs) {
element.draggable({
handle: '.panel-heading'
});
$scope.closeWindow = function(){
$scope.$emit('windowClosed', $scope);
element.remove();
};
}
}
});
mdi.controller('ApplicationController',function($scope,$compile,$templateCache){
$scope.newWindowsCount = 0;
$scope.resetWindowsCounter = function(){
$scope.newWindowsCount = 0;
}
$scope.openedWindows = [];
$scope.openWindow = function(template){
var $windowScope = $scope.$new(true),
template = $($templateCache.get(template));
template = $('<div/>').append(template);
$windowScope.header = 'Новое окно ' + ($scope.openedWindows.length + 1);
template.attr('float-window',true);
$('body > .container').append($compile(template)($windowScope));
$scope.openedWindows.push($windowScope);
$scope.newWindowsCount = $scope.openedWindows.length;
}
$scope.$on('windowClosed', function(event, window){
var index = $scope.openedWindows.indexOf(window)
$scope.openedWindows.splice(index, 1);
$scope.newWindowsCount = $scope.openedWindows.length;
});
});
mdi.controller('DocumentController',function($scope){
$scope.document = {
data: 'Here is unique document data: ' + new Date()
};
});
html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
html.addClass('ng-app');
return angular.bootstrap(html, ['MDIDemo']);
});