demos/tizen-winsets/widgets/naviframe/naviframe.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   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>
  11         </head>
  12 <body>
  13
  14         <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
  15                 <div data-role="header" data-position="fixed">
  16                         <h1>Naviframe</h1>
  17                 </div>
  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>
  35                                 </ul>
  36                         </div>
  37                 </div>
  38         </div>
  39
  40         <div data-role="page" id="normalstyle" data-add-back-btn="true">
  41                 <div data-role="header" data-position="fixed">
  42                         <h1>Normal Title</h1>
  43                 </div>
  44                 <div data-role="content">
  45                         <ul data-role="listview">
  46                                 <li><a href="#normal1btn">Title 1 button</a></li>
  47                                 <li><a href="#normal2btn">Title 2 button</a></li>
  48                                 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
  49                                 <li><a href="#normal3btn">Title 3 button</a></li>
  50                                 <li><a href="#iconTitle">Icon + Title</a></li>
  51                                 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
  52                                 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
  53                                 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
  54                                 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
  55                         </ul>
  56                 </div>
  57         </div>
  58
  59         <div data-role="page" id="normal1btn">
  60                 <div data-role="header" data-position="fixed">
  61                         <h1>Normal Title - 1Btn</h1>
  62                         <a>text1</a>
  63                 </div>
  64                 <div data-role="content">
  65                         <ul data-role="listview">
  66                                 <li><a href="#normal1btn">Title 1 button</a></li>
  67                                 <li><a href="#normal2btn">Title 2 button</a></li>
  68                                 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
  69                                 <li><a href="#normal3btn">Title 3 button</a></li>
  70                                 <li><a href="#iconTitle">Icon + Title</a></li>
  71                                 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
  72                                 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
  73                                 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
  74                                 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
  75                         </ul>
  76                 </div>
  77         </div>
  78
  79         <div data-role="page" id="normal2btn">
  80                 <div data-role="header" data-position="fixed">
  81                         <h1>Normal Title - 2Btn</h1>
  82                         <a>text1</a>
  83                         <a>text2</a>
  84                 </div>
  85                 <div data-role="content">
  86                         <ul data-role="listview">
  87                                 <li><a href="#normal1btn">Title 1 button</a></li>
  88                                 <li><a href="#normal2btn">Title 2 button</a></li>
  89                                 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
  90                                 <li><a href="#normal3btn">Title 3 button</a></li>
  91                                 <li><a href="#iconTitle">Icon + Title</a></li>
  92                                 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
  93                                 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
  94                                 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
  95                                 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
  96                         </ul>
  97                 </div>
  98         </div>
  99
 100         <div data-role="page" id="normal2btnicononly">
 101                 <div data-role="header" data-position="fixed">
 102                         <h1>Normal Title+2Buttons Icon only</h1>
 103                         <a data-icon="plus"></a>
 104                         <a data-icon="minus"></a>
 105                 </div>
 106                 <div data-role="content">
 107                         <ul data-role="listview">
 108                                 <li><a href="#normal1btn">Title 1 button</a></li>
 109                                 <li><a href="#normal2btn">Title 2 button</a></li>
 110                                 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
 111                                 <li><a href="#normal3btn">Title 3 button</a></li>
 112                                 <li><a href="#iconTitle">Icon + Title</a></li>
 113                                 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
 114                                 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
 115                                 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
 116                                 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
 117                         </ul>
 118                 </div>
 119         </div>
 120
 121
 122         <div data-role="page" id="normal3btn" data-add-back-btn="true">
 123                 <div data-role="header" data-position="fixed">
 124                         <h1>Normal Title - 3Btn</h1>
 125                         <a>text1</a>
 126                         <a>text2</a>
 127                         <a>text3</a>
 128                 </div>
 129                 <div data-role="content">
 130                         <ul data-role="listview">
 131                                 <li><a href="#normal1btn">Title 1 button</a></li>
 132                                 <li><a href="#normal2btn">Title 2 button</a></li>
 133                                 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
 134                                 <li><a href="#normal3btn">Title 3 button</a></li>
 135                                 <li><a href="#iconTitle">Icon + Title</a></li>
 136                                 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
 137                                 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
 138                                 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
 139                                 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
 140                         </ul>
 141                 </div>
 142         </div>
 143
 144         <div data-role="page" id="iconTitle">
 145                 <div data-role="header" data-position="fixed">
 146                         <img src="icon-tizen.png"/>
 147                         <h1>Icon Title</h1>
 148                         <a>text1</a>
 149                 </div>
 150                 <div data-role="content">
 151                         <ul data-role="listview">
 152                                 <li><a href="#normal1btn">Title 1 button</a></li>
 153                                 <li><a href="#normal2btn">Title 2 button</a></li>
 154                                 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
 155                                 <li><a href="#normal3btn">Title 3 button</a></li>
 156                                 <li><a href="#iconTitle">Icon + Title</a></li>
 157                                 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
 158                                 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
 159                                 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
 160                                 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
 161                         </ul>
 162                 </div>
 163         </div>
 164
 165         <div data-role="page" id="customTitle1">
 166                 <div data-role="header" data-position="fixed">
 167                         <h1>Title with Left button</h1>
 168                         <a class="ui-btn-left">Left1</a>
 169                         <a class="ui-btn-left">Left2</a>
 170                         <a class="ui-btn-left">Left3</a>
 171                 </div>
 172                 <div data-role="content">
 173                         <ul data-role="listview">
 174                                 <li><a href="#normal1btn">Title 1 button</a></li>
 175                                 <li><a href="#normal2btn">Title 2 button</a></li>
 176                                 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
 177                                 <li><a href="#normal3btn">Title 3 button</a></li>
 178                                 <li><a href="#iconTitle">Icon + Title</a></li>
 179                                 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
 180                                 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
 181                                 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
 182                                 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
 183                         </ul>
 184                 </div>
 185         </div>
 186
 187         <div data-role="page" id="customTitle2">
 188                 <div data-role="header" data-position="fixed">
 189                         <h1>Title with Right button</h1>
 190                         <a class="ui-btn-right">Right1</a>
 191                         <a class="ui-btn-right">Right2</a>
 192                         <a class="ui-btn-right">Right3</a>
 193                 </div>
 194                 <div data-role="content">
 195                         <ul data-role="listview">
 196                                 <li><a href="#normal1btn">Title 1 button</a></li>
 197                                 <li><a href="#normal2btn">Title 2 button</a></li>
 198                                 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
 199                                 <li><a href="#normal3btn">Title 3 button</a></li>
 200                                 <li><a href="#iconTitle">Icon + Title</a></li>
 201                                 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
 202                                 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
 203                                 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
 204                                 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
 205                         </ul>
 206                 </div>
 207         </div>
 208
 209         <div data-role="page" id="customTitle3">
 210                 <div data-role="header" data-position="fixed">
 211                         <a class="ui-btn-left">Left</a>
 212                         <h1>Title with Left/Right button</h1>
 213                         <a class="ui-btn-right">Right1</a>
 214                         <a class="ui-btn-right">Right2</a>
 215                 </div>
 216                 <div data-role="content">
 217                         <ul data-role="listview">
 218                                 <li><a href="#normal1btn">Title 1 button</a></li>
 219                                 <li><a href="#normal2btn">Title 2 button</a></li>
 220                                 <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
 221                                 <li><a href="#normal3btn">Title 3 button</a></li>
 222                                 <li><a href="#iconTitle">Icon + Title</a></li>
 223                                 <li><a href="#customTitle1">Custom Title with button position: left</a></li>
 224                                 <li><a href="#customTitle2">Custom Title with button position: right</a></li>
 225                                 <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
 226                                 <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
 227                         </ul>
 228                 </div>
 229         </div>
 230
 231
 232
 233
 234
 235         <div data-role="page" id="extendedstyle"  data-add-back-btn="true">
 236                 <div data-role="header" data-position="fixed">
 237                         <h1>Extended Title</h1>
 238                 </div>
 239                 <div data-role="content">
 240                         <div class="content-primary">
 241                                 <ul data-role="listview">
 242                                         <li><a href="#extendedstyle2btn">2 Button</a></li>
 243                                         <li><a href="#extendedstyle3btn">3 Button</a></li>
 244                                         <li><a href="#extendedstyle4btn">4 Button</a></li>
 245                                         <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
 246                                 </ul>
 247                         </div><!--/content-primary -->
 248                 </div>
 249         </div>
 250
 251         <div data-role="page" id="extendedstyle2btn">
 252                 <div data-role="header" data-position="fixed">
 253                         <h1>Extended Title 2 Button </h1>
 254                         <div data-role="fieldcontain">
 255                                 <fieldset data-role="controlgroup" data-type="horizontal">
 256                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
 257                                         <label for="segment1">All</label>
 258                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
 259                                         <label for="segment2">Call</label>
 260                                 </fieldset>
 261                         </div>
 262                 </div>
 263                 <div data-role="content">
 264                         <div class="content-primary">
 265                                 <ul data-role="listview">
 266                                         <li><a href="#extendedstyle2btn">2 Button</a></li>
 267                                         <li><a href="#extendedstyle3btn">3 Button</a></li>
 268                                 </ul>
 269                         </div><!--/content-primary -->
 270                 </div>
 271         </div>
 272
 273         <div data-role="page" id="extendedstyle3btn">
 274                 <div data-role="header" data-position="fixed">
 275                         <h1>Extended Title 3 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="segment71" value="on" checked="checked" />
 279                                         <label for="segment71">All</label>
 280                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
 281                                         <label for="segment72">Call</label>
 282                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
 283                                         <label for="segment73">Message</label>
 284                                 </fieldset>
 285                         </div>
 286                 </div>
 287                 <div data-role="content">
 288                         <div class="content-primary">
 289                                 <ul data-role="listview">
 290                                         <li><a href="#extendedstyle2btn">2 Button</a></li>
 291                                         <li><a href="#extendedstyle3btn">3 Button</a></li>
 292                                 </ul>
 293                         </div><!--/content-primary -->
 294                 </div>
 295         </div>
 296
 297         <div data-role="page" id="extendedstyle4btn">
 298                 <div data-role="header" data-position="fixed">
 299                         <h1>Extended Title 4 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>
 308                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
 309                                         <label for="segment74">Contact</label>
 310                                 </fieldset>
 311                         </div>
 312                 </div>
 313                 <div data-role="content">
 314                         <div class="content-primary">
 315                                 <ul data-role="listview">
 316                                         <li><a href="#extendedstyle2btn">2 Button</a></li>
 317                                         <li><a href="#extendedstyle3btn">3 Button</a></li>
 318                                 </ul>
 319                         </div><!--/content-primary -->
 320                 </div>
 321         </div>
 322
 323         <div data-role="page" id="footerExtendedStyle">
 324                 <div data-role="header" data-position="fixed">
 325                         <h1>Extended Footer style</h1>
 326                 </div>
 327                 <div data-role="content">
 328                         <p> test page </p>
 329                 </div>
 330                 <div data-role="footer" data-position="fixed">
 331                         <div data-role="fieldcontain">
 332                                 <fieldset data-role="controlgroup" data-type="horizontal">
 333                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
 334                                         <label for="segment1">All</label>
 335                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
 336                                         <label for="segment2">Call</label>
 337                                         <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
 338                                         <label for="segment3">Contact</label>
 339                                 </fieldset>
 340                         </div>
 341                         <a>Edit</a>
 342                 </div>
 343         </div>
 344
 345
 346 </body>
 347 </html>