/priv/sites/testsandbox/templates/test_helloworld.tpl

https://code.google.com/p/zotonic/ · 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. 

  2. <html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\">
    3. 

  3.     <head>
    4. 

  4.         <title>zotonic</title>
    5. 

  5. 

  6.         {% lib 
    7. 

  7.         "/css/zp-base.css"
    8. 

  8.         "/css/zp-type.css"
    9. 

  9.         "/css/zp-forms.css"
    10. 

  10.         "/css/zp-project.css"
    11. 

  11.         "/css/zp-growl.css" 
    12. 

  12.         "/css/zp-dialog.css" 
    13. 

  13.         %}
    14. 

  14. 

  15. 		<!--[if IE]><link href="/lib/css/zp-ie.css" type="text/css" media="screen" rel="stylesheet" /><![endif]--> 
    16. 

  16.     </head>
    17. 

  17. 

  18.     <body>
    19. 

  19. 		{% wire type="unload" action={alert text="Bye"} %}
    20. 

  20. 		<div class="zp-wrapper"> 
    21. 

  21. 	        <h1>Hello, new world {{ helloworld_counter }}</h1>
    22. 

  22. 		
    23. 

  23. 			<div class="zp-50 content"> 
    24. 

  24. 				<div class="padding"> 
    25. 

  25. 

  26. 					<h2>The menu should be below</h2>
    27. 

  27. 					
    28. 

  28. 					{% menu %}
    29. 

  29. 

  30. 					<h2>Postbacks which give some content</h2>
    31. 

  31. 					<p>
    32. 

  32. 						{% button text="Fill the content div" postback="fill_content"  %}
    33. 

  33. 						{% button text="Insert Top" postback="insert_top"  %}
    34. 

  34. 						{% button text="Insert Bottom" postback="insert_bottom" %}
    35. 

  35. 					</p>
    36. 

  36. 	
    37. 

  37. 					<div class="clear"></div>
    38. 

  38. 

  39. 					<div id="content" style="border: 1px solid green; padding: 10px; width: 100px">
    40. 

  40. 						This is the content div
    41. 

  41. 					</div>
    42. 

  42. 		
    43. 

  43. 					<h2>Some drag/drop testing</h2>
    44. 

  44. 

  45. 					{% draggable id="drag1" tag="drag1" %}
    46. 

  46. 					<div id="drag1" style="border: 2px solid #c33; background-color: #e99; padding: 10px; width: 100px; height: 50px">
    47. 

  47. 						<p>
    48. 

  48. 							Drag Me
    49. 

  49. 						</p>
    50. 

  50. 					</div>
    51. 

  51. 		
    52. 

  52. 					<div class="clear">&nbsp;</div>
    53. 

  53. 

  54. 					{% droppable id="drop1" tag="drop1" %}
    55. 

  55. 					<div id="drop1" style="border: 2px solid #3c3; background-color: #9e9; padding: 10px; width: 100px; height: 50px">
    56. 

  56. 						<p>
    57. 

  57. 							Drop Here
    58. 

  58. 						</p>
    59. 

  59. 					</div>
    60. 

  60. 

  61. 					<h2>Sorter and sortables</h2>
    62. 

  62. 

  63. 					<div id="sort" class="padding">
    64. 

  64. 						<div id="s1">
    65. 

  65. 							<p>sortable 1</p>
    66. 

  66. 						</div>
    67. 

  67. 						<div id="s2">
    68. 

  68. 							<p>sortable 2</p>
    69. 

  69. 						</div>
    70. 

  70. 						<div id="s3">
    71. 

  71. 							<p>sortable 3</p>
    72. 

  72. 						</div>
    73. 

  73. 						<div id="s4">
    74. 

  74. 							<p>sortable 4</p>
    75. 

  75. 						</div>
    76. 

  76. 						<div id="s5">
    77. 

  77. 							<p>sortable 5</p>
    78. 

  78. 						</div>
    79. 

  79. 					</div>
    80. 

  80. 

  81. 					{% sorter id="sort" %}
    82. 

  82. 					{% sortable id="s1" %}
    83. 

  83. 					{% sortable id="s2" %}
    84. 

  84. 					{% sortable id="s3" %}
    85. 

  85. 					{% sortable id="s4" %}
    86. 

  86. 					{% sortable id="s5" %}
    87. 

  87. 					
    88. 

  88. 					<h2>Some effects</h2>
    89. 

  89. 					
    90. 

  90. 					<div class="zp-20">
    91. 

  91. 						{% button text="Hide" action={hide target="ef"} %}
    92. 

  92. 						{% button text="Show" action={show target="ef"} %}<br/><br/>
    93. 

  93. 						{% button text="Fade" action={fade_out target="ef"} %}
    94. 

  94. 						{% button text="Appear" action={fade_in target="ef"} %}<br/><br/>
    95. 

  95. 						{% button text="Toggle" action={toggle target="ef"} %}<br/><br/>
    96. 

  96. 						
    97. 

  97. 						<a id="tgl" href="#">wired toggle</a>
    98. 

  98. 						{% wire id="tgl" action={toggle target="ef"} %}
    99. 

  99. 					</div>
    100. 

  100. 

  101. 					<div class="zp-40">
    102. 

  102. 						<div id="ef" style="border:1px solid black; background-color: #99c; padding: 10px">
    103. 

  103. 							<p>Use the buttons on the left to test different effects on this div.</p>
    104. 

  104. 						</div>
    105. 

  105. 					</div>
    106. 

  106. 

  107. 				</div>
    108. 

  108. 			</div>
    109. 

  109. 

  110. 			<div class="zp-50"> 
    111. 

  111. 				<div class="padding"> 
    112. 

  112. 					<h2>Some postbacks</h2>
    113. 

  113. 

  114. 					<h3>Javascript confirm</h3>
    115. 

  115. 					<p>
    116. 

  116. 						{% button text="Show Confirm" postback="show_confirm" %}<br/><br/>
    117. 

  117. 					</p>
    118. 

  118. 				
    119. 

  119. 					<h3>Growl</h3>
    120. 

  120. 					<p>
    121. 

  121. 						{% button text="Show Temporary Growl" postback="show_growl"  %}<br/><br/>
    122. 

  122. 						{% button text="Show Permanent Growl" postback="show_growl_stay" %}<br/><br/>
    123. 

  123. 					</p>
    124. 

  124. 					
    125. 

  125. 					<hr/>
    126. 

  126. 					
    127. 

  127. 					<h2>Form validation</h2>
    128. 

  128. 				
    129. 

  129. 					{% wire id="myform" type="submit" postback="some_tag" action={toggle target="ef"} %}
    130. 

  130. 					<form id="myform" method="POST" action="postback">
    131. 

  131. 					{# You could also use: delegate="module_handling_form" #}
    132. 

  132. 

  133. 						<label for="email">e-mail</label>
    134. 

  134. 						<input type="text" id="email" name="email" value="" />
    135. 

  135. 						{% validate id="email" type={presence} type={email} %}
    136. 

  136. 						
    137. 

  137. 						<div class="clear"></div>
    138. 

  138. 						<button type="submit">Submit</button>
    139. 

  139. 						<div class="clear"></div>
    140. 

  140. 

  141. 					</form>
    142. 

  142. 

  143. 					<h2>Redirect to somewhere</h2>
    144. 

  144. 					
    145. 

  145. 					{% button text="Redirect to /" action={redirect location="/"} %}
    146. 

  146. 				</div>
    147. 

  147. 			</div>
    148. 

  148. 		</div>
    149. 

  149. 		
    150. 

  150. 		<hr/>
    151. 

  151. 		
    152. 

  152. 		<div class="zp-wrapper">
    153. 

  153. 			<div class="padding">
    154. 

  154. 				<h2>Dynamic id with <tt>#id</tt></h2>
    155. 

  155. 

  156. 				{{ #id }}
    157. 

  157. 

  158. 				{% button id=#id %}
    159. 

  159. 				<div class="clear"></div>
    160. 

  160. 

  161. 				<h2>Cached include</h2>
    162. 

  162. 

  163. 				<p>Include below is cached for 10 seconds</p>
    164. 

  164. 				
    165. 

  165. 				{% include "test_included.tpl" maxage=10 %}
    166. 

  166. 

  167. 				<h2>Some images</h2>
    168. 

  168. 

  169. 				<p>
    170. 

  170. 				{% image "koe.jpg" width=200 height=200 crop="east" mono blur style="border: 1px solid black" %}
    171. 

  171. 				{% image "koe.jpg" width=200 height=200 crop style="border: 1px solid black" %}
    172. 

  172. 				{% image "koe.jpg" width=200 height=200 crop="west" blur="20x8" style="border: 1px solid black" %}
    173. 

  173. 				</p>
    174. 

  174. 

  175. 				<div class="clear"></div>
    176. 

  176. 

  177. 				<p>
    178. 

  178. 				{% image "koe.jpg" width=200 height=200 crop="east" grey style="border: 1px solid black" %}
    179. 

  179. 				{% image "koe.jpg" width=200 height=200 crop style="border: 1px solid black" %}
    180. 

  180. 				{% image "koe.jpg" width=200 height=200 crop="west" grey blur="20x8" style="border: 1px solid black" %}
    181. 

  181. 				</p>
    182. 

  182. 

  183. 				<div class="clear"></div>
    184. 

  184. 

  185. 				<h3>And the url of an image</h3>
    186. 

  186. 

  187. 				{% image_url "koe.jpg" width=400 crop="east" blur grey %}
    188. 

  188. 

  189. 				<h2>Id test (cont)</h2>
    190. 

  190. 

  191. 				And the id of above again: {{ #id }}
    192. 

  192. 				
    193. 

  193. 				<h2>catinclude test</h2>
    194. 

  194. 				
    195. 

  195. 				<p><strong>A person</strong></p>
    196. 

  196. 				{% catinclude "catinclude_test.tpl" 1 %}
    197. 

  197. 

  198. 				<p><strong>Not a person</strong></p>
    199. 

  199. 				{% catinclude "catinclude_test.tpl" 2 %}
    200. 

  200. 

  201. 				<h2>all catinclude test</h2>
    202. 

  202. 				
    203. 

  203. 				{% all catinclude "catinclude_test.tpl" 1 %}
    204. 

  204. 			</div>
    205. 

  205. 		</div>
    206. 

  206. 

  207. 		{% include "_js_include.tpl" %}
    208. 

  208. 		{% script %}
    209. 

  209. 

  210.     </body>
    211. 

  211. </html>
    212.