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 data-role="footer">
  39                 </div>
  40         </div>
  41
  42         <div data-role="page" id="normalstyle" data-add-back-btn="true">
  43                 <div data-role="header" data-position="fixed">
  44                         <h1>Normal Title</h1>
  45                 </div>
  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>
  57                         </ul>
  58                 </div>
  59                 <div data-role="footer">
  60                 </div>
  61         </div>
  62
  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>
  66                         <a>text1</a>
  67                 </div>
  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>
  79                         </ul>
  80                 </div>
  81                 <div data-role="footer">
  82                 </div>
  83         </div>
  84
  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>
  88                         <a>text1</a>
  89                         <a>text2</a>
  90                 </div>
  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>
 102                         </ul>
 103                 </div>
 104                 <div data-role="footer">
 105                 </div>
 106         </div>
 107
 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>
 113                 </div>
 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>
 125                         </ul>
 126                 </div>
 127                 <div data-role="footer">
 128                 </div>
 129         </div>
 130
 131
 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>
 135                         <a>text1</a>
 136                         <a>text2</a>
 137                         <a>text3</a>
 138                 </div>
 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>
 150                         </ul>
 151                 </div>
 152                 <div data-role="footer">
 153                 </div>
 154         </div>
 155
 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"/>
 159                         <h1>Icon Title</h1>
 160                         <a>text1</a>
 161                 </div>
 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>
 173                         </ul>
 174                 </div>
 175                 <div data-role="footer">
 176                 </div>
 177         </div>
 178
 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>
 185                 </div>
 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>
 197                         </ul>
 198                 </div>
 199                 <div data-role="footer">
 200                 </div>
 201         </div>
 202
 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>
 209                 </div>
 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>
 221                         </ul>
 222                 </div>
 223                 <div data-role="footer">
 224                 </div>
 225         </div>
 226
 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>
 233                 </div>
 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>
 245                         </ul>
 246                 </div>
 247                 <div data-role="footer">
 248                 </div>
 249         </div>
 250
 251
 252
 253
 254
 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>
 258                 </div>
 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>
 266                                 </ul>
 267                         </div><!--/content-primary -->
 268                 </div>
 269                 <div data-role="footer">
 270                 </div>
 271         </div>
 272
 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>
 282                                 </fieldset>
 283                         </div>
 284                 </div>
 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>
 290                                 </ul>
 291                         </div><!--/content-primary -->
 292                 </div>
 293                 <div data-role="footer">
 294                 </div>
 295         </div>
 296
 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>
 308                                 </fieldset>
 309                         </div>
 310                 </div>
 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>
 316                                 </ul>
 317                         </div><!--/content-primary -->
 318                 </div>
 319                 <div data-role="footer">
 320                 </div>
 321         </div>
 322
 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>
 336                                 </fieldset>
 337                         </div>
 338                 </div>
 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>
 344                                 </ul>
 345                         </div><!--/content-primary -->
 346                 </div>
 347                 <div data-role="footer">
 348                 </div>
 349         </div>
 350
 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>
 354                 </div>
 355                 <div data-role="content">
 356                         <p> test page </p>
 357                 </div>
 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>
 367                                 </fieldset>
 368                         </div>
 369                         <a>Edit</a>
 370                 </div>
 371         </div>
 372
 373
 374 </body>
 375 </html>