app:modaldialog
| Widget Name | appcelerator modaldialog |
| Element | <app:modaldialog> |
| Author | Jeff Haynie |
| Homepage | http://www.appcelerator.org |
| Description | modaldialog widget |
- Required Attributes (1)
- Optional Attributes (2)
- Examples (1)
- Source code
| Name | Type | Description | Default value |
|---|---|---|---|
| on | On Expression | Used to show the modal dialog | Not specified |
| Name | Type | Description | Default value |
|---|---|---|---|
| property | Identifier | Property of triggering message to use as namespace when template-replacing body on exxecute | Not specified |
| top | Number | Something related to distance from the top of the page | Not specified |
Back to menuExample: Simple Example
This is a simple example that uses the <app:modaldialog>.
Click here for free Macallan and 2.5% more happiness
Request Denied
I don't think so pal...
Close Me
<a on="click then l:modaldialog1.test">Click here for free Macallan and 2.5% more happiness</a> <div style="margin-top:10px"> <img src="widgets/app_panel/doc/macallan.gif"/> </div> <app:modaldialog on="l:modaldialog1.test then execute"> <html:table width="30%" align="center" class="my_modal_container"> <html:tr> <html:td class="my_modal_header" align="left" valign="middle"> <html:img src="cross.png"></html:img> Request Denied </html:td> </html:tr> <html:tr> <html:td class="my_modal_body" valign="middle" align="center"> I don't think so pal... <html:a on="click then l:appcelerator.modaldialog.hide">Close Me</html:a> </html:td> </html:tr> </html:table> </app:modaldialog>
1 /* 2 * This file is part of Appcelerator. 3 * 4 * Copyright (C) 2006-2008 by Appcelerator, Inc. All Rights Reserved. 5 * For more information, please visit http://www.appcelerator.org 6 * 7 * Appcelerator is free software: you can redistribute it and/or modify 8 * it under the terms of the GNU General Public License as published by 9 * the Free Software Foundation, either version 3 of the License, or 10 * (at your option) any later version. 11 * 12 * This program is distributed in the hope that it will be useful, 13 * but WITHOUT ANY WARRANTY; without even the implied warranty of 14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 15 * GNU General Public License for more details. 16 * 17 * You should have received a copy of the GNU General Public License 18 * along with this program. If not, see <http://www.gnu.org/licenses/>. 19 * 20 */ 21 22 23 Appcelerator.Widget.Modaldialog = 24 { 25 getName: function() 26 { 27 return 'appcelerator modaldialog'; 28 }, 29 getDescription: function() 30 { 31 return 'modaldialog widget'; 32 }, 33 getVersion: function() 34 { 35 return '1.0.1'; 36 }, 37 getSpecVersion: function() 38 { 39 return 1.0; 40 }, 41 getAuthor: function() 42 { 43 return 'Jeff Haynie'; 44 }, 45 getModuleURL: function () 46 { 47 return 'http://www.appcelerator.org'; 48 }, 49 isWidget: function () 50 { 51 return true; 52 }, 53 getWidgetName: function() 54 { 55 return 'app:modaldialog'; 56 }, 57 getActions: function() 58 { 59 return ['execute']; 60 }, 61 getAttributes: function() 62 { 63 var T = Appcelerator.Types; 64 return [{ 65 name: 'on', 66 optional: false, 67 type: T.onExpr, 68 description: "Used to show the modal dialog" 69 }, { 70 name: 'property', 71 optional: true, 72 type: T.identifier, 73 description: 'Property of triggering message to use as namespace when'+ 74 ' template-replacing body on exxecute' 75 }, { 76 name: 'top', 77 optional: true, 78 type: T.number, 79 description: 'Something related to distance from the top of the page' 80 }]; 81 }, 82 83 execute: function(id,parameterMap,data,scope) 84 { 85 var compiled = parameterMap['compiled']; 86 var propertyName = parameterMap['property']; 87 var array = null; 88 89 if (!compiled) 90 { 91 compiled = eval(parameterMap['template'] + '; init_'+id); 92 parameterMap['compiled'] = compiled; 93 } 94 95 if (propertyName) 96 { 97 array = Object.getNestedProperty(data,propertyName) || []; 98 } 99 100 var html = ''; 101 if (!array || array.length == 0) 102 { 103 html = compiled(data); 104 } 105 else 106 { 107 html = compiled(array[0]); 108 } 109 110 html = '<div scope="' + (scope || element.scope) + '">' + html + '</div>'; 111 112 var overlay = $('overlay'); 113 var overlaydata = $('overlay_data'); 114 115 Appcelerator.Compiler.destroyContent(overlaydata); 116 overlaydata.innerHTML = html; 117 118 Appcelerator.Compiler.dynamicCompile(overlaydata); 119 120 var arrayPageSize = Element.getDocumentSize(); 121 overlay.style.height = arrayPageSize[3] + 250 + 'px'; 122 Element.show(overlay); 123 124 var dataTop = 0; 125 if (!parameterMap['top']) 126 { 127 var arrayPageScroll = Element.getPageScroll(); 128 var dataTop = Math.min(80,arrayPageScroll + (arrayPageSize[3] / 5)); 129 $D('modaldialog: dataTop='+dataTop+',arrayPageScroll='+arrayPageScroll+',arrayPageSize[3]='+arrayPageSize[3]); 130 } 131 else 132 { 133 dataTop = parseInt(parameterMap['top']); 134 } 135 overlaydata.style.top = dataTop + 'px'; 136 Element.show(overlaydata); 137 }, 138 buildWidget: function(element,parameters,state) 139 { 140 var hidemessage = 'l:appcelerator.modaldialog.hide'; 141 142 var overlay = $('overlay'); 143 if (!overlay) 144 { 145 var overlayHtml = '<div id="overlay" style="display: none" on="' + hidemessage + ' then hide" scope="*"></div>'; 146 new Insertion.Bottom(document.body, overlayHtml); 147 overlay = $('overlay'); 148 overlay.modaldialog_compiled = 1; 149 Appcelerator.Compiler.compileElement(overlay,state); 150 } 151 else 152 { 153 // allow overlay to be added in the doc but we attach to it 154 if (!overlay.modaldialog_compiled) 155 { 156 overlay.setAttribute('scope','*'); 157 overlay.setAttribute('on',hidemessage+' then hide'); 158 Appcelerator.Compiler.compileElement(overlay,state); 159 overlay.modaldialog_compiled = 1; 160 } 161 } 162 163 var overlaydata = $('overlay_data'); 164 if (!overlaydata) 165 { 166 var overlayDataHtml = '<div on="' + hidemessage + ' then hide" class="overlay_data" id="overlay_data" style="display: none" scope="*"><
Chapters
- Web Expressions (Interaction)
- Web Expressions (Visual)
- Web Expression Macros
-
Widget Reference
- app:as_flexflow
- app:box
- app:button
- app:calendar
- app:chart
- app:content
- app:datacache
- app:datatable
- app:download
- app:editinplace
- app:ext_grid
- app:ext_paging_grid
- app:ext_tree
- app:field
- app:folder
- app:graphical_music_player
- app:http
- app:if
- app:imagetransition
- app:iterator
- app:message
- app:modalbox
- » app:modaldialog
- app:mp3player
- app:music_player
- app:pagination
- app:panel
- app:progressbar
- app:script
- app:search
- app:security
- app:shadowbox
- app:simple_panel
- app:statemachine
- app:stopwatch
- app:tabpanel
- app:template
- app:tooltip
- app:upload
- app:validation
- app:widget
- app:yui_map
- CSS Helper Classes
- Advanced Configuration
- Debugging
- Forms
- Localization
- Interpolation
- Javascript Variables
- Javascript Functions
- Service Broker