demos/tizen-winsets/widgets/list/list-dialogue.html

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