JS guiClass

This class can be used for fast and easy interface generation with javascript and html. It includes the most important field types and is easy to include

---

Getting Started

If you want to use the guiClass within any of your HTML pages you need to add these three lines of code:

        <script>window.CKEDITOR_BASEPATH = 'js/plugins/ckeditor/';</script>
    <script type="text/javascript" src="JS/plugins.js"></script>
    <script type="text/javascript" src="JS/class_gui.js"></script>

Note:

• To use the upload functionality, you also still ne to write the server side scripts.

Create a Formular

When you added all the necessary files to your script you can easily create Formulars:

initialize form arrays

var fieldArray = [];
var options = [];

define headline

options['headline'] = 'Create user';

define submit action

options['action'] = function(){
    //executed on submit
};
options['buttonTitle'] = 'Save';

first field

var field0 = []; //initlize new array
field0['caption'] = 'Username';
field0['inputName'] = 'username';
field0['type'] = 'text';
fieldArray[0] = field0; //add array 

second field

var field1 = []; //initlize new array
field1['caption'] = 'Firstname';
field1['inputName'] = 'firstname';
field1['type'] = 'wysiwyg';
fieldArray[1] = field1; //add array

third field

var field2 = []; //initlize new array
field2['caption'] = 'Lastname';
field2['inputName'] = 'lastname';
field2['type'] = 'text';
fieldArray[2] = field2; //add array

load formular into #content

gui.createForm('#content',fieldArray, options);

Add uploader to the Formular

You can easily add an upload field to your form. Just choose 'file' as type and the field will be added to your form.

The guiClass uses "uploadify" for the upload, a third party plugin which sends all the file_data to a script, defined in the gui config.

wysiwyg editor

You can easily add an wysiwyg editor to your form. Just choose 'wysiwyg' as type and the editor will be added to your form.

custom html

You can delete the current document by clicking Delete document in the document panel.