Multiple views side-by-side windows-like AngularJS - javascript

I want to do something similar to Azure portal with ui-router/angularjs.
When a user clicks on a link, I want to open a new window and load the template related to the link. It's possible to "drag" all windows from left to right or right to left when many are open. I thought it would be possible to manage it by using a ui-view for each new window opened, but it seems that we can't setup dynamic view name for a state. What is the best way to achieve this?
Thank you!

Related

Is there a way to display all screens in a single screen in React Native

I am working on a project where I am using multiple WebViews. Its like a browser app. The problem is that I want to create a tabview where I can show all the WebViews in a single screen. You can understand it just like chrome tabview from where I can add new tabs and remove older ones. I have googled it but cannot find a relevant answer.
Is there any way to do that.
Just like this one..
As of now, none of the current navigation libraries in react-native provide such functionality.
So the only way you can achieve this is to track your tabs on your own and in case the user wants to see all of them you should open a scrollable modal and show all available tabs to her.
And as she clicks on one of them you navigate her to that specific screen or component.

How to create an Admin layout and route views in ReactJS?

I'm developing a web app using ReactJS. I want to create an Admin layout my self. My problem is, how to change the view without reloading the sidebar? I mean, there is a sidebar in the Admin layout. We have options to click there. When we click on a particular option, let's say "User Profile", it loads the User Profile page on the right side of the screen. The URL also changes. But, the sidebar does not reload. Please, someone, edit this if the thing I'm going to express is not much clear. I hope it is clear.
I want to know, how to do this? How to route the views like that?

HTML open new window on image onclick

I have a single image in my web page, this image is basically an architecture diagram and I need to open a new window every time someone clicks this image with different content in the new opened window based on which component of the architecture diagram has been clicked by the user. How can I best achieve this feature? Please help as I am new to this.
This will do it
Link text
If you are using an image map for the links, just set the target to be _blank for each.
On a different note, do you have to open in a new window? It's just this will break the natural navigation of a browser and render the back button useless. Ending up with many new open tabs is more confusing and can be a bad user experience. Just a thought.
Perhaps use an image map and define area tags within it. This is the best way I can think of to support an image with multiple regions within it.
Make an image map. You can do this by hand or via online tools (just Google around, this is the first one I found). For your links use target="_blank" and it will open a new window/tab.
I'd suggest using map tag, i think it's easier than JavaScript
http://www.w3schools.com/tags/tag_map.asp

How to implement gmail compose window concept in Single Page Applications?

I am working on a project where it would be easier for users to quickly add transactions.
I am very much interested to do something similar to what gmail compose pop up does on the single page
I have no idea how to implement such a thing. Please give me directions about how to do such things
I am interested in building it using AngularJS
P.S Sorry for a broad question, but I really don't know what this is called and don't know what to Google for either
You can construct a popup like that very easily using a regular div element and some CSS. In particular, the position: fixed CSS property will let you put something at a position on the window, no matter how it scrolls.
Here is a simple JSFiddle that demonstrates the technique: http://jsfiddle.net/BinaryMuse/ndr2Q/
You can click the titles of the books to expand their description, which will hopefully make the preview window tall enough to scroll. (If not, just resize the window.) No matter where in the document you scroll, the "popup" window (which is just a regular element with an ng-show and some CSS) stays at the bottom-right of the screen.
You can find libraries, like Bootstrap, that present jQuery plugins to allow you to do popups on the page, but in general they're designed to prevent the user from interacting with the page behind the modal in any useful way. A technique like this allows you to scroll around and use the page in the background similar to Gmail's interface.
Dockmodal is a Gmail like dockable modal plugin that has the option to minimize and restore opened modal dialogs.
Check out these angular JS alerts based on bootstrap:
http://mgcrea.github.io/angular-strap/#/alerts
You can use the provided $modal service that takes a template URL as well :
var modal = $modal({template: '/js/app/views/elements/modal-welcome.html', show: true, backdrop: 'static'});
And shows it up as a popup.

Appcelerator. Change content of window

I am developing an iOS app in Appcelerator.
I got four tabs. How can I change the content of the window when the user clicks a special button or navbar title?
For example if the tab_1 is set to open window_1.js in app.js how can I open window_2.js in tab_1 upon button click? I would prefer not to use views since I would like the content of the window to be in seperate files.
Thankful for all input!
I ran into a similar road block the other day with a Titanium app I'm building. The Titanium.UI.TabGroup has a property called activeTab that is very helpful.
var my_other_view = Ti.UI.createView({params});
var my_tab_group = Ti.UI.createTabGroup({params});
my_tab_group.activeTab.open(my_other_view);
Of course, the code is significantly short-handed :) but it hopefully will steer you in the right direction so that you can implement the desired behavior in your app!
One of the cool thing (IMHO) about activeTab.open() is that, on iOS, a 'back' button will automatically be placed on the title bar so that the user can go back to the previous view/content.

Categories

Resources