diaglit

Dialog builder by @lit_car, based on twitter bootstrap (unofficial ender port)

diaglit (Dialog builder based on twitter-bootstrap)

Examples

  • Multiple tab
  • Built in controls
    • input of type hidden, text, time, date, datetime, password, email, range, number
    • textarea
    • select
    • ...
  • Pluggable custom controls
  • Dialog initializazion

#~ ender build diaglit

  • include <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"> in your html
  • var diaglit =require('diaglit'), //require diaglit
    dialog = diaglit({...});
     
    dialog.$dialog.modal('show')
* Example object description
* ```
{
"tabs":{
"tab1" : {
"label" : "Tab 1",
"fields":[
{
"name": "title",
"type": "text",
"placeholder": "Insert name here",
"label": "Character name"
},
{
"name": "characterClass",
"type": "text",
"label": "class"
},
{
"name": "level",
"type": "number",
"max": 30,
"min":1,
"value": 1
} ]
}
},
"title": "Properties"
}
  • Configurable submit function
  • dialog = diaglit({...}, {
    onSubmit : function(){...}
    });
shortcut: `dialog = diaglit({...}, function(){})`
* Data initialization 
* ```
dialog = diaglit({...}, {
data: {
field_name1: 'value1',
field_name2: 12
}
});
  • Custom controls
  • var controls = require('diaglit.controls');
    controls['custom'] = function(field,data){
    ... return some DOM
    }
     
    var dialog = require('diaglit')({
    ....
    "fields" : [
    {
    type : "custom",
    name : "custom name"
    }
    ]
    })