demos/tizen-winsets/widgets/list/list-normal_anchor.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                                         1line
  11                                 </a>
  12                         </li>
  13
  14                         <li>
  15                                 <a href="#">
  16                                         1line-sub
  17                                         <span class="ui-li-text-sub">Sub text</span>
  18                                 </a>
  19                         </li>
  20
  21                         <li>
  22                                 <a href="#">
  23                                         1line-btn1
  24                                         <div data-role="button" data-inline="true">Text Button</div>
  25                                 </a>
  26                         </li>
  27
  28                         <li>
  29                                 <a href="#">
  30                                         1line-btn2
  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                                         1line-toggle
  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                                         1line-bigicon1
  49                                 </a>
  50                         </li>
  51
  52                         <li>
  53                                 <a href="#">
  54                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  55                                         1line-bigicon2
  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                                         1line-bigicon4
  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                                         1line-bigicon5
  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                                         1line-bigicon6
  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                                         1line-check1
  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                                         1line-check2
  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                                         1line-check3
 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                                         1line-check4
 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                                         1line-radio1
 123                                 </a>
 124                         </li>
 125
 126                         <li class="ui-li-has-radio">
 127                                 <a href="#">
 128                                         <form><input type="radio" /></form>
 129                                         1line-radio3
 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                                         1line-radio4
 139                                 </a>
 140                         </li>
 141
 142                         <li class="ui-li-has-radio">
 143                                 <a href="#">
 144                                         <form><input type="radio" /></form>
 145                                         1line-radio5
 146                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 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                                         1line-radio6
 155                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 156                                 </a>
 157                         </li>
 158
 159                         <li class="ui-li-has-multiline">
 160                                 <a href="#">
 161                                         2line
 162                                         <span class="ui-li-text-sub">Subtext</span>
 163                                 </a>
 164                         </li>
 165
 166 <!--                    <li class="ui-li-has-multiline">
 167                                 <a href="#">
 168                                         <span class="ui-li-text-sub">Subtext</span>
 169                                         2line-sub-main
 170                                 </a>
 171                         </li>-->
 172
 173                         <li class="ui-li-has-multiline">
 174                                 <a href="#">
 175                                         2line-2sub
 176                                         <span class="ui-li-text-sub">Subtext</span>
 177                                         <span class="ui-li-text-sub2">Subtext2</span>
 178                                 </a>
 179                         </li>
 180
 181                         <li class="ui-li-has-multiline">
 182                                 <a href="#">
 183                                         2line-btn1
 184                                         <span class="ui-li-text-sub">Subtext</span>
 185                                         <div data-role="button" data-inline="true">button</div>
 186                                 </a>
 187                         </li>
 188
 189                         <li class="ui-li-has-multiline">
 190                                 <a href="#">
 191                                         2line-btn1
 192                                         <span class="ui-li-text-sub">Subtext</span>
 193                                         <div data-role="button" data-inline="true" data-icon="call"></div>
 194                                 </a>
 195                         </li>
 196
 197                         <li class="ui-li-has-multiline">
 198                                 <a href="#">
 199                                         2line-btn2
 200                                         <span class="ui-li-text-sub">Subtext</span>
 201                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 202                                 </a>
 203                         </li>
 204
 205                         <li class="ui-li-has-multiline">
 206                                 <a href="#">
 207                                         2line-star1
 208                                         <span class="ui-li-text-sub">Subtext</span>
 209                                         <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
 210                                         <span class="ui-li-text-sub2">Subtext2</span>
 211                                 </a>
 212                         </li>
 213
 214                         <li class="ui-li-has-multiline">
 215                                 <a href="#">
 216                                         2line-star2
 217                                         <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
 218                                         <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
 219                                 </a>
 220                         </li>
 221
 222                         <li class="ui-li-has-multiline">
 223                                 <a href="#">
 224                                         2line-setting
 225                                         <span class="ui-li-text-sub">Subtext</span>
 226                                 </a>
 227                         </li>
 228
 229                         <li class="ui-li-has-multiline">
 230                                 <a href="#">
 231                                         2line-toggle-setting
 232                                         <span class="ui-li-text-sub">Subtext</span>
 233                                         <select name="flip-11" id="flip-11" data-role="slider">
 234                                                 <option value="off"></option>
 235                                                 <option value="on"></option>
 236                                         </select>
 237                                 </a>
 238                         </li>
 239
 240                         <li class="ui-li-has-multiline">
 241                                 <a href="#">
 242                                         2line-btn-setting
 243                                         <span class="ui-li-text-sub">Subtext</span>
 244                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 245                                 </a>
 246                         </li>
 247
 248                         <li class="ui-li-has-multiline">
 249                                 <a href="#">
 250                                         2line-bigicon0
 251                                         <span class="ui-li-text-sub">Subtext<img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 252                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 253                                 </a>
 254                         </li>
 255
 256                         <li class="ui-li-has-multiline">
 257                                 <a href="#">
 258                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 259                                         2line-bigicon1
 260                                         <span class="ui-li-text-sub">Subtext</span>
 261                                 </a>
 262                         </li>
 263
 264                         <li class="ui-li-has-multiline">
 265                                 <a href="#">
 266                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 267                                         2line-bigicon2
 268                                         <span class="ui-li-text-sub">Subtext</span>
 269                                         <span class="ui-li-text-sub2">Subtext2</span>
 270                                 </a>
 271                         </li>
 272
 273                         <li class="ui-li-has-multiline">
 274                                 <a href="#">
 275                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 276                                         2line-bigicon3
 277                                         <span class="ui-li-text-sub">Subtext</span>
 278                                 </a>
 279                         </li>
 280
 281                         <li class="ui-li-has-multiline">
 282                                 <a href="#">
 283                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 284                                         2line-bigicon4
 285                                         <span class="ui-li-text-sub">Subtext</span>
 286                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 287                                 </a>
 288                         </li>
 289
 290                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 291                                 <a href="#">
 292                                         <form><input type="checkbox"  name="c2line-check1" /></form>
 293                                         2line-check
 294                                         <span class="ui-li-text-sub">Subtext</span>
 295                                 </a>
 296                         </li>
 297
 298                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 299                                 <a href="#">
 300                                         <form><input type="checkbox"  name="c2line-check2" /></form>
 301                                         2line-check2
 302                                         <span class="ui-li-text-sub">Subtext</span>
 303                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 304                                 </a>
 305                         </li>
 306
 307                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 308                                 <a href="#">
 309                                         <form><input type="checkbox"  name="c2line-check3" /></form>
 310                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 311                                         2line-check3
 312                                         <span class="ui-li-text-sub">Subtext</span>
 313                                 </a>
 314                         </li>
 315
 316                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 317                                 <a href="#">
 318                                         <form><input type="radio" /></form>
 319                                         2line-radio1
 320                                         <span class="ui-li-text-sub">Subtext</span>
 321                                 </a>
 322                         </li>
 323
 324                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 325                                 <a href="#">
 326                                         <form><input type="radio" /></form>
 327                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 328                                         2line-radio2
 329                                         <span class="ui-li-text-sub">Subtext</span>
 330                                 </a>
 331                         </li>
 332
 333                         <li class="ui-li-has-multiline">
 334                                 <a href="#">
 335                                         <span class="ui-li-color-bar"></span>
 336                                         2line-colorbar1
 337                                         <span class="ui-li-text-sub">Subtext
 338                                                 <img src="00_winset_icon_favorite_on.png">
 339                                                 <img src="00_winset_icon_favorite_on.png">
 340                                                 <img src="00_winset_icon_favorite_on.png">
 341                                         </span>
 342                                         <div data-role="button" data-inline="true">button</div>
 343                                 </a>
 344                         </li>
 345
 346                         <li class="ui-li-has-multiline">
 347                                 <a href="#">
 348                                         <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
 349                                         2line-colorbar2
 350                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 351                                         <span class="ui-li-text-sub">Subtext</span>
 352                                         <div data-role="button" data-inline="true">button</div>
 353                                 </a>
 354                         </li>
 355
 356                         <li class="ui-li-has-multiline">
 357                                 <a href="#">
 358                                         <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
 359                                         2line-colorbar2
 360                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 361                                         <span class="ui-li-text-sub">Subtext</span>
 362                                         <div data-role="button" data-inline="true" data-icon="call"></div>
 363                                 </a>
 364                         </li>
 365
 366                         <li class="ui-li-has-multiline">
 367                                 <a href="#">
 368                                         <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
 369                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 370                                         2line-colorbar3
 371                                         <span class="ui-li-text-sub">Subtext</span>
 372                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 373                                 </a>
 374                         </li>
 375
 376                         <li class="ui-li-has-multiline">
 377                                 <a href="#">
 378                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 379                                         2line-bigicon8
 380                                         <span class="ui-li-text-sub">Subtext</span>
 381                                         <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
 382                                 </a>
 383                         </li>
 384
 385                         <li class="ui-li-has-multiline ui-li-thumbnail-right">
 386                                 <a href="#">
 387                                         2line-thumb1
 388                                         <span class="ui-li-text-sub">Subtext</span>
 389                                         <img src="large_thumbnail.jpg" class="ui-li-bigicon">
 390                                 </a>
 391                         </li>
 392
 393                         <li class="ui-li-has-multiline">
 394                                 <a href="#">
 395                                         2line-thumb2
 396                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 397                                         <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
 398                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 399                                 </a>
 400                         </li>
 401
 402                         <li class="ui-li-has-multiline ui-li-thumbnail-right">
 403                                 <a href="#">
 404                                         <span class="ui-li-text-sub">Subtext</span>
 405                                         2line-sub-main-bigicon1
 406                                         <img src="large_thumbnail.jpg" class="ui-li-bigicon">
 407                                 </a>
 408                         </li>
 409
 410                         <li class="ui-li-has-multiline">
 411                                 <a href="#">
 412                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 413                                         2line-bigicon-pgbar1
 414                                         <span class="ui-li-text-sub">Subtext</span>
 415                                         <div data-role="progressbar" id="progressbar"></div>
 416                                 </a>
 417                         </li>
 418
 419                         <li class="ui-li-has-multiline">
 420                                 <a href="#">
 421                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 422                                         2line-bigicon-pgbar2
 423                                         <span class="ui-li-text-sub">Subtext</span>
 424                                         <div data-role="button" data-inline="true">button</div>
 425                                 </a>
 426                         </li>
 427
 428                         <li class="ui-li-has-multiline">
 429                                 <a href="#">
 430                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 431                                         2line-bigicon-pgbar2
 432                                         <span class="ui-li-text-sub">Subtext</span>
 433                                         <div data-role="button" data-inline="true" data-icon="call"></div>
 434                                 </a>
 435                         </li>
 436
 437                         <li class="ui-li-has-multiline">
 438                                 <a href="#">
 439                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 440                                         2line-bigicon-pgbar3
 441                                         <span class="ui-li-text-sub">Subtext</span>
 442                                         <span class="ui-li-text-sub2">Subtext2</span>
 443                                         <div data-role="progressing" data-style="pending" id="pending"></div>
 444                                 </a>
 445                         </li>
 446
 447                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 448                                 <a href="#">
 449                                         <form><input type="checkbox"  name="c2line-icon-bigicon-btn" /></form>
 450                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 451                                         2line-icon-bigicon-btn
 452                                         <span class="ui-li-text-sub">Subtext</span>
 453                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 454                                 </a>
 455                         </li>
 456
 457                         <li class="ui-li-has-multiline">
 458                                 <a href="#">
 459                                         2line-thumb3
 460                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 461                                         <span class="ui-li-text-sub">Subtext</span>
 462                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 463                                 </a>
 464                         </li>
 465                 </ul>
 466         </div>
 467 </div>
 468