I need a few javascript classes to accomplish the following:
4 objects:
- desktop object (a div object)
- window interfaces ( more windows in a desktop object)
- a menu object (usuable in both windows and desktop)
- a toolbar object
I need to create a windows-line interface within a browser.
The interface needs to be in javascript, and styles in css.
The classes need to generate the static html code.
Discription of the functionality:
Desktop object:
Has a width / height in the css. this contains the window objects and the toolbar object.
Window object:
Needs positioning within the desktop object. Each window has an unique identifier. If the same identifier is opened, do a focus on the window using Z-indexes. The windows need to be styles with css (YOU need to make a basic style.)
The following functionalities should be taken in account:
- window resizing. (Hide inner content while resizing?)
- window moving. (Hide inner content while resizing?)
- window minimizing. (Hide from desktop, display at toolbar.
- window dragging.
- window focussing.
- remember last width / height / top / left position after maximizing.
- parameters should be able to be given to the new window class object to add a menu object, toolbar title, window id.
Menu toolbar:
An array with menu items generated with javascript. The menu toolbar is a horizontal List item with sub menu structure. (like the one on: [login to view URL] ) ofcourse it needs to be style-able with css.
The menu items needs to contain:
parent-menu-identifier: (0 for main menu)
menu name:
menu link: (simple a href="")
menu icon identifier. (so I can add icons in css. )
The menu's need to be created dynamically, so I would need to be able to look trough an array, or give an array to the class object to fill the menu object.
The menu needs to have a "loading" state, blurring the entire menu and displaying perhaps a loading text / image. while running the javascript to build the menu. So the menu needs to be dynamically changable. So you need to be able to change the menu to "loading / disabled" state, and on the background rebuild it.
Toolbar object:
The desktop object would need a toolbar object.
( You can combine this within the desktop object) But I splitted it here to be more precize. Windows minimizing need to be displayed in the toolbar, so i am able to maximize it again. (Just a display bar for all the windows) Like windows :-)
Keep in account to make a cross reference with id's to the windows. (perhaps a window_#id# and toolbar_#id#.
I think the concept is very clear to you if you just have a look at your own windows interface. Just that, but then within a browser.
I really really really would like a window with a drop shadow effect (semi transparant) So if you can CSS / png-24 this very easy for the demo, this would be greatly appriciated.