Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carlo-colombo/diaglit
Dialog builder based on twitter-bootstrap
https://github.com/carlo-colombo/diaglit
Last synced: 8 days ago
JSON representation
Dialog builder based on twitter-bootstrap
- Host: GitHub
- URL: https://github.com/carlo-colombo/diaglit
- Owner: carlo-colombo
- Created: 2012-01-10T15:29:52.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2013-02-24T13:24:09.000Z (over 11 years ago)
- Last Synced: 2024-04-14T15:54:39.441Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 701 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
diaglit (Dialog builder based on twitter-bootstrap)
===================================================
[Examples](http://carlo-colombo.github.com/diaglit)
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
------------
* [qwery](https://github.com/ded/qwery)
* [bean](https://github.com/fat/bean)
* [ender-twitter-bootstrap](http://rvagg.github.com/bootstrap/javascript.html)
* [underscorejs](http://documentcloud.github.com/underscore)
Ender Build
-----------
`#~ ender build diaglit`
Use
------------
* include `` 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"
}
]
})
```