demos/tizen-winsets/widgets/list/list-normal_no_anchor.html

   1 <div data-role="page" id="genlist-normal" data-add-back-btn="true" data-fit-page-to-window="true">
   2         <div data-role="header" data-position="fixed">
   3                 <h1>Normal lists</h1>
   4         </div>
   5         <div class="content" data-role="content" data-scroll="y">
   6                 <ul data-role="listview">
   7
   8                         <li>
   9                                 1line
  10                         </li>
  11
  12                         <li>
  13                                 1line-sub
  14                                 <span class="ui-li-text-sub">subtext</span>
  15                         </li>
  16
  17                         <li>
  18                                 1line-btn1
  19                                 <div data-role="button" data-inline="true">Text Button</div>
  20                         </li>
  21
  22                         <li>
  23                                 1line-btn2
  24                                 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  25                         </li>
  26
  27                         <li>
  28                                 1line-toggle
  29                                 <div data-role="toggleswitch"/></div>
  30                         </li>
  31
  32                         <li>
  33                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  34                                 1line-bigicon1
  35                         </li>
  36
  37                         <li>
  38                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  39                                 1line-bigicon2
  40                                 <span class="ui-li-text-sub">Sub text</span>
  41                         </li>
  42
  43                         <li>
  44                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  45                                 1line-bigicon4
  46                                 <div data-role="button" data-inline="true">Text Button</div>
  47                         </li>
  48
  49                         <li>
  50                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  51                                 1line-bigicon5
  52                                 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  53                         </li>
  54
  55                         <li>
  56                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  57                                 1line-bigicon6
  58                                 <div data-role="toggleswitch"/></div>
  59                         </li>
  60
  61                         <li class="ui-li-has-checkbox">
  62                                 <input type="checkbox" name="c1line-check1" />
  63                                 1line-check1
  64                         </li>
  65
  66                         <li class="ui-li-has-checkbox">
  67                                 <form><input type="checkbox" name="c1line-check2" /></form>
  68                                 1line-check2
  69                                 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  70                         </li>
  71
  72                         <li class="ui-li-has-checkbox">
  73                                 <form><input type="checkbox"  name="c1line-check3" /></form>
  74                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  75                                 1line-check3
  76                         </li>
  77
  78                         <li class="ui-li-has-checkbox">
  79                                 <form><input type="checkbox"  name="c1line-check4" /></form>
  80                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  81                                 1line-check4
  82                                 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  83                         </li>
  84
  85                         <li class="ui-li-has-radio">
  86                                 <form><input type="radio" /></form>
  87                                 1line-radio1
  88                         </li>
  89
  90                         <li class="ui-li-has-radio">
  91                                 <form><input type="radio" /></form>
  92                                 1line-radio3
  93                                 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  94                         </li>
  95
  96                         <li class="ui-li-has-radio">
  97                                 <form><input type="radio" /></form>
  98                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  99                                 1line-radio4
 100                         </li>
 101
 102                         <li class="ui-li-has-radio">
 103                                 <form><input type="radio" /></form>
 104                                 1line-radio5
 105                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 106                                 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 107                         </li>
 108
 109                         <li class="ui-li-has-radio">
 110                                 <form><input type="radio" /></form>
 111                                 1line-radio
 112                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 113                         </li>
 114
 115                         <li class="ui-li-has-multiline">
 116                                 2line
 117                                 <span class="ui-li-text-sub">Subtext</span>
 118                         </li>
 119
 120                         <li class="ui-li-has-multiline">
 121                                 2line-2sub
 122                                 <span class="ui-li-text-sub">Subtext</span>
 123                                 <span class="ui-li-text-sub2">Subtext2</span>
 124                         </li>
 125
 126                         <li class="ui-li-has-multiline">
 127                                 2line-btn1
 128                                 <span class="ui-li-text-sub">Subtext</span>
 129                                 <div data-role="button" data-inline="true">button</div>
 130                         </li>
 131
 132                         <li class="ui-li-has-multiline">
 133                                 2line-btn1
 134                                 <span class="ui-li-text-sub">Subtext</span>
 135                                 <div data-role="button" data-inline="true" data-icon="call"></div>
 136                         </li>
 137
 138                         <li class="ui-li-has-multiline">
 139                                 2line-btn2
 140                                 <span class="ui-li-text-sub">Subtext</span>
 141                                 <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 142                         </li>
 143
 144                         <li class="ui-li-has-multiline">
 145                                 2line-star1
 146                                 <span class="ui-li-text-sub">Subtext</span>
 147                                 <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
 148                                 <span class="ui-li-text-sub2">Subtext2</span>
 149                         </li>
 150
 151                         <li class="ui-li-has-multiline">
 152                                 2line-star2
 153                                 <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
 154                                 <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
 155                         </li>
 156
 157                         <li class="ui-li-has-multiline">
 158                                 2line-setting
 159                                 <span class="ui-li-text-sub">Subtext</span>
 160                         </li>
 161
 162                         <li class="ui-li-has-multiline">
 163                                 2line-toggle-setting
 164                                 <span class="ui-li-text-sub">Subtext</span>
 165                                 <div data-role="toggleswitch"/></div>
 166                         </li>
 167
 168                         <li class="ui-li-has-multiline">
 169                                 2line-btn-setting
 170                                 <span class="ui-li-text-sub">Subtext</span>
 171                                 <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 172                         </li>
 173
 174                         <li class="ui-li-has-multiline">
 175                                 2line-bigicon0
 176                                 <span class="ui-li-text-sub">Subtext<img src="00_winset_icon_favorite_on.png"></span>
 177                                 <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 178                         </li>
 179
 180                         <li class="ui-li-has-multiline">
 181                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 182                                 2line-bigicon1
 183                                 <span class="ui-li-text-sub">Subtext</span>
 184                         </li>
 185
 186                         <li class="ui-li-has-multiline">
 187                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 188                                 2line-bigicon2
 189                                 <span class="ui-li-text-sub">Subtext</span>
 190                                 <span class="ui-li-text-sub2">Subtext2</span>
 191                         </li>
 192
 193                         <li class="ui-li-has-multiline">
 194                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 195                                 2line-bigicon3
 196                                 <span class="ui-li-text-sub">Subtext</span>
 197                         </li>
 198
 199                         <li class="ui-li-has-multiline">
 200                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 201                                 2line-bigicon4
 202                                 <span class="ui-li-text-sub">Subtext</span>
 203                                 <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 204                         </li>
 205
 206                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 207                                 <form><input type="checkbox"  name="c2line-check1" /></form>
 208                                 2line-check
 209                                 <span class="ui-li-text-sub">Subtext</span>
 210                         </li>
 211
 212                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 213                                 <form><input type="checkbox"  name="c2line-check2" /></form>
 214                                 2line-check2
 215                                 <span class="ui-li-text-sub">Subtext</span>
 216                                 <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 217                         </li>
 218
 219                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 220                                 <form><input type="checkbox"  name="c2line-check3" /></form>
 221                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 222                                 2line-check3
 223                                 <span class="ui-li-text-sub">Subtext</span>
 224                         </li>
 225
 226                         <li class="ui-li-has-radio ui-li-has-multiline">
 227                                 <form><input type="radio" /></form>
 228                                 2line-radio1
 229                                 <span class="ui-li-text-sub">Subtext</span>
 230                         </li>
 231
 232                         <li class="ui-li-has-radio ui-li-has-multiline">
 233                                 <form><input type="radio" /></form>
 234                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 235                                 2line-radio2
 236                                 <span class="ui-li-text-sub">Subtext</span>
 237                         </li>
 238
 239                         <li class="ui-li-has-multiline">
 240                                 <span class="ui-li-color-bar"></span>
 241                                 2line-colorbar1
 242                                 <span class="ui-li-text-sub">Subtext
 243                                         <img src="00_winset_icon_favorite_on.png">
 244                                         <img src="00_winset_icon_favorite_on.png">
 245                                         <img src="00_winset_icon_favorite_on.png">
 246                                 </span>
 247                                 <div data-role="button" data-inline="true">button</div>
 248                         </li>
 249
 250                         <li class="ui-li-has-multiline">
 251                                 <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
 252                                 2line-colorbar2
 253                                 <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 254                                 <span class="ui-li-text-sub">Subtext</span>
 255                                 <div data-role="button" data-inline="true">button</div>
 256                         </li>
 257
 258                         <li class="ui-li-has-multiline">
 259                                 <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
 260                                 2line-colorbar2
 261                                 <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 262                                 <span class="ui-li-text-sub">Subtext</span>
 263                                 <div data-role="button" data-inline="true" data-icon="call"></div>
 264                         </li>
 265
 266                         <li class="ui-li-has-multiline">
 267                                 <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
 268                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 269                                 2line-colorbar3
 270                                 <span class="ui-li-text-sub">Subtext</span>
 271                                 <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 272                         </li>
 273
 274                         <li class="ui-li-has-multiline">
 275                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 276                                 2line-bigicon8
 277                                 <span class="ui-li-text-sub">Subtext</span>
 278                                 <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
 279                         </li>
 280
 281                         <li class="ui-li-has-multiline ui-li-thumbnail-right">
 282                                 2line-thumb1
 283                                 <span class="ui-li-text-sub">Subtext</span>
 284                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 285                         </li>
 286
 287                         <li class="ui-li-has-multiline ui-li-thumbnail-right">
 288                                 2line-thumb2
 289                                 <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 290                                 <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
 291                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 292                         </li>
 293
 294                         <li class="ui-li-has-multiline ui-li-thumbnail-right">
 295                                 <span class="ui-li-text-sub">Subtext</span>
 296                                 2line-sub-main-bigicon1
 297                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 298                         </li>
 299
 300                         <li class="ui-li-has-multiline">
 301                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 302                                 2line-bigicon-pgbar1
 303                                 <span class="ui-li-text-sub">Subtext</span>
 304                                 <span class="ui-li-text-sub2">Subtext2</span>
 305                                 <div data-role="progressbar" id="progressbar"></div>
 306                         </li>
 307
 308                         <li class="ui-li-has-multiline">
 309                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 310                                 2line-bigicon-pgbar2
 311                                 <span class="ui-li-text-sub">Subtext</span>
 312                                 <div data-role="button" data-inline="true">button</div>
 313                         </li>
 314
 315                         <li class="ui-li-has-multiline">
 316                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 317                                 2line-bigicon-pgbar2
 318                                 <span class="ui-li-text-sub">Subtext</span>
 319                                 <div data-role="button" data-inline="true" data-icon="call"></div>
 320                         </li>
 321
 322                         <li class="ui-li-has-multiline">
 323                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 324                                 2line-bigicon-pgbar3
 325                                 <span class="ui-li-text-sub">Subtext</span>
 326                                 <span class="ui-li-text-sub2">Subtext2</span>
 327                                 <div data-role="progressing" data-style="pending" id="pending"></div>
 328                         </li>
 329
 330                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 331                                 <form><input type="checkbox"  name="c2line-icon-bigicon-btn" /></form>
 332                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 333                                 2line-icon-bigicon-btn
 334                                 <span class="ui-li-text-sub">Subtext</span>
 335                                 <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 336                         </li>
 337
 338                         <li class="ui-li-has-multiline">
 339                                 2line-thumb3
 340                                 <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 341                                 <span class="ui-li-text-sub">Subtext</span>
 342                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
 343                         </li>
 344                 </ul>
 345         </div>
 346 </div>