AngularJS Windows

Developer
Michael E Conroy
Size
4,665 Kb
Views
46,552
  1. AngularJS Windows Previews
  2. AngularJS Windows HTML Codes
  3. AngularJS Windows JS Codes

How do I make an angularjs windows?

Combination of AngularJS directives that use jQuery UI to create window like behavior for resizing and dragging around. Includes a directive for creating the window with just an "HTML" tag .. What is a angularjs windows? How do you make a angularjs windows? This script and codes were developed by Michael E Conroy on 03 July 2022, Sunday.

AngularJS Windows Previews
IQ Test

AngularJS Windows - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS Windows</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
</head>
<body> <html ng-app="testApp"> <head> <!-- jQuery & jQuery UI --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script> <!-- Angular --> <script src="//code.angularjs.org/1.2.12/angular.min.js" type="text/javascript"></script> <script src="//code.angularjs.org/1.2.12/angular-animate.min.js" type="text/javascript"></script> <script src="//code.angularjs.org/1.2.12/angular-sanitize.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js" type="text/javascript"></script> <!-- My Scripts --> <script src="//rawgithub.com/m-e-conroy/angled/master/jQueryUI/angled-dragndrop.js"></script> <script src="//rawgithub.com/m-e-conroy/angled/master/jQueryUI/angled-resizeit.js"></script> <script src="//rawgithub.com/m-e-conroy/angled/master/angled-filters.js"></script> <script src="//rawgithub.com/m-e-conroy/angled/master/Services/angled-helper.js"></script> <script src="//rawgithub.com/m-e-conroy/angled/master/Modules/angled-windows.js"></script> <link rel="stylesheet" href="//rawgithub.com/m-e-conroy/angled/master/Modules/css/angled-windows.css"> </head> <body ng-controller="testCtrl"> <div> <h3>Angular JS Window Directive (Multi-Window Example)</h3> <p>One of the great things about Angular is the ability to create your own HTML tags or attributes! Here's a directive that allows you to create a window like element with window like behavior with just a simple HTML tag &lt;angled-window&gt;[...]&lt;/angled-window&gt;</p> <p>Drag the "window" by its title bar, roll up its content (minimize), resize the window, scroll its content. All accomplished through new tag element attributes created as AngularJS directives using jQuery-UI and Bootstrap.</p> <div class="text-muted">Currently Dragging Object: {{obj.id}}</div> </div> <div> <h3>To Dos</h3> <ol> <li>Fix resize to create individualized window body content ids <span class="text-success glyphicon glyphicon-check"></span></li> <li>Why does rolling up of one window move the other? <span class="text-success glyphicon glyphicon-check"></span> <span class="text-success">Position style seemed to fix this, see #4</span></li> <li>Need to add groups to the draggable window so they shuffle. <span class="text-success glyphicon glyphicon-check"></span> <span class="text-success">Draggable directive already accounted for group - just needed to add group attribute to angled-window tag.</span></li> <li>Window positions need to be absolute, why does jQuery UI add "relative" <span class="text-success glyphicon glyphicon-check"></span> <span class="text-success">Added style="position: absolute" directly to the &lt;angled-window&gt; tag.</li> <li>Provide defaults and configuration settings via an AnuglarJS Provider</li> </ol> </div> <br><br> <angled-window title="Lorem Ipsum" status="statusMsg2" grouping="w" style="top: 195px; left: 195px;"> <div> <img src="http://placehold.it/75" style="float: left; border: 1px solid #666;" hspace="12" vspace="10"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut dignissim lectus, in ultricies magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce a turpis ullamcorper odio dapibus pellentesque at vel mi. Duis sem eros, blandit nec cursus ullamcorper, laoreet at augue. Donec at sollicitudin leo, vitae venenatis enim. Pellentesque eget nulla eget erat varius imperdiet mattis quis sem. Donec ac odio facilisis augue dapibus porttitor. Nulla tincidunt nibh quis tempor porttitor. Phasellus viverra nisl nec orci fermentum, at lobortis nibh sodales. Cras nec aliquet risus. Donec consectetur scelerisque ultricies. Quisque sodales venenatis sem sit amet molestie. Proin ultricies in orci et sodales.</p>
<p>Praesent eros metus, tristique in nisi hendrerit, consectetur tempor mauris. Sed suscipit adipiscing dolor pellentesque cursus. Sed neque mi, gravida vitae hendrerit eget, convallis quis est. Vestibulum id quam odio. Donec sagittis varius sem, non blandit justo sodales a. Etiam at massa lorem. Maecenas malesuada dictum velit, et suscipit lorem cursus a. Ut ac enim in eros ullamcorper dapibus in a arcu. Mauris tempus arcu eros, non hendrerit velit mollis ac. Morbi enim metus, varius ultricies est quis, porttitor vehicula velit. Cras tellus lorem, congue at vestibulum non, sagittis eu sapien.</p>
<p>Integer non magna porttitor, commodo metus sit amet, hendrerit dui. Proin sem sem, faucibus ut adipiscing quis, viverra at diam. Vivamus tincidunt lacinia elementum. Vivamus adipiscing vel enim porta interdum. Suspendisse ultricies, metus sed laoreet faucibus, erat velit fermentum ligula, non facilisis odio sapien in eros. Mauris rhoncus neque at leo feugiat blandit. Maecenas rhoncus tempor pretium. Integer non ante et lectus cursus scelerisque eget ut urna. Sed dictum aliquet sagittis. Phasellus rutrum neque nec libero dictum, eu venenatis enim eleifend. Proin tempus mollis viverra. Nullam imperdiet mi nec consectetur dapibus. Pellentesque tempor leo eget dui pulvinar ultrices. Nullam eget lacus id ante feugiat accumsan sit amet eget ante.</p>
<p>In in facilisis dolor. Phasellus in dolor at orci dapibus iaculis. Duis adipiscing tincidunt felis. In ligula metus, varius quis semper in, porta et quam. Nam augue orci, sagittis sed luctus a, bibendum laoreet diam. Proin ac sapien nisl. Vestibulum semper scelerisque quam, tristique sollicitudin ante condimentum ac. Cras ultricies mattis fermentum. Donec congue, felis non imperdiet euismod, odio justo convallis justo, ut auctor nisl ipsum sed enim. Nunc faucibus nibh sed pellentesque volutpat. Maecenas diam dui, ornare id orci fringilla, eleifend tristique quam. Duis semper rhoncus odio et imperdiet. Integer posuere enim dui, sed bibendum dolor bibendum vitae. Sed rutrum, dui eget lobortis tincidunt, leo urna lacinia lectus, eget aliquet lorem nisl eu lacus. Nulla molestie vel nibh ut lobortis. Pellentesque ut turpis in libero semper pellentesque.</p> </div> </angled-window> <angled-window id="{{winId}}" title="My Menu" status="statusMsg" grouping="w" style="top: 250px; left: 250px;"> <div class="text-muted"><small>The accordion below is an Angular-UI-Bootstrap directive.</small></div> <accordion close-others="onAtATime"> <accordion-group heading="Manage Users" class="cursor-pointer"> <p class="text-muted"><small>Try dragging a user</small></p> <ul class="list-group"> <li class="list-group-item cursor-move" angled-draggable="{helper: 'clone',revert: true,appendTo: 'body'}" id="Mike" group="w">Mike</li> <li class="list-group-item cursor-move" angled-draggable="{helper: 'clone',revert: true,appendTo: 'body'}" id="Mary" group="w">Mary</li> <li class="list-group-item cursor-move" angled-draggable="{helper: 'clone',revert: true,appendTo: 'body'}" id="Doug" group="w">Doug</li> <li class="list-group-item cursor-move" angled-draggable="{helper: 'clone',revert: true,appendTo: 'body'}" id="Catherine" group="w">Catherine</li> <li class="list-group-item cursor-move" angled-draggable="{helper: 'clone',revert: true,appendTo: 'body'}" id="Jake" group="w">Jake</li> <li class="list-group-item cursor-move" angled-draggable="{helper: 'clone',revert: true,appendTo: 'body'}" id="Nareen" group="w">Nareen</li> </ul> </accordion-group> <accordion-group heading="Manage Departments" class="cursor-pointer"> <ul class="list-group"> <li class="list-group-item">Marketing</li> <li class="list-group-item">Communications</li> <li class="list-group-item">Education</li> <li class="list-group-item">Graduate</li> <li class="list-group-item">Undergraduate</li> <li class="list-group-item">Admissions</li> </ul> </accordion-group> <accordion-group heading="Sites" class="cursor-pointer"> <ul class="list-group"> <li class="list-group-item">Web Services</li> <li class="list-group-item">Admissions</li> <li class="list-group-item">Undergraduate Catalog</li> <li class="list-group-item">Advising</li> </ul> </accordion-group> <accordion-group heading="Data Sets" class="cursor-pointer"> <ul class="list-group"> <li class="list-group-item">Marketing</li> <li class="list-group-item">Catalog</li> <li class="list-group-item">Advising</li> <li class="list-group-item">Admissions</li> </ul> </accordion-group> <accordion-group heading="Templates" class="cursor-pointer"> <ul class="list-group"> <li class="list-group-item">Generic</li> <li class="list-group-item">Marketing</li> <li class="list-group-item">Catalog</li> <li class="list-group-item">Admissions</li> </ul> </accordion-group> </accordion> </angled-window> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

