Welcome to Velocius framework documentation

The main reason why the framework was created is lack of modular and complex solutions.

Modules

List

module name description
main Core of application
input Module to play with inputs. You know - to get something from user.
button Collection of buttons. Oneline creation.
mysql Optymalized communication driver. But not only... It's probably first worldwide driver enabling to get data straight from MySQL to your applicatio. As straight as possible.
table Put your data into beautiful and functional tables.
file Adds the ability to to download files from application.
dateChooser Generates input with calendar.
select Simple module witch complex dropdown selector with results filtering.
menu Build menus and navigations.
cookies You can't have your cake and eat it. Really? Try this module.
chart In progress...

Full functional example

<!DOCTYPE html>

<head>

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

  <title>VELOCIUS - button test</title>


  <!-- INCLUDE VELOCIUS -->

  <script src="velocius.js"></script>


  <script>
    //ADD VELOCIUS MODULES

    VelAddMod('vel_main');

    VelAddMod('vel_button');

    $(window).load(function() {

        // REST CODE ----------------------------------------------

        MakeButton({id:'vel',text: 'BUTTON TEXT',   type:'red',             onClick:'test()',size:'0'});
        MakeButton({id:'vel',text: 'BUTTON TEXT2',  type:'green',           onClick:'',     size:'0'});
        MakeButton({id:'vel',text: 'text',          type:'light',           onClick:'',     size:'0'});
        MakeButton({id:'vel',text: 'text',          type:'blue',            onClick:'',     size:'0'});
        MakeButton({id:'vel',text: 'text',          type:'teal',            onClick:'',     size:'0'});
        MakeButton({id:'vel',text: 'text',          type:'yellow',          onClick:'',     size:'0'});
        MakeButton({id:'vel',text: 'text',          type:'purple',          onClick:'',     size:'0'});
        MakeButton({id:'vel',text: 'text',          type:'dark',            onClick:'',     size:'12'});
        MakeButton({id:'vel',text: 'outline',       type:'dark vbtn-outline', onClick:'',   size:'0'});
        MakeButton({id:'vel',text: 'large',             type:'dark vbtn-large', onClick:'',     size:'0'});
        MakeButton({id:'vel',text: 'small',             type:'dark vbtn-small', onClick:'',     size:'0'});
        MakeButton({id:'vel',text: 'full',          type:'dark vbtn-full',  onClick:'',     size:'0'});
        MakeButton({id:'vel',text: 'block',             type:'dark vbtn-block', onClick:'',     size:'0'});

    });

    function test() {

        alert('test');

    }
  </script>


</head>


<body>

    <center>

        <div id='vel'></div>


    </center>


</body>

</html>

Function lists

main

name params usage action
Vel_hide StartsWith, Ids
Vel_show ID
sleep ms
Vel_Write2IDs Ids, json
IDcomp ID1,ID2
IDvalSub ID1,ID2
IDcolor id,color
IDcolorGet id
IDparam id,param,value
Vel_Write2IDsE Ids, json, error
Vel_Write2IDsErr Ids, json, error
VelRun script,pars,target
VelRunExe script,pars,target,run
FindInArray param
TodayDate
redirect target
checkUndefined iable
InsHTML2id { target, content}
RplHTML2id { target, content}
findRow {arr,col,element}

CreateNode

cn(id,parent,type,text,style);

Function to create full managable application node.
You can specify style, id, parent and other properties.
Methods:

method decrtiption
hide() hide node
show() show node
stl() specify style parameter
atr() specify attribute of the node

CreateStyle

cs(name,text,atr);

Function to create styles for nodes.


AddEvent

ae(el,fun,type);

Function to create listeners for events.
type:'click'.


AddStyle

as(el,style_name);

Function to add style to nodes.


SubStyle

ss(el,style_name);

Function to remove style from nodes.


input

createInput(name,parent,label,value,size,error_text,error_test);

Function too create full customizable Input element. You can create own style. Below You can find style names to create own theme :)

descr style name
main element vv-inp
label vv-inp-label
input value vv-inp-value
error vv-inp-error
main element error vv-inp-main-error
Element methods
method decrtiption
set(var) set value of Input
get() get value of Input
showErr() show Error message
hideErr() hide Error message
validate() validate function with result: true if OK, false if not

Generate Forms

generateForm(arr)

Function to create functional forms to edit or insert data to data bases. SIMPLE, FAST and witch only ONE LOC.

Possible elements types:

type descr variables order
input classic Input element name,label,value,error_text,validation,parent,type
checkbox classic checkbox element name,label,value,error_text,validation,parent,type
select modern select element name,label,value,select_options,null,parent,type
input6 input element takes half container name,label,value,error_text,validation,parent,type
section Big section in Form label,'','','','',parent,type
sectionS Small section in Form label,'','','','',parent,type

Possible validations:

name descr
valid_text for Strings
valid_every for any chars
valid_int for Ints
valid_float for Floats
Example
ops = [['op1','op1'],['op2','op2']];
arr = [
            ['Main block','','','','',Form1,'section'],
                ['data1','data1:','','error message' ,valid_int,Form1,'input'],
                ['data2','data2:','','error message' ,valid_int,Form1,'input'],

            ['Main block2','','','','',Form2,'section'],
                ['status','Status:','',ops ,,Form2,'select']
            ];

generateForm(arr);

Save Forms

saveForms(table,dataTable,connection,driver);

Function to save form data to DataBase.


Update Forms

updateForms(table,dataTable,connection,driver,column,value);

Function to update form data in DataBase.