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