demos/tizen-gray/widgets/list/list-normal.html

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