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

   1 <div data-role="page" id="genlist-normal" data-add-back-btn="true">
   2         <div data-role="header" data-position="fixed">
   3                 <h1>Normal anchor lists</h1>
   4         </div>
   5         <div class="content" data-role="content" data-scroll="y">
   6                 <ul data-role="listview">
   7
   8                         <li>
   9                                 <a href="#">
  10                                         <h3>1line</h3>
  11                                 </a>
  12                         </li>
  13
  14                         <li>
  15                                 <a href="#">
  16                                         <h3>1line-setting</h3>
  17                                         <span class="ui-li-text-sub">Sub text</span>
  18                                 </a>
  19                         </li>
  20
  21                         <li>
  22                                 <a href="#">
  23                                         <h3>1line-btn1</h3>
  24                                         <div data-role="button" data-inline="true">Text Button</div>
  25                                 </a>
  26                         </li>
  27
  28                         <li>
  29                                 <a href="#">
  30                                         <h3>1line-btn2</h3>
  31                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  32                                 </a>
  33                         </li>
  34
  35                         <li>
  36                                 <a href="#">
  37                                         <h3>1line-toggle</h3>
  38                                         <select name="flip-11" id="flip-11" data-role="slider">
  39                                                 <option value="off"></option>
  40                                                 <option value="on"></option>
  41                                         </select>
  42                                 </a>
  43                         </li>
  44
  45                         <li>
  46                                 <a href="#">
  47                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  48                                         <h3>1line-bigicon1</h3>
  49                                 </a>
  50                         </li>
  51
  52                         <li>
  53                                 <a href="#">
  54                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  55                                         <h3>1line-bigicon2</h3>
  56                                         <span class="ui-li-text-sub">Sub text</span>
  57                                 </a>
  58                         </li>
  59
  60                         <li>
  61                                 <a href="#">
  62                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  63                                         <h3>1line-bigicon4</h3>
  64                                         <div data-role="button" data-inline="true">Text Button</div>
  65                                 </a>
  66                         </li>
  67
  68                         <li>
  69                                 <a href="#">
  70                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  71                                         <h3>1line-bigicon5</h3>
  72                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  73                                 </a>
  74                         </li>
  75
  76                         <li>
  77                                 <a href="#">
  78                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  79                                         <h3>1line-bigicon6</h3>
  80                                         <select name="flip-11" id="flip-11" data-role="slider">
  81                                                 <option value="off"></option>
  82                                                 <option value="on"></option>
  83                                         </select>
  84                                 </a>
  85                         </li>
  86
  87                         <li class="ui-li-has-checkbox">
  88                                 <a href="#">
  89                                         <form><input type="checkbox" name="c1line-check1" /></form>
  90                                         <h3>1line-check1</h3>
  91                                 </a>
  92                         </li>
  93
  94                         <li class="ui-li-has-checkbox">
  95                                 <a href="#">
  96                                         <form><input type="checkbox" name="c1line-check2" /></form>
  97                                         <h3>1line-check2</h3>
  98                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  99                                 </a>
 100                         </li>
 101
 102                         <li class="ui-li-has-checkbox">
 103                                 <a href="#">
 104                                         <form><input type="checkbox"  name="c1line-check3" /></form>
 105                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 106                                         <h3>1line-check3</h3>
 107                                 </a>
 108                         </li>
 109
 110                         <li class="ui-li-has-checkbox">
 111                                 <a href="#">
 112                                         <form><input type="checkbox"  name="c1line-check4" /></form>
 113                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 114                                         <h3>1line-check4</h3>
 115                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 116                                 </a>
 117                         </li>
 118
 119                         <li class="ui-li-has-radio">
 120                                 <a href="#">
 121                                         <form><input type="radio" /></form>
 122                                         <h3>1line-radio1</h3>
 123                                 </a>
 124                         </li>
 125
 126                         <li class="ui-li-has-radio">
 127                                 <a href="#">
 128                                         <form><input type="radio" /></form>
 129                                         <h3>1line-radio3</h3>
 130                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 131                                 </a>
 132                         </li>
 133
 134                         <li class="ui-li-has-radio">
 135                                 <a href="#">
 136                                         <form><input type="radio" /></form>
 137                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 138                                         <h3>1line-radio4</h3>
 139                                 </a>
 140                         </li>
 141
 142                         <li class="ui-li-has-radio">
 143                                 <a href="#">
 144                                         <form><input type="radio" /></form>
 145                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 146                                         <h3>1line-radio5</h3>
 147                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 148                                 </a>
 149                         </li>
 150
 151                         <li class="ui-li-has-radio">
 152                                 <a href="#">
 153                                         <form><input type="radio" /></form>
 154                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 155                                         <h3>1line-radio6</h3>
 156
 157                                 </a>
 158                         </li>
 159
 160                         <li class="ui-li-has-multiline">
 161                                 <a href="#">
 162                                         <h3>2line</h3>
 163                                         <span class="ui-li-text-sub">Subtext</span>
 164                                 </a>
 165                         </li>
 166
 167 <!--                    <li class="ui-li-2line-sub-main">
 168                                 <a href="#">
 169                                         <span class="ui-li-text-sub">Subtext</span>
 170                                         <h3>2line-sub-main</h3>
 171                                 </a>
 172                         </li>-->
 173
 174                         <li class="ui-li-has-multiline">
 175                                 <a href="#">
 176                                         <h3>2line-2sub</h3>
 177                                         <span class="ui-li-text-sub">Subtext</span>
 178                                         <span class="ui-li-text-sub2">Subtext2</span>
 179                                 </a>
 180                         </li>
 181
 182                         <li class="ui-li-has-multiline">
 183                                 <a href="#">
 184                                         <h3>2line-btn1</h3>
 185                                         <span class="ui-li-text-sub">Subtext</span>
 186                                         <div data-role="button" data-inline="true">button</div>
 187                                 </a>
 188                         </li>
 189
 190                         <li class="ui-li-has-multiline">
 191                                 <a href="#">
 192                                         <h3>2line-btn1</h3>
 193                                         <span class="ui-li-text-sub">Subtext</span>
 194                                         <div data-role="button" data-inline="true" data-icon="call"></div>
 195                                 </a>
 196                         </li>
 197
 198                         <li class="ui-li-has-multiline">
 199                                 <a href="#">
 200                                         <h3>2line-btn2</h3>
 201                                         <span class="ui-li-text-sub">Subtext</span>
 202                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 203                                 </a>
 204                         </li>
 205
 206                         <li class="ui-li-has-multiline">
 207                                 <a href="#">
 208                                         <h3>line-star1</h3>
 209                                         <span class="ui-li-text-sub">Subtext</span>
 210                                         <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
 211                                         <span class="ui-li-text-sub2">Subtext2</span>
 212                                 </a>
 213                         </li>
 214
 215                         <li class="ui-li-has-multiline">
 216                                 <a href="#">
 217                                         <h3>2line-star</h3>
 218                                         <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
 219                                         <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
 220                                 </a>
 221                         </li>
 222
 223                         <li class="ui-li-has-multiline">
 224                                 <a href="#">
 225                                         <h3>2line-setting</h3>
 226                                         <span class="ui-li-text-sub">Subtext</span>
 227                                 </a>
 228                         </li>
 229
 230                         <li class="ui-li-has-multiline">
 231                                 <a href="#">
 232                                         <h3>2line-toggle-setting</h3>
 233                                         <span class="ui-li-text-sub">Subtext</span>
 234                                         <select name="flip-11" id="flip-11" data-role="slider">
 235                                                 <option value="off"></option>
 236                                                 <option value="on"></option>
 237                                         </select>
 238                                 </a>
 239                         </li>
 240
 241                         <li class="ui-li-has-multiline">
 242                                 <a href="#">
 243                                         <h3>2line-btn-setting</h3>
 244                                         <span class="ui-li-text-sub">Subtext</span>
 245                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 246                                 </a>
 247                         </li>
 248
 249                         <li class="ui-li-has-multiline">
 250                                 <a href="#">
 251                                         <h3>2line-bigicon0</h3>
 252                                         <span class="ui-li-text-sub">Subtext<img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 253                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 254                                 </a>
 255                         </li>
 256
 257                         <li class="ui-li-has-multiline">
 258                                 <a href="#">
 259                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 260                                         <h3>2line-bigicon1</h3>
 261                                         <span class="ui-li-text-sub">Subtext</span>
 262                                 </a>
 263                         </li>
 264
 265                         <li class="ui-li-has-multiline">
 266                                 <a href="#">
 267                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 268                                         <h3>2line-bigicon2</h3>
 269                                         <span class="ui-li-text-sub">Subtext</span>
 270                                         <span class="ui-li-text-sub2">Subtext2</span>
 271                                 </a>
 272                         </li>
 273
 274                         <li class="ui-li-has-multiline">
 275                                 <a href="#">
 276                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 277                                         <h3>2line-bigicon3</h3>
 278                                         <span class="ui-li-text-sub">Subtext</span>
 279                                 </a>
 280                         </li>
 281
 282                         <li class="ui-li-has-multiline">
 283                                 <a href="#">
 284                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 285                                         <h3>2line-bigicon4</h3>
 286                                         <span class="ui-li-text-sub">Subtext</span>
 287                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 288                                 </a>
 289                         </li>
 290
 291                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 292                                 <a href="#">
 293                                         <form><input type="checkbox"  name="c2line-check1" /></form>
 294                                         <h3>2line-check</h3>
 295                                         <span class="ui-li-text-sub">Subtext</span>
 296                                 </a>
 297                         </li>
 298
 299                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 300                                 <a href="#">
 301                                         <form><input type="checkbox"  name="c2line-check2" /></form>
 302                                         <h3>2line-check2</h3>
 303                                         <span class="ui-li-text-sub">Subtext</span>
 304                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 305                                 </a>
 306                         </li>
 307
 308                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 309                                 <a href="#">
 310                                         <form><input type="checkbox"  name="c2line-check3" /></form>
 311                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 312                                         <h3>2line-check3</h3>
 313                                         <span class="ui-li-text-sub">Subtext</span>
 314                                 </a>
 315                         </li>
 316
 317                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 318                                 <a href="#">
 319                                         <form><input type="radio" /></form>
 320                                         <h3>2line-radio1</h3>
 321                                         <span class="ui-li-text-sub">Subtext</span>
 322                                 </a>
 323                         </li>
 324
 325                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 326                                 <a href="#">
 327                                         <form><input type="radio" /></form>
 328                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 329                                         <h3>2line-radio2</h3>
 330                                         <span class="ui-li-text-sub">Subtext</span>
 331                                 </a>
 332                         </li>
 333
 334                         <li class="ui-li-has-multiline">
 335                                 <a href="#">
 336                                         <span class="ui-li-color-bar"></span>
 337                                         <h3>2line-colorbar1</h3>
 338                                         <span class="ui-li-text-sub">Subtext
 339                                                 <img src="00_winset_icon_favorite_on.png">
 340                                                 <img src="00_winset_icon_favorite_on.png">
 341                                                 <img src="00_winset_icon_favorite_on.png">
 342                                         </span>
 343                                         <div data-role="button" data-inline="true">button</div>
 344                                 </a>
 345                         </li>
 346
 347                         <li class="ui-li-has-multiline">
 348                                 <a href="#">
 349                                         <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
 350                                         <h3>2line-colorbar2</h3>
 351                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 352                                         <span class="ui-li-text-sub">Subtext</span>
 353                                         <div data-role="button" data-inline="true">button</div>
 354                                 </a>
 355                         </li>
 356
 357                         <li class="ui-li-has-multiline">
 358                                 <a href="#">
 359                                         <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
 360                                         <h3>2line-colorbar2</h3>
 361                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 362                                         <span class="ui-li-text-sub">Subtext</span>
 363                                         <div data-role="button" data-inline="true" data-icon="call"></div>
 364                                 </a>
 365                         </li>
 366
 367                         <li class="ui-li-has-multiline">
 368                                 <a href="#">
 369                                         <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
 370                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 371                                         <h3>2line-colorbar3</h3>
 372                                         <span class="ui-li-text-sub">Subtext</span>
 373                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 374                                 </a>
 375                         </li>
 376
 377                         <li class="ui-li-has-multiline">
 378                                 <a href="#">
 379                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 380                                         <h3>2line-bigicon8</h3>
 381                                         <span class="ui-li-text-sub">Subtext</span>
 382                                         <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
 383                                 </a>
 384                         </li>
 385
 386                         <li class="ui-li-has-multiline ui-li-thumbnail-right">
 387                                 <a href="#">
 388                                         <h3>2line-thumb1</h3>
 389                                         <span class="ui-li-text-sub">Subtext</span>
 390                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 391                                 </a>
 392                         </li>
 393
 394                         <li class="ui-li-has-multiline">
 395                                 <a href="#">
 396                                         <h3>2line-thumb2</h3>
 397                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 398                                         <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
 399                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 400                                 </a>
 401                         </li>
 402
 403                         <li class="ui-li-has-multiline ui-li-thumbnail-right">
 404                                 <a href="#">
 405                                         <span class="ui-li-text-sub">Subtext</span>
 406                                         <h3>2line-sub-main-bigicon1</h3>
 407                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 408                                 </a>
 409                         </li>
 410
 411                         <li class="ui-li-has-multiline">
 412                                 <a href="#">
 413                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 414                                         <h3>2line-bigicon-pgbar1</h3>
 415                                         <span class="ui-li-text-sub">Subtext</span>
 416                                         <div data-role="progressbar" id="progressbar"></div>
 417                                 </a>
 418                         </li>
 419
 420                         <li class="ui-li-has-multiline">
 421                                 <a href="#">
 422                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 423                                         <h3>2line-bigicon-pgbar2</h3>
 424                                         <span class="ui-li-text-sub">Subtext</span>
 425                                         <div data-role="button" data-inline="true">button</div>
 426                                 </a>
 427                         </li>
 428
 429                         <li class="ui-li-has-multiline">
 430                                 <a href="#">
 431                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 432                                         <h3>2line-bigicon-pgbar2</h3>
 433                                         <span class="ui-li-text-sub">Subtext</span>
 434                                         <div data-role="button" data-inline="true" data-icon="call"></div>
 435                                 </a>
 436                         </li>
 437
 438                         <li class="ui-li-has-multiline">
 439                                 <a href="#">
 440                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 441                                         <h3>2line-bigicon-pgbar3</h3>
 442                                         <span class="ui-li-text-sub">Subtext</span>
 443                                         <span class="ui-li-text-sub2">Subtext2</span>
 444                                         <div data-role="progressing" data-style="pending" id="pending"></div>
 445                                 </a>
 446                         </li>
 447
 448                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 449                                 <a href="#">
 450                                         <form><input type="checkbox"  name="c2line-icon-bigicon-btn" /></form>
 451                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 452                                         <h3>2line-icon-bigicon-btn</h3>
 453                                         <span class="ui-li-text-sub">Subtext</span>
 454                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 455                                 </a>
 456                         </li>
 457
 458                         <li class="ui-li-has-multiline">
 459                                 <a href="#">
 460                                         <h3>2line-thumb3</h3>
 461                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 462                                         <span class="ui-li-text-sub">Subtext</span>
 463                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 464                                 </a>
 465                         </li>
 466                 </ul>
 467         </div>
 468 </div>
 469