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                 <form>
   7                 <ul data-role="listview">
   8
   9                         <li>
  10                                 <a href="#">
  11                                         1line
  12                                 </a>
  13                         </li>
  14
  15                         <li>
  16                                 <a href="#">
  17                                         1line-sub
  18                                         <span class="ui-li-text-sub">Sub text</span>
  19                                 </a>
  20                         </li>
  21
  22                         <li>
  23                                 <a href="#">
  24                                         1line-btn1
  25                                         <div data-role="button" data-inline="true">Text Button</div>
  26                                 </a>
  27                         </li>
  28
  29                         <li>
  30                                 <a href="#">
  31                                         1line-btn2
  32                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  33                                 </a>
  34                         </li>
  35
  36                         <li>
  37                                 <a href="#">
  38                                         1line-toggle
  39                                         <select name="flip-11" id="flip-11" data-role="slider">
  40                                                 <option value="off"></option>
  41                                                 <option value="on"></option>
  42                                         </select>
  43                                 </a>
  44                         </li>
  45
  46                         <li>
  47                                 <a href="#">
  48                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  49                                         1line-bigicon1
  50                                 </a>
  51                         </li>
  52
  53                         <li>
  54                                 <a href="#">
  55                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  56                                         1line-bigicon2
  57                                         <span class="ui-li-text-sub">Sub text</span>
  58                                 </a>
  59                         </li>
  60
  61                         <li>
  62                                 <a href="#">
  63                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  64                                         1line-bigicon4
  65                                         <div data-role="button" data-inline="true">Text Button</div>
  66                                 </a>
  67                         </li>
  68
  69                         <li>
  70                                 <a href="#">
  71                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  72                                         1line-bigicon5
  73                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  74                                 </a>
  75                         </li>
  76
  77                         <li>
  78                                 <a href="#">
  79                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
  80                                         1line-bigicon6
  81                                         <select name="flip-11" id="flip-11" data-role="slider">
  82                                                 <option value="off"></option>
  83                                                 <option value="on"></option>
  84                                         </select>
  85                                 </a>
  86                         </li>
  87
  88                         <li class="ui-li-has-checkbox">
  89                                 <a href="#">
  90                                         <input type="checkbox" name="c1line-check1" />
  91                                         1line-check1
  92                                 </a>
  93                         </li>
  94
  95                         <li class="ui-li-has-checkbox">
  96                                 <a href="#">
  97                                         <input type="checkbox" name="c1line-check2" />
  98                                         1line-check2
  99                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 100                                 </a>
 101                         </li>
 102
 103                         <li class="ui-li-has-checkbox">
 104                                 <a href="#">
 105                                         <input type="checkbox"  name="c1line-check3" />
 106                                         <img src="thumbnail.jpg" class="ui-li-bigicon" >
 107                                         1line-check3
 108                                 </a>
 109                         </li>
 110
 111                         <li class="ui-li-has-checkbox">
 112                                 <a href="#">
 113                                         <input type="checkbox"  name="c1line-check4" />
 114                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 115                                         1line-check4
 116                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 117                                 </a>
 118                         </li>
 119
 120                         <li class="ui-li-has-radio">
 121                                 <a href="#">
 122                                         <input type="radio" name="1line-radio" />
 123                                         1line-radio1
 124                                 </a>
 125                         </li>
 126
 127                         <li class="ui-li-has-radio">
 128                                 <a href="#">
 129                                         <input type="radio" name="1line-radio" />
 130                                         1line-radio3
 131                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 132                                 </a>
 133                         </li>
 134
 135                         <li class="ui-li-has-radio">
 136                                 <a href="#">
 137                                         <input type="radio" name="1line-radio" />
 138                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 139                                         1line-radio4
 140                                 </a>
 141                         </li>
 142
 143                         <li class="ui-li-has-radio">
 144                                 <a href="#">
 145                                         <input type="radio" name="1line-radio" />
 146                                         1line-radio5
 147                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 148                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 149                                 </a>
 150                         </li>
 151
 152                         <li class="ui-li-has-radio">
 153                                 <a href="#">
 154                                         <input type="radio" name="1line-radio" />
 155                                         1line-radio6
 156                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 157                                 </a>
 158                         </li>
 159
 160                         <li class="ui-li-has-multiline">
 161                                 <a href="#">
 162                                         2line
 163                                         <span class="ui-li-text-sub">Subtext</span>
 164                                 </a>
 165                         </li>
 166
 167 <!--                    <li class="ui-li-has-multiline">
 168                                 <a href="#">
 169                                         <span class="ui-li-text-sub">Subtext</span>
 170                                         2line-sub-main
 171                                 </a>
 172                         </li>-->
 173
 174                         <li class="ui-li-has-multiline">
 175                                 <a href="#">
 176                                         2line-2sub
 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                                         2line-btn1
 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                                         2line-btn1
 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                                         2line-btn2
 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                                         2line-star1
 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                                         2line-star2
 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                                         2line-setting
 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                                         2line-toggle-setting
 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                                         2line-btn-setting
 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                                         2line-bigicon0
 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                                         2line-bigicon1
 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                                         2line-bigicon2
 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                                         2line-bigicon3
 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                                         2line-bigicon4
 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                                         <input type="checkbox"  name="c2line-check1" />
 294                                         2line-check
 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                                         <input type="checkbox"  name="c2line-check2" />
 302                                         2line-check2
 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                                         <input type="checkbox"  name="c2line-check3" />
 311                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 312                                         2line-check3
 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                                         <input type="radio" name="2line-radio" />
 320                                         2line-radio1
 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                                         <input type="radio" name="2line-radio" />
 328                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 329                                         2line-radio2
 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                                         2line-colorbar1
 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                                         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">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                                         2line-colorbar2
 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                                         2line-colorbar3
 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                                         2line-bigicon8
 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                                         2line-thumb1
 389                                         <span class="ui-li-text-sub">Subtext</span>
 390                                         <img src="large_thumbnail.jpg" class="ui-li-bigicon">
 391                                 </a>
 392                         </li>
 393
 394                         <li class="ui-li-has-multiline">
 395                                 <a href="#">
 396                                         2line-thumb2
 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                                         2line-sub-main-bigicon1
 407                                         <img src="large_thumbnail.jpg" class="ui-li-bigicon">
 408                                 </a>
 409                         </li>
 410
 411                         <li class="ui-li-has-multiline">
 412                                 <a href="#">
 413                                         2line-bigicon-pgbar1
 414                                         <div data-role="progressbar" id="progressbar"></div>
 415                                 </a>
 416                         </li>
 417
 418                         <li class="ui-li-has-multiline">
 419                                 <a href="#">
 420                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 421                                         Short Progress
 422                                         <div data-role="progressbar" id="progressbar"></div>
 423                                         <div data-role="button" data-inline="true">Stop</div>
 424                                 </a>
 425                         </li>
 426
 427                         <li class="ui-li-has-checkbox ui-li-has-multiline">
 428                                 <a href="#">
 429                                         <input type="checkbox"  name="c2line-icon-bigicon-btn" />
 430                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 431                                         2line-3items
 432                                         <span class="ui-li-text-sub">Subtext</span>
 433                                         <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
 434                                 </a>
 435                         </li>
 436
 437                         <li class="ui-li-has-multiline">
 438                                 <a href="#">
 439                                         2line-thumb3
 440                                         <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
 441                                         <span class="ui-li-text-sub">Subtext</span>
 442                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 443                                 </a>
 444                         </li>
 445                 </ul>
 446                 <form>
 447         </div>
 448         <div data-role="footer">
 449         </div>
 450 </div>
 451