This is a plugin for quick and easy creation of dialogs (modal windows) on your page.
connect dialogPanel.css and dialogPanel.js after jQuery connecting.
$(element).dialogPanel("open", options);
//returns: $element
//Type: Object
{
dialogName:custom dialog name (if needed, default: ""),
//Type: Object
attr:{},
//callback function, default: function(){}
init:function($dialog_element,dialog_uid,properties_and_methods){
},
//Type: Array
content:[
component1,
component2,
component1,
//....
],
//callback function, default: function(){}
func:function(request){
}
}
dialogName will be saved in "dialogname" attribute of modal window. In the future, this window can be found by using CSS Attribute Selectors. attr receives and apply attributes to dialog in the following format (in fact, this is jQuery.attr):
{
attribute_name:value
}
init is a callback function that receives element, UID of dialog (not dialogName — UID is stored in "uid" attribute and generated randomly) and object with all methods and properties
//Type: Object
{
type:componentType,
arg1:...,
//some args...
}
values:
| type value | info | args | args values |
|---|---|---|---|
| attr | applies to the current component jQuery.attr (this arg there is in all components) | ||
| init | callback: function($that_component,dialog_uid,properties_and_methods) (this arg there is in all components) |
||
| "message" | display some text message (special characters (for example, \n) will be displayed normally) | text | some text |
| "button" | add button in modal-window footer | btntext | some text |
| btnID | text id of button | ||
| "textarea" or "input" | displays an input or textarea and has the same arguments | inpID | text id of input or textarea |
| "select" | displays select | selID | text id of select |
| options | object: {value:... , text:...} where value is option value, text- displayed option text |
||
| "checkbox" | displays checkbox | chcID | text id of checkbox |
| "custom" | add div with width=100% | ||
| "uploader" | add file selector | uplID | text id of uploader |
| accept | allowed file types (same as input type=file) | ||
| multiple | if true- allows multiple file selection | ||
| upltext | the text that will initially be displayed on uploader |
//Type: Object
{
pressed:btnID of pressed button,
//Type: Object
values:{
inpID:input value
},
//Type: Object
checked:{
chcID:checkbox state - true/false
},
//Type: Object
fileLists:{
//Type: FileList
uplID:files list
}
}
jQuery("body").dialogPanel("open",{
content:[{
type:"message",
text:"example message"
},{
type:"input",
attr:{
placeholder:"input text"
},
inpID:"ex"
},{
type:"message",
text:"Did you enter the text?"
},{
type:"button",
btntext:"ok",
btnID:"ok"
},{
type:"button",
btntext:"cancel",
btnID:"canc"
}],
func:function(req){
if(req.pressed!=="ok")
return;
alert(req.values.ex);
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent