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