PageRenderTime 17ms CodeModel.GetById 8ms app.highlight 6ms RepoModel.GetById 1ms app.codeStats 0ms

/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<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">&nbsp;</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>