diaglit

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

npm install diaglit
36 downloads in the last month

diaglit (Dialog builder based on twitter-bootstrap)

Examples

Feature

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

Dependencies

Ender Build

#~ ender build diaglit

Use

  • 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"
              }
          ]
      })
    
npm loves you