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