AngularJS Windows - Script Codes JS Codes

angular.module('testApp',['angled-windows','ui.bootstrap'])
.controller('testCtrl',['$scope',function($scope){ $scope.onAtATime = true; // only one menu section showing at a time in the accordion $scope.winId = 'myMenu'; $scope.statusMsg = 'Ready!'; $scope.statusMsg2 = 'Michael Conroy'; $scope.obj = {id: 'No object'}; $scope.$on('angled.draggable.started',function(evt,data){ if(angular.isDefined(data.obj.id)) $scope.obj.id = data.obj.id; if(data.obj.id == $scope.winId) $scope.statusMsg = 'Being moved!'; }); $scope.$on('angled.draggable.stopped',function(evt){ $scope.obj.id = 'No object'; $scope.statusMsg = 'Ready!'; }); $scope.$on('angled.resizable.started',function(evt,data){ $scope.statusMsg = 'Being resized!'; }); $scope.$on('angled.resizable.stopped',function(evt,data){ $scope.statusMsg = 'Ready!'; });
}]);
AngularJS Windows - Script Codes
AngularJS Windows - Script Codes
Home Page Home
Developer Michael E Conroy
Username m-e-conroy
Uploaded July 03, 2022
Rating 3
Size 4,665 Kb
Views 46,552
Do you need developer help for AngularJS Windows?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Michael E Conroy (m-e-conroy) Script Codes
Name
AngularJS Draggable Directive
AngularJS BootStrap 3 Modal Dialogs
Button with animated timer
Sass Bourbon Tests
Course Layout in Angular Material
Edit User Details in Dialog
Dragging in AngularJS
AngularJS Floating Menu
NgRepeat with Controller As Test
AngularJS Dialog Service, with i18n
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!