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