/priv/sites/testsandbox/templates/test_helloworld.tpl
Smarty Template | 211 lines | 156 code | 55 blank | 0 comment | 3 complexity | 1bc509e653b34c705dc464585da09c7f MD5 | raw file
1<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> 2<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\"> 3 <head> 4 <title>zotonic</title> 5 6 {% lib 7 "/css/zp-base.css" 8 "/css/zp-type.css" 9 "/css/zp-forms.css" 10 "/css/zp-project.css" 11 "/css/zp-growl.css" 12 "/css/zp-dialog.css" 13 %} 14 15 <!--[if IE]><link href="/lib/css/zp-ie.css" type="text/css" media="screen" rel="stylesheet" /><![endif]--> 16 </head> 17 18 <body> 19 {% wire type="unload" action={alert text="Bye"} %} 20 <div class="zp-wrapper"> 21 <h1>Hello, new world {{ helloworld_counter }}</h1> 22 23 <div class="zp-50 content"> 24 <div class="padding"> 25 26 <h2>The menu should be below</h2> 27 28 {% menu %} 29 30 <h2>Postbacks which give some content</h2> 31 <p> 32 {% button text="Fill the content div" postback="fill_content" %} 33 {% button text="Insert Top" postback="insert_top" %} 34 {% button text="Insert Bottom" postback="insert_bottom" %} 35 </p> 36 37 <div class="clear"></div> 38 39 <div id="content" style="border: 1px solid green; padding: 10px; width: 100px"> 40 This is the content div 41 </div> 42 43 <h2>Some drag/drop testing</h2> 44 45 {% draggable id="drag1" tag="drag1" %} 46 <div id="drag1" style="border: 2px solid #c33; background-color: #e99; padding: 10px; width: 100px; height: 50px"> 47 <p> 48 Drag Me 49 </p> 50 </div> 51 52 <div class="clear"> </div> 53 54 {% droppable id="drop1" tag="drop1" %} 55 <div id="drop1" style="border: 2px solid #3c3; background-color: #9e9; padding: 10px; width: 100px; height: 50px"> 56 <p> 57 Drop Here 58 </p> 59 </div> 60 61 <h2>Sorter and sortables</h2> 62 63 <div id="sort" class="padding"> 64 <div id="s1"> 65 <p>sortable 1</p> 66 </div> 67 <div id="s2"> 68 <p>sortable 2</p> 69 </div> 70 <div id="s3"> 71 <p>sortable 3</p> 72 </div> 73 <div id="s4"> 74 <p>sortable 4</p> 75 </div> 76 <div id="s5"> 77 <p>sortable 5</p> 78 </div> 79 </div> 80 81 {% sorter id="sort" %} 82 {% sortable id="s1" %} 83 {% sortable id="s2" %} 84 {% sortable id="s3" %} 85 {% sortable id="s4" %} 86 {% sortable id="s5" %} 87 88 <h2>Some effects</h2> 89 90 <div class="zp-20"> 91 {% button text="Hide" action={hide target="ef"} %} 92 {% button text="Show" action={show target="ef"} %}<br/><br/> 93 {% button text="Fade" action={fade_out target="ef"} %} 94 {% button text="Appear" action={fade_in target="ef"} %}<br/><br/> 95 {% button text="Toggle" action={toggle target="ef"} %}<br/><br/> 96 97 <a id="tgl" href="#">wired toggle</a> 98 {% wire id="tgl" action={toggle target="ef"} %} 99 </div> 100 101 <div class="zp-40"> 102 <div id="ef" style="border:1px solid black; background-color: #99c; padding: 10px"> 103 <p>Use the buttons on the left to test different effects on this div.</p> 104 </div> 105 </div> 106 107 </div> 108 </div> 109 110 <div class="zp-50"> 111 <div class="padding"> 112 <h2>Some postbacks</h2> 113 114 <h3>Javascript confirm</h3> 115 <p> 116 {% button text="Show Confirm" postback="show_confirm" %}<br/><br/> 117 </p> 118 119 <h3>Growl</h3> 120 <p> 121 {% button text="Show Temporary Growl" postback="show_growl" %}<br/><br/> 122 {% button text="Show Permanent Growl" postback="show_growl_stay" %}<br/><br/> 123 </p> 124 125 <hr/> 126 127 <h2>Form validation</h2> 128 129 {% wire id="myform" type="submit" postback="some_tag" action={toggle target="ef"} %} 130 <form id="myform" method="POST" action="postback"> 131 {# You could also use: delegate="module_handling_form" #} 132 133 <label for="email">e-mail</label> 134 <input type="text" id="email" name="email" value="" /> 135 {% validate id="email" type={presence} type={email} %} 136 137 <div class="clear"></div> 138 <button type="submit">Submit</button> 139 <div class="clear"></div> 140 141 </form> 142 143 <h2>Redirect to somewhere</h2> 144 145 {% button text="Redirect to /" action={redirect location="/"} %} 146 </div> 147 </div> 148 </div> 149 150 <hr/> 151 152 <div class="zp-wrapper"> 153 <div class="padding"> 154 <h2>Dynamic id with <tt>#id</tt></h2> 155 156 {{ #id }} 157 158 {% button id=#id %} 159 <div class="clear"></div> 160 161 <h2>Cached include</h2> 162 163 <p>Include below is cached for 10 seconds</p> 164 165 {% include "test_included.tpl" maxage=10 %} 166 167 <h2>Some images</h2> 168 169 <p> 170 {% image "koe.jpg" width=200 height=200 crop="east" mono blur style="border: 1px solid black" %} 171 {% image "koe.jpg" width=200 height=200 crop style="border: 1px solid black" %} 172 {% image "koe.jpg" width=200 height=200 crop="west" blur="20x8" style="border: 1px solid black" %} 173 </p> 174 175 <div class="clear"></div> 176 177 <p> 178 {% image "koe.jpg" width=200 height=200 crop="east" grey style="border: 1px solid black" %} 179 {% image "koe.jpg" width=200 height=200 crop style="border: 1px solid black" %} 180 {% image "koe.jpg" width=200 height=200 crop="west" grey blur="20x8" style="border: 1px solid black" %} 181 </p> 182 183 <div class="clear"></div> 184 185 <h3>And the url of an image</h3> 186 187 {% image_url "koe.jpg" width=400 crop="east" blur grey %} 188 189 <h2>Id test (cont)</h2> 190 191 And the id of above again: {{ #id }} 192 193 <h2>catinclude test</h2> 194 195 <p><strong>A person</strong></p> 196 {% catinclude "catinclude_test.tpl" 1 %} 197 198 <p><strong>Not a person</strong></p> 199 {% catinclude "catinclude_test.tpl" 2 %} 200 201 <h2>all catinclude test</h2> 202 203 {% all catinclude "catinclude_test.tpl" 1 %} 204 </div> 205 </div> 206 207 {% include "_js_include.tpl" %} 208 {% script %} 209 210 </body> 211</html>