5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link rel="stylesheet" href="themes/default/" />
7 <script src="js/jquery.js"></script>
8 <script src="js/"></script>
9 <script src="theme.js"></script>
10 <script src="js/jquery.mobile.forms.button.extension.js"></script>
14 <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
15 <div data-role="header" data-position="fixed">
18 <div data-role="content">
19 <div class="content-primary">
20 <ul data-role="listview">
21 <li data-role="list-divider">Simple Naviframe Header Style</li>
22 <li><a href="naviframe_title_text.html">Title text</a></li>
23 <li><a href="naviframe_title_text_2_btn.html">Title text Button 2</a></li>
24 <li><a href="naviframe_title_text_1_btn.html">Title text Button 1</a></li>
25 <li><a href="naviframe_title_text_src.html">Image Title text</a></li>
26 <li><a href="naviframe_title_text_multiline.html">Title text Multiline</a></li>
27 <li><a href="naviframe_title_text_multiline_src.html">Image Title text Multiline</a></li>
28 <li><a href="naviframe_title_text_multiline_src_2_btn.html">Image Title text Multiline Button 02</a></li>
29 <li data-role="list-divider">Simple Naviframe Footer Style</li>
30 <li><a href="naviframe_footer_more.html">Footer more</a></li>
31 <li><a href="naviframe_footer_more_button.html">Footer with button</a></li>
32 <li data-role="list-divider">Old version</li>
33 <li><a href="#normalstyle">Normal style title</a></li>
34 <li><a href="#extendedstyle">Extended style title</a></li>
38 <div data-role="footer">
42 <div data-role="page" id="normalstyle" data-add-back-btn="true">
43 <div data-role="header" data-position="fixed">
46 <div data-role="content">
47 <ul data-role="listview">
48 <li><a href="#normal1btn">Title 1 button</a></li>
49 <li><a href="#normal2btn">Title 2 button</a></li>
50 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
51 <li><a href="#normal3btn">Title 3 button</a></li>
52 <li><a href="#iconTitle">Icon + Title</a></li>
53 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
54 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
55 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
56 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
59 <div data-role="footer">
63 <div data-role="page" id="normal1btn" data-add-back-btn="true">
64 <div data-role="header" data-position="fixed">
65 <h1>Normal Title - 1Btn</h1>
68 <div data-role="content">
69 <ul data-role="listview">
70 <li><a href="#normal1btn">Title 1 button</a></li>
71 <li><a href="#normal2btn">Title 2 button</a></li>
72 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
73 <li><a href="#normal3btn">Title 3 button</a></li>
74 <li><a href="#iconTitle">Icon + Title</a></li>
75 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
76 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
77 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
78 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
81 <div data-role="footer">
85 <div data-role="page" id="normal2btn" data-add-back-btn="true">
86 <div data-role="header" data-position="fixed">
87 <h1>Normal Title - 2Btn</h1>
91 <div data-role="content">
92 <ul data-role="listview">
93 <li><a href="#normal1btn">Title 1 button</a></li>
94 <li><a href="#normal2btn">Title 2 button</a></li>
95 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
96 <li><a href="#normal3btn">Title 3 button</a></li>
97 <li><a href="#iconTitle">Icon + Title</a></li>
98 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
99 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
100 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
101 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
104 <div data-role="footer">
108 <div data-role="page" id="normal2btnicononly" data-add-back-btn="true">
109 <div data-role="header" data-position="fixed">
110 <h1>Normal Title+2Buttons Icon only</h1>
111 <a data-icon="plus"></a>
112 <a data-icon="minus"></a>
114 <div data-role="content">
115 <ul data-role="listview">
116 <li><a href="#normal1btn">Title 1 button</a></li>
117 <li><a href="#normal2btn">Title 2 button</a></li>
118 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
119 <li><a href="#normal3btn">Title 3 button</a></li>
120 <li><a href="#iconTitle">Icon + Title</a></li>
121 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
122 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
123 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
124 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
127 <div data-role="footer">
132 <div data-role="page" id="normal3btn" data-add-back-btn="true">
133 <div data-role="header" data-position="fixed">
134 <h1>Normal Title - 3Btn</h1>
139 <div data-role="content">
140 <ul data-role="listview">
141 <li><a href="#normal1btn">Title 1 button</a></li>
142 <li><a href="#normal2btn">Title 2 button</a></li>
143 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
144 <li><a href="#normal3btn">Title 3 button</a></li>
145 <li><a href="#iconTitle">Icon + Title</a></li>
146 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
147 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
148 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
149 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
152 <div data-role="footer">
156 <div data-role="page" id="iconTitle" data-add-back-btn="true">
157 <div data-role="header" data-position="fixed">
158 <img src="icon-tizen.png"/>
162 <div data-role="content">
163 <ul data-role="listview">
164 <li><a href="#normal1btn">Title 1 button</a></li>
165 <li><a href="#normal2btn">Title 2 button</a></li>
166 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
167 <li><a href="#normal3btn">Title 3 button</a></li>
168 <li><a href="#iconTitle">Icon + Title</a></li>
169 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
170 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
171 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
172 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
175 <div data-role="footer">
179 <div data-role="page" id="customTitle1" data-add-back-btn="true">
180 <div data-role="header" data-position="fixed">
181 <h1>Title with Left button</h1>
182 <a class="ui-btn-left">Left1</a>
183 <a class="ui-btn-left">Left2</a>
184 <a class="ui-btn-left">Left3</a>
186 <div data-role="content">
187 <ul data-role="listview">
188 <li><a href="#normal1btn">Title 1 button</a></li>
189 <li><a href="#normal2btn">Title 2 button</a></li>
190 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
191 <li><a href="#normal3btn">Title 3 button</a></li>
192 <li><a href="#iconTitle">Icon + Title</a></li>
193 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
194 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
195 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
196 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
199 <div data-role="footer">
203 <div data-role="page" id="customTitle2" data-add-back-btn="true">
204 <div data-role="header" data-position="fixed">
205 <h1>Title with Right button</h1>
206 <a class="ui-btn-right">Right1</a>
207 <a class="ui-btn-right">Right2</a>
208 <a class="ui-btn-right">Right3</a>
210 <div data-role="content">
211 <ul data-role="listview">
212 <li><a href="#normal1btn">Title 1 button</a></li>
213 <li><a href="#normal2btn">Title 2 button</a></li>
214 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
215 <li><a href="#normal3btn">Title 3 button</a></li>
216 <li><a href="#iconTitle">Icon + Title</a></li>
217 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
218 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
219 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
220 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
223 <div data-role="footer">
227 <div data-role="page" id="customTitle3" data-add-back-btn="true">
228 <div data-role="header" data-position="fixed">
229 <a class="ui-btn-left">Left</a>
230 <h1>Title with Left/Right button</h1>
231 <a class="ui-btn-right">Right1</a>
232 <a class="ui-btn-right">Right2</a>
234 <div data-role="content">
235 <ul data-role="listview">
236 <li><a href="#normal1btn">Title 1 button</a></li>
237 <li><a href="#normal2btn">Title 2 button</a></li>
238 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
239 <li><a href="#normal3btn">Title 3 button</a></li>
240 <li><a href="#iconTitle">Icon + Title</a></li>
241 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
242 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
243 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
244 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
247 <div data-role="footer">
255 <div data-role="page" id="extendedstyle" data-add-back-btn="true">
256 <div data-role="header" data-position="fixed">
257 <h1>Extended Title</h1>
259 <div data-role="content">
260 <div class="content-primary">
261 <ul data-role="listview">
262 <li><a href="#extendedstyle2btn">2 Button</a></li>
263 <li><a href="#extendedstyle3btn">3 Button</a></li>
264 <li><a href="#extendedstyle4btn">4 Button</a></li>
265 <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
267 </div><!--/content-primary -->
269 <div data-role="footer">
273 <div data-role="page" id="extendedstyle2btn" data-add-back-btn="true">
274 <div data-role="header" data-position="fixed">
275 <h1>Extended Title 2 Button </h1>
276 <div data-role="fieldcontain">
277 <fieldset data-role="controlgroup" data-type="horizontal">
278 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
279 <label for="segment1">All</label>
280 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
281 <label for="segment2">Call</label>
285 <div data-role="content">
286 <div class="content-primary">
287 <ul data-role="listview">
288 <li><a href="#extendedstyle2btn">2 Button</a></li>
289 <li><a href="#extendedstyle3btn">3 Button</a></li>
291 </div><!--/content-primary -->
293 <div data-role="footer">
297 <div data-role="page" id="extendedstyle3btn" data-add-back-btn="true">
298 <div data-role="header" data-position="fixed">
299 <h1>Extended Title 3 Button </h1>
300 <div data-role="fieldcontain">
301 <fieldset data-role="controlgroup" data-type="horizontal">
302 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
303 <label for="segment71">All</label>
304 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
305 <label for="segment72">Call</label>
306 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
307 <label for="segment73">Message</label>
311 <div data-role="content">
312 <div class="content-primary">
313 <ul data-role="listview">
314 <li><a href="#extendedstyle2btn">2 Button</a></li>
315 <li><a href="#extendedstyle3btn">3 Button</a></li>
317 </div><!--/content-primary -->
319 <div data-role="footer">
323 <div data-role="page" id="extendedstyle4btn" data-add-back-btn="true">
324 <div data-role="header" data-position="fixed">
325 <h1>Extended Title 4 Button </h1>
326 <div data-role="fieldcontain">
327 <fieldset data-role="controlgroup" data-type="horizontal">
328 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
329 <label for="segment71">All</label>
330 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
331 <label for="segment72">Call</label>
332 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
333 <label for="segment73">Message</label>
334 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
335 <label for="segment74">Contact</label>
339 <div data-role="content">
340 <div class="content-primary">
341 <ul data-role="listview">
342 <li><a href="#extendedstyle2btn">2 Button</a></li>
343 <li><a href="#extendedstyle3btn">3 Button</a></li>
345 </div><!--/content-primary -->
347 <div data-role="footer">
351 <div data-role="page" id="footerExtendedStyle" data-add-back-btn="true">
352 <div data-role="header" data-position="fixed">
353 <h1>Extended Footer style</h1>
355 <div data-role="content">
358 <div data-role="footer" data-position="fixed">
359 <div data-role="fieldcontain">
360 <fieldset data-role="controlgroup" data-type="horizontal">
361 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
362 <label for="segment1">All</label>
363 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
364 <label for="segment2">Call</label>
365 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
366 <label for="segment3">Contact</label>