demos/tizen-winsets/widgets/navigationbar.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         <meta name="viewport" content="width=720, initial-scale=1">
   7         <title>jQM Test Example</title>
   8
   9         <script src="../../../src/jqm/js/jquery.js"></script>
  10         <script src="../../../src/jqm/js/"></script>
  11         <script src="../../../src/jqm/theme.js"></script>
  12         <link rel="stylesheet"  href="../../../build/tizen-web-ui-fw/0.1/themes/nbeat-black/tizen-web-ui-fw-theme.css" />
  13         </head>
  14 <body>
  15
  16 <div data-role="page" data-add-back-btn="true">
  17         <div data-role="header" data-position="fixed">
  18                 <h1>ControlBar</h1>
  19         </div>
  20
  21         <div data-role="content">
  22                 <div class="content-primary">
  23                         <ul data-role="listview">
  24                                 <li><a href="#normalstyle">Normal</a></li>
  25                                 <li><a href="#expendedstyle">Expended</a></li>
  26
  27                         </ul>
  28                 </div><!--/content-primary -->
  29         </div>
  30 </div>
  31
  32 <div data-role="page" id="normalstyle" data-add-back-btn="true">
  33         <div data-role="header" data-position="fixed">
  34                 <h1>Title Area</h1>
  35         </div>
  36
  37         <div data-role="content">
  38                 <div class="content-primary">
  39                         <ul data-role="listview">
  40                                 <li><a href="#normal1btn">Title 1 button</a></li>
  41                                 <li><a href="#normal2btn">Title 2 button</a></li>
  42                                 <li><a href="#normal3btn">Title 3 button</a></li>
  43                                 <li><a href="#">Test</a></li>
  44                                 <li><a href="#">Test</a></li>
  45                                 <li><a href="#">Test</a></li>
  46                                 <li><a href="#">Test</a></li>
  47                         </ul>
  48                 </div><!--/content-primary -->
  49         </div>
  50 </div>
  51
  52 <div data-role="page" id="normal1btn">
  53         <div data-role="header" data-position="fixed">
  54                 <a>Text1</a>
  55                 <h1>Title Area</h1>
  56         </div>
  57
  58         <div data-role="content">
  59                 <div class="content-primary">
  60                         <ul data-role="listview">
  61                                 <li><a href="#normal1btn">Title 1 button</a></li>
  62                                 <li><a href="#normal2btn">Title 2 button</a></li>
  63                                 <li><a href="#normal3btn">Title 3 button</a></li>
  64                                 <li><a href="#">Test</a></li>
  65                                 <li><a href="#">Test</a></li>
  66                                 <li><a href="#">Test</a></li>
  67                                 <li><a href="#">Test</a></li>
  68                                 <div data-role="button" data-inline="true">Text Button TesT</div>
  69                         </ul>
  70                 </div><!--/content-primary -->
  71         </div>
  72 </div>
  73
  74 <div data-role="page" id="normal2btn">
  75         <div data-role="header" data-position="fixed">
  76                 <a>Text1</a>
  77                 <h1>Title Area</h1>
  78                 <a>Text2</a>
  79         </div>
  80
  81         <div data-role="content">
  82                 <div class="content-primary">
  83                         <ul data-role="listview">
  84                                 <li><a href="#normal1btn">Title 1 button</a></li>
  85                                 <li><a href="#normal2btn">Title 2 button</a></li>
  86                                 <li><a href="#normal3btn">Title 3 button</a></li>
  87                                 <li><a href="#">Test</a></li>
  88                                 <li><a href="#">Test</a></li>
  89                                 <li><a href="#">Test</a></li>
  90                                 <li><a href="#">Test</a></li>
  91                                 <div data-role="button" data-inline="true">Text Button TesT</div>
  92                         </ul>
  93                 </div><!--/content-primary -->
  94         </div>
  95 </div>
  96
  97 <div data-role="page" id="normal3btn" data-add-back-btn="true">
  98         <div data-role="header" data-position="fixed">
  99                 <a>Text1</a>
 100                 <h1>Title Area</h1>
 101                 <a>Text2</a>
 102                 <a>Text3</a>
 103         </div>
 104
 105         <div data-role="content">
 106                 <div class="content-primary">
 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="#normal3btn">Title 3 button</a></li>
 111                                 <li><a href="#">Test</a></li>
 112                                 <li><a href="#">Test</a></li>
 113                                 <li><a href="#">Test</a></li>
 114                                 <li><a href="#">Test</a></li>
 115                                 <div data-role="button" data-inline="true">Text Button TesT</div>
 116                         </ul>
 117                 </div><!--/content-primary -->
 118         </div>
 119 </div>
 120
 121 <div data-role="page" id="expendedstyle"  data-add-back-btn="true">
 122         <div data-role="header" data-position="fixed">
 123                 <h1>Title Extend</h1>
 124         </div>
 125
 126         <div data-role="content">
 127                 <div class="content-primary">
 128                         <ul data-role="listview">
 129                                 <li><a href="#expendedstyle2btn">2 Button</a></li>
 130                                 <li><a href="#expendedstyle3btn">3 Button</a></li>
 131                                 <li><a href="#">Test</a></li>
 132                                 <li><a href="#">Test</a></li>
 133                                 <li><a href="#">Test</a></li>
 134                                 <li><a href="#">Test</a></li>
 135                                 <li><a href="#">Test</a></li>
 136                                 <div data-role="button" data-inline="true">Text Button TesT</div>
 137                         </ul>
 138                 </div><!--/content-primary -->
 139         </div>
 140 </div>
 141
 142 <div data-role="page" id="expendedstyle2btn">
 143         <div data-role="header" data-position="fixed">
 144                 <a>Text</a>
 145                 <h1>Title Extend 2 Button </h1>
 146                 <a>Text</a>
 147                 <div data-role="fieldcontain">
 148                         <fieldset data-role="controlgroup" data-type="horizontal">
 149                                 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
 150                                 <label for="segment1">All</label>
 151                                 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
 152                                 <label for="segment2">Call</label>
 153                         </fieldset>
 154                 </div>
 155 <!-- <div data-role="button" data-inline="true">Text</div>-->
 156         </div>
 157
 158         <div data-role="content">
 159                 <div class="content-primary">
 160                         <ul data-role="listview">
 161                                 <li><a href="#expendedstyle2btn">2 Button</a></li>
 162                                 <li><a href="#expendedstyle3btn">3 Button</a></li>
 163                                 <li><a href="#">Test</a></li>
 164                                 <li><a href="#">Test</a></li>
 165                                 <li><a href="#">Test</a></li>
 166                                 <li><a href="#">Test</a></li>
 167                                 <li><a href="#">Test</a></li>
 168                                 <div data-role="button" data-inline="true">Text Button TesT</div>
 169                         </ul>
 170                 </div><!--/content-primary -->
 171         </div>
 172 </div>
 173
 174 <div data-role="page" id="expendedstyle3btn">
 175         <div data-role="header" data-position="fixed">
 176                 <a>Text</a>
 177                 <h1>Title Extend 3 Button </h1>
 178                 <a>Text</a>
 179                 <div data-role="fieldcontain">
 180                         <fieldset data-role="controlgroup" data-type="horizontal">
 181                                 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
 182                                 <label for="segment71">All</label>
 183                                 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
 184                                 <label for="segment72">Call</label>
 185                                 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
 186                                 <label for="segment73">Message</label>
 187                         </fieldset>
 188                 </div>
 189 <!-- <div data-role="button" data-inline="true">Text</div>-->
 190         </div>
 191
 192         <div data-role="content">
 193                 <div class="content-primary">
 194                         <ul data-role="listview">
 195                                 <li><a href="#expendedstyle2btn">2 Button</a></li>
 196                                 <li><a href="#expendedstyle3btn">3 Button</a></li>
 197                                 <li><a href="#">Test</a></li>
 198                                 <li><a href="#">Test</a></li>
 199                                 <li><a href="#">Test</a></li>
 200                                 <li><a href="#">Test</a></li>
 201                                 <li><a href="#">Test</a></li>
 202                                 <div data-role="button" data-inline="true">Text Button TesT</div>
 203                         </ul>
 204                 </div><!--/content-primary -->
 205         </div>
 206 </div>