Use the following code to create a basic inputEx Dialog. Note the scope hack with "Example1" to define the buttons callbacks.
| 1 | // HTML code |
| 2 | <button onclick="Example1.myPanel.show();">Show Panel</button> |
| 3 | |
| 4 | // Javascript code |
| 5 | Example1 = {}; |
| 6 | var formConfig = { |
| 7 | type: 'form', |
| 8 | fields: [ |
| 9 | {type: 'select', label: 'Title', name: 'title', choices: ['Mr', 'Mrs', 'Ms'] }, |
| 10 | {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, |
| 11 | {label: 'Lastname', name: 'lastname', value:'Dupont' } }, |
| 12 | {type:'email', label: 'Email', name: 'email'}, |
| 13 | {type:'url', label: 'Website',name:'website'} |
| 14 | ], |
| 15 | buttons: [ |
| 16 | {type: 'submit', value: 'Send', onClick: function() { |
| 17 | alert(YAHOO.lang.JSON.stringify(Example1.myPanel.getForm().getValue())); |
| 18 | return false; // prevent form submit |
| 19 | }}, |
| 20 | {type: 'link', value: 'Cancel', onClick: function() { Example1.myPanel.hide(); } } |
| 21 | ] |
| 22 | } |
| 23 | Example1.myPanel = new inputEx.widget.Dialog({ |
| 24 | inputExDef: formConfig, |
| 25 | title: 'Here the title of your dialog' |
| 26 | }); |
| view plain | print | ? |
Access the YUI panel properties with the "panelConfig" object. Example with a modal dialog. (See the YUI panel documentation for more informations.)
| 1 | Example2 = {}; |
| 2 | Example2.myPanel = new inputEx.widget.Dialog({ |
| 3 | inputExDef: { |
| 4 | type: 'form', |
| 5 | fields: [ |
| 6 | {type:'string', label: 'Name', name: 'firstname', required: true }, |
| 7 | {type:'email', label: 'Email', name: 'email', description: 'Won\'t be displayed...'}, |
| 8 | {type:'url', label: 'Website',name:'website', typeInvite: '(optional)'}, |
| 9 | {type:'text', label: 'Your comment',name:'comments'} |
| 10 | ], |
| 11 | buttons: [ |
| 12 | {type: 'submit', value: 'Send', onClick: function() { |
| 13 | alert(YAHOO.lang.JSON.stringify(Example2.myPanel.getForm().getValue())); |
| 14 | return false; |
| 15 | }}, |
| 16 | {type: 'link', value: 'Cancel', onClick: function() { Example2.myPanel.hide(); } } |
| 17 | ] |
| 18 | }, |
| 19 | title: 'Please post a comment !', |
| 20 | panelConfig: { |
| 21 | constraintoviewport: true, |
| 22 | underlay:"shadow", |
| 23 | close:true, |
| 24 | fixedcenter: true, |
| 25 | visible:false, |
| 26 | draggable:true, |
| 27 | modal: true |
| 28 | } |
| 29 | }); |
| view plain | print | ? |