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                                         <div data-role="toggleswitch"/></div>
  39                                 </a>
  40                         </li>
  41
  42                         <li>
  43                                 <a href="#">
  44                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  45                                         1line-bigicon1
  46                                 </a>
  47                         </li>
  48
  49                         <li>
  50                                 <a href="#">
  51                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  52                                         1line-bigicon2
  53                                         <span class="ui-li-text-sub">Sub text</span>
  54                                 </a>
  55                         </li>
  56
  57                         <li>
  58                                 <a href="#">
  59                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  60                                         1line-bigicon4
  61                                         <div data-role="button" data-inline="true">Text Button</div>
  62                                 </a>
  63                         </li>
  64
  65                         <li>
  66                                 <a href="#">
  67                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  68                                         1line-bigicon5
  69                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  70                                 </a>
  71                         </li>
  72
  73                         <li>
  74                                 <a href="#">
  75                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  76                                         1line-bigicon6
  77                                         <div data-role="toggleswitch"/></div>
  78                                 </a>
  79                         </li>
  80
  81                         <li class="ui-li-has-checkbox">
  82                                 <a href="#">
  83                                         <form><input type="checkbox" name="c1line-check1" /></form>
  84                                         1line-check1
  85                                 </a>
  86                         </li>
  87
  88                         <li class="ui-li-has-checkbox">
  89                                 <a href="#">
  90                                         <form><input type="checkbox" name="c1line-check2" /></form>
  91                                         1line-check2
  92                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  93                                 </a>
  94                         </li>
  95
  96                         <li class="ui-li-has-checkbox">
  97                                 <a href="#">
  98                                         <form><input type="checkbox"  name="c1line-check3" /></form>
  99                                         <img src="thumbnail.jpg" class="ui-li-bigicon" >
 100                                         1line-check3
 101                                 </a>
 102                         </li>
 103
 104                         <li class="ui-li-has-checkbox">
 105                                 <a href="#">
 106                                         <form><input type="checkbox"  name="c1line-check4" /></form>
 107                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 108                                         1line-check4
 109                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 110                                 </a>
 111                         </li>
 112
 113                         <li class="ui-li-has-radio">
 114                                 <a href="#">
 115                                         <form><input type="radio" /></form>
 116                                         1line-radio1
 117                                 </a>
 118                         </li>
 119
 120                         <li class="ui-li-has-radio">
 121                                 <a href="#">
 122                                         <form><input type="radio" /></form>
 123                                         1line-radio3
 124                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 125                                 </a>
 126                         </li>
 127
 128                         <li class="ui-li-has-radio">
 129                                 <a href="#">
 130                                         <form><input type="radio" /></form>
 131                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 132                                         1line-radio4
 133                                 </a>
 134                         </li>
 135
 136                         <li class="ui-li-has-radio">
 137                                 <a href="#">
 138                                         <form><input type="radio" /></form>
 139                                         1line-radio5
 140                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 141                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 142                                 </a>
 143                         </li>
 144
 145                         <li class="ui-li-has-radio">
 146                                 <a href="#">
 147                                         <form><input type="radio" /></form>
 148                                         1line-radio6
 149                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 150                                 </a>
 151                         </li>
 152
 153                         <li class="ui-li-has-multiline">
 154                                 <a href="#">
 155                                         2line
 156                                         <span class="ui-li-text-sub">Subtext</span>
 157                                 </a>
 158                         </li>
 159
 160 <!--                    <li class="ui-li-has-multiline">
 161                                 <a href="#">
 162                                         <span class="ui-li-text-sub">Subtext</span>
 163                                         2line-sub-main
 164                                 </a>
 165                         </li>-->
 166
 167                         <li class="ui-li-has-multiline">
 168                                 <a href="#">
 169                                         2line-2sub
 170                                         <span class="ui-li-text-sub">Subtext</span>
 171                                         <span class="ui-li-text-sub2">Subtext2</span>
 172                                 </a>
 173                         </li>
 174
 175                         <li class="ui-li-has-multiline">
 176                                 <a href="#">
 177                                         2line-btn1
 178                                         <span class="ui-li-text-sub">Subtext</span>
 179                                         <div data-role="button" data-inline="true">button</div>
 180                                 </a>
 181                         </li>
 182
 183                         <li class="ui-li-has-multiline">
 184                                 <a href="#">
 185                                         2line-btn1
 186                                         <span class="ui-li-text-sub">Subtext</span>
 187                                         <div data-role="button" data-inline="true" data-icon="call"></div>
 188                                 </a>
 189                         </li>
 190
 191                         <li class="ui-li-has-multiline">
 192                                 <a href="#">
 193                                         2line-btn2
 194                                         <span class="ui-li-text-sub">Subtext</span>
 195                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 196                                 </a>
 197                         </li>
 198
 199                         <li class="ui-li-has-multiline">
 200                                 <a href="#">
 201                                         2line-star1
 202                                         <span class="ui-li-text-sub">Subtext</span>
 203                                         <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
 204                                         <span class="ui-li-text-sub2">Subtext2</span>
 205                                 </a>
 206                         </li>
 207
 208                         <li class="ui-li-has-multiline">
 209                                 <a href="#">
 210                                         2line-star2
 211                                         <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
 212                                         <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
 213                                 </a>
 214                         </li>
 215
 216                         <li class="ui-li-has-multiline">
 217                                 <a href="#">
 218                                         2line-setting
 219                                         <span class="ui-li-text-sub">Subtext</span>
 220                                 </a>
 221                         </li>
 222
 223                         <li class="ui-li-has-multiline">
 224                                 <a href="#">
 225                                         2line-toggle-setting
 226                                         <span class="ui-li-text-sub">Subtext</span>
 227                                         <div data-role="toggleswitch"/></div>
 228                                 </a>
 229                         </li>
 230
 231                         <li class="ui-li-has-multiline">
 232                                 <a href="#">
 233                                         2line-btn-setting
 234                                         <span class="ui-li-text-sub">Subtext</span>
 235                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 236                                 </a>
 237                         </li>
 238
 239                         <li class="ui-li-has-multiline">
 240                                 <a href="#">
 241                                         2line-bigicon0
 242                                         <span class="ui-li-text-sub">Subtext<img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 243                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 244                                 </a>
 245                         </li>
 246
 247                         <li class="ui-li-has-multiline">
 248                                 <a href="#">
 249                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 250                                         2line-bigicon1
 251                                         <span class="ui-li-text-sub">Subtext</span>
 252                                 </a>
 253                         </li>
 254
 255                         <li class="ui-li-has-multiline">
 256                                 <a href="#">
 257                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 258                                         2line-bigicon2
 259                                         <span class="ui-li-text-sub">Subtext</span>
 260                                         <span class="ui-li-text-sub2">Subtext2</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-bigicon3
 268                                         <span class="ui-li-text-sub">Subtext</span>
 269                                 </a>
 270                         </li>
 271
 272                         <li class="ui-li-has-multiline">
 273                                 <a href="#">
 274                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 275                                         2line-bigicon4
 276                                         <span class="ui-li-text-sub">Subtext</span>
 277                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 278                                 </a>
 279                         </li>
 280
 281                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 282                                 <a href="#">
 283                                         <form><input type="checkbox"  name="c2line-check1" /></form>
 284                                         2line-check
 285                                         <span class="ui-li-text-sub">Subtext</span>
 286                                 </a>
 287                         </li>
 288
 289                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 290                                 <a href="#">
 291                                         <form><input type="checkbox"  name="c2line-check2" /></form>
 292                                         2line-check2
 293                                         <span class="ui-li-text-sub">Subtext</span>
 294                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 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-check3" /></form>
 301                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 302                                         2line-check3
 303                                         <span class="ui-li-text-sub">Subtext</span>
 304                                 </a>
 305                         </li>
 306
 307                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 308                                 <a href="#">
 309                                         <form><input type="radio" /></form>
 310                                         2line-radio1
 311                                         <span class="ui-li-text-sub">Subtext</span>
 312                                 </a>
 313                         </li>
 314
 315                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 316                                 <a href="#">
 317                                         <form><input type="radio" /></form>
 318                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 319                                         2line-radio2
 320                                         <span class="ui-li-text-sub">Subtext</span>
 321                                 </a>
 322                         </li>
 323
 324                         <li class="ui-li-has-multiline">
 325                                 <a href="#">
 326                                         <span class="ui-li-color-bar"></span>
 327                                         2line-colorbar1
 328                                         <span class="ui-li-text-sub">Subtext
 329                                                 <img src="00_winset_icon_favorite_on.png">
 330                                                 <img src="00_winset_icon_favorite_on.png">
 331                                                 <img src="00_winset_icon_favorite_on.png">
 332                                         </span>
 333                                         <div data-role="button" data-inline="true">button</div>
 334                                 </a>
 335                         </li>
 336
 337                         <li class="ui-li-has-multiline">
 338                                 <a href="#">
 339                                         <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
 340                                         2line-colorbar2
 341                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 342                                         <span class="ui-li-text-sub">Subtext</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(204, 52, 52, 1);"></span>
 350                                         2line-colorbar2
 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" data-icon="call"></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(72, 136, 42, 1);"></span>
 360                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 361                                         2line-colorbar3
 362                                         <span class="ui-li-text-sub">Subtext</span>
 363                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 364                                 </a>
 365                         </li>
 366
 367                         <li class="ui-li-has-multiline">
 368                                 <a href="#">
 369                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 370                                         2line-bigicon8
 371                                         <span class="ui-li-text-sub">Subtext</span>
 372                                         <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
 373                                 </a>
 374                         </li>
 375
 376                         <li class="ui-li-has-multiline ui-li-thumbnail-right">
 377                                 <a href="#">
 378                                         2line-thumb1
 379                                         <span class="ui-li-text-sub">Subtext</span>
 380                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 381                                 </a>
 382                         </li>
 383
 384                         <li class="ui-li-has-multiline">
 385                                 <a href="#">
 386                                         2line-thumb2
 387                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 388                                         <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
 389                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 390                                 </a>
 391                         </li>
 392
 393                         <li class="ui-li-has-multiline ui-li-thumbnail-right">
 394                                 <a href="#">
 395                                         <span class="ui-li-text-sub">Subtext</span>
 396                                         2line-sub-main-bigicon1
 397                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 398                                 </a>
 399                         </li>
 400
 401                         <li class="ui-li-has-multiline">
 402                                 <a href="#">
 403                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 404                                         2line-bigicon-pgbar1
 405                                         <span class="ui-li-text-sub">Subtext</span>
 406                                         <div data-role="progressbar" id="progressbar"></div>
 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-pgbar2
 414                                         <span class="ui-li-text-sub">Subtext</span>
 415                                         <div data-role="button" data-inline="true">button</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" data-icon="call"></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-pgbar3
 432                                         <span class="ui-li-text-sub">Subtext</span>
 433                                         <span class="ui-li-text-sub2">Subtext2</span>
 434                                         <div data-role="progressing" data-style="pending" id="pending"></div>
 435                                 </a>
 436                         </li>
 437
 438                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 439                                 <a href="#">
 440                                         <form><input type="checkbox"  name="c2line-icon-bigicon-btn" /></form>
 441                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 442                                         2line-icon-bigicon-btn
 443                                         <span class="ui-li-text-sub">Subtext</span>
 444                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 445                                 </a>
 446                         </li>
 447
 448                         <li class="ui-li-has-multiline">
 449                                 <a href="#">
 450                                         2line-thumb3
 451                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 452                                         <span class="ui-li-text-sub">Subtext</span>
 453                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 454                                 </a>
 455                         </li>
 456                 </ul>
 457         </div>
 458 </div>
 459