[turboid] javascript solutions

Home     Contact     Search     About me
GUI
03 May 2012

Dialog and GUI Features for JavaScript

More than buttons and input fields

Complex web applications often need a good graphical user interface including menus and windows. Turboid supplements the standard GUI elements of HTML like buttons and input fields with professional and highly customizable features, which let your website look like an operating system.

It supplies you with better dialogs, a progress bar, waiting screens, movable OS-like windows and an incredibly sophisticated menu system. In the following you find a reference documenting the Turboid functions which allow your JavaScript to turn into an OS-like web application. - In order to use the extra functions, simply download the free Turboid framework and put it into the directory of your HTML file, then write this line into the head section of your HTML file, and that's it:

	

Here we go:

note(content [, sec])

Shows a box for simple messages. Write a simple message text as content or HTML code. The argument sec is the number of seconds, after which the box begins to fade out and close. If you leave it out the box stays visible until the user closes it by clicking on its close button. The function returns the box as a HTML element. The return object has got the property .closeButton, which contains the HTML Element of the close button.

Return object properties and functions:
    .closeButton Contains the HTML Element of the close button.
    .isOpen Indicates wether the box is open or not (Value becomes 0 already at the beginning of the fade out process).
    .onclose Event handler which fires if the box gets closed.
    .close() Closes the box.

note.quick(content [, sec])

Shows a box for simple messages. This function is similar to note(), but it disappears after a short time automatically. The argument sec is the number of seconds, after which the box begins to fade out and close. If you leave it out the box disappears after a short time despite of leaving the argument out. For many purposes, it is a good alternative for alert(). The return object has got the property .closeButton, which contains the HTML Element of the close button.


letConfirm(htmContent, yesFnc [, noFnc])

Makes the executing of a function ('yesFnc') be dependent on the user's confirmation. In other words, before the function code is being executed a window shows up, asking "Yes" or "No". On clicking "Yes" the argument function 'yesFnc' will be executed, on clicking "No" the argument function 'noFnc' will be executed, if it is defined - if not, nothing happens on clicking "No".

This function returns the same object as the function Window.write().


Waiting.display()

Shows a waiting screen to indicate that a process is still not finished and the application is still not ready.


Waiting.hide()

Hides the waiting screen to indicate that the process which caused the pause is finished and the application is now ready.


new ProgressBar()

Instantiates a progress bar, for example to indicate a loading process etc.

Return object properties and functions:
    .set(x,y,width) Draws the progress bar on the screen.
    .fill(seconds) Starts filling the bar. The parameter seconds defines the the filling process is supposed to take. This way you can regulate the speed of filling the bar. If the process you wanted the user to wait for has finished you then should use .finish() to complete the filling process quickly. That means that the number of seconds better should always be much greater than the technical process running in the background is expected to be.
    .stop() Stops the filling process.
    .finish() If the progress bar is still not filled up completely but not needed anymore, this function fills it quickly within around one second. (Turboid 0.63 and higher)

new ContextMenu()

This is an extremely powerful GUI feature. It allows you to define highly sophisticated and CSS-designable menus and context menus. Please be patient until a specifically to this feature dedicated article has been published.


Window.write(title, htmContent [, x, y, w, h])

Writes an arbitrary HTML code (htmContent) into a customizable window, which is an embedded part of the document (not a separate browser window). Passing coordinates and width and height values is optional. - Please pay attention to the fact that the first letter in Window must be upper case and has nothing to do with the standard JavaScript window object. [Please click here for further documentation]


Window.load(url, title [, x, y, w, h])

Loads an external website into a customizable window, which will be embedded in the document (not a separate browser window). Passing coordinates and width and height values is optional. Perfect for bypassing pop-up blocking tools. - Please pay attention to the fact that the first letter in Window must be upper case and has nothing to do with the standard JavaScript window object. [Please click here for further documentation]


Comments

Add comment:

Name: (required)
E-Mail: (required, remains invisible)
Website:
Comment:
Please check all (anti-spam):