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                         <li data-role="list-divider" data-style="dialogue">Dialogue</li>
   8                         <li class="ui-li-dialogue">
   9                                 1line
  10                         </li>
  11                         <li class="ui-li-dialogue">
  12                                 1line-sub
  13                                 <span class="ui-li-text-sub">subtext</sub>
  14                         </li>
  15                         <li class="ui-li-dialogue">
  16                                 1line-btn1
  17                                 <div data-role="button" data-inline="true">Button</div>
  18                         </li>
  19                         <li class="ui-li-dialogue">
  20                                 1line-circle button
  21                                 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  22                         </li>
  23                         <li class="ui-li-dialogue">
  24                                 1line-toggle
  25                                 <select name="flip-11" id="flip-11" data-role="slider">
  26                                         <option value="off"></option>
  27                                         <option value="on"></option>
  28                                 </select>
  29                         </li>
  30                         <li class="ui-li-dialogue">
  31                                 1line-bigicon1
  32                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  33                         </li>
  34                         <li class="ui-li-dialogue">
  35                                 1line-bigicon2
  36                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  37                                 <span class="ui-li-text-sub">Sub text</span>
  38                         </li>
  39                         <li class="ui-li-dialogue">
  40                                 1line-bigicon4
  41                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  42                                 <div data-role="button" data-inline="true">Button</div>
  43                         </li>
  44                         <li class="ui-li-dialogue">
  45                                 1line-bigicon5
  46                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  47                                 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  48                         </li>
  49                         <li class="ui-li-dialogue">
  50                                 1line-bigicon6
  51                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  52                                 <select name="flip-11" id="flip-11" data-role="slider">
  53                                         <option value="off"></option>
  54                                         <option value="on"></option>
  55                                 </select>
  56                         </li>
  57                         <li class="ui-li-dialogue">
  58                                 <form><input type="checkbox" data-style="check" name="c1line-check2" /></form>
  59                                 1line-check1
  60                                 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  61                         </li>
  62                         <li class="ui-li-dialogue">
  63                                 <form><input type="radio" /></form>
  64                                 1line-radio3
  65                                 <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
  66                         </li>
  67                         <li class="ui-li-has-multiline ui-li-dialogue">
  68                                 2line
  69                                 <span class="ui-li-text-sub">Subtext</span>
  70                         </li>
  71                         <li class="ui-li-has-multiline ui-li-dialogue">
  72                                 2line-2sub
  73                                 <span class="ui-li-text-sub">Subtext</span>
  74                                 <span class="ui-li-text-sub2">Subtext2</span>
  75                         </li>
  76                         <li class="ui-li-has-multiline ui-li-dialogue">
  77                                 2line-btn1
  78                                 <span class="ui-li-text-sub">Subtext</span>
  79                                 <div data-role="button" data-inline="true">button</div>
  80                         </li>
  81                         <li class="ui-li-has-multiline ui-li-dialogue">
  82                                 <form><input type="checkbox"  name="c2line-check1" /></form>
  83                                 2line-check
  84                                 <span class="ui-li-text-sub">Subtext</span>
  85                         </li>
  86                         <li class="ui-li-has-multiline ui-li-dialogue">
  87                                 <form><input type="radio" /></form>
  88                                 2line-radio1
  89                                 <span class="ui-li-text-sub">Subtext</span>
  90                         </li>
  91                         <li class="ui-li-has-multiline ui-li-dialogue">
  92                                 2line-toggle-setting
  93                                 <span class="ui-li-text-sub">Subtext</span>
  94                                 <select name="flip-11" id="flip-11" data-role="slider">
  95                                         <option value="off"></option>
  96                                         <option value="on"></option>
  97                                 </select>
  98                         </li>
  99
 100                         <li data-role="list-divider" data-style="dialogue">Dialogue (with link)</li>
 101                         <li class="ui-li-dialogue">
 102                                 <a>1line (with link)</a>
 103                         </li>
 104                         <li class="ui-li-dialogue">
 105                                 <a>
 106                                 1line-sub (with link)
 107                                 <span class="ui-li-text-sub">subtext</span>
 108                                 </a>
 109                         </li>
 110                         <li class="ui-li-dialogue">
 111                                 <a>
 112                                         1line-btn1 (with link)
 113                                         <div data-role="button" data-inline="true">Button</div>
 114                                 </a>
 115                         </li>
 116                         <li class="ui-li-dialogue">
 117                                 <a>
 118                                         1line-circle button (with link)
 119                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 120                                 </a>
 121                         </li>
 122                         <li class="ui-li-dialogue">
 123                                 <a>
 124                                         1line-toggle (with link)
 125                                         <select name="flip-11" id="flip-11" data-role="slider">
 126                                                 <option value="off"></option>
 127                                                 <option value="on"></option>
 128                                         </select>
 129                                 </a>
 130                         </li>
 131                         <li class="ui-li-dialogue">
 132                                 <a>
 133                                         1line-bigicon1 (with link)
 134                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 135                                 </a>
 136                         </li>
 137                         <li class="ui-li-dialogue">
 138                                 <a>
 139                                         1line-bigicon2 (with link)
 140                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 141                                         <span class="ui-li-text-sub">Sub text</span>
 142                                 </a>
 143                         </li>
 144                         <li class="ui-li-dialogue">
 145                                 <a>
 146                                         1line-bigicon4 (with link)
 147                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 148                                         <div data-role="button" data-inline="true">Button</div>
 149                                 </a>
 150                         </li>
 151                         <li class="ui-li-dialogue">
 152                                 <a>
 153                                         1line-bigicon5 (with link)
 154                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 155                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 156                                 </a>
 157                         </li>
 158                         <li class="ui-li-dialogue">
 159                                 <a>
 160                                         1line-bigicon5 (with link)
 161                                         <img src="thumbnail.jpg" class="ui-li-bigicon">
 162                                         <select name="flip-11" id="flip-11" data-role="slider">
 163                                                 <option value="off"></option>
 164                                                 <option value="on"></option>
 165                                         </select>
 166                                 </a>
 167                         </li>
 168                         <li class="ui-li-dialogue">
 169                                 <a>
 170                                         <form><input type="checkbox" data-style="check" name="c1line-check2" /></form>
 171                                         1line-check1 (with link)
 172                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 173                                 </a>
 174                         </li>
 175                         <li class="ui-li-dialogue">
 176                                 <a>
 177                                         <form><input type="radio" /></form>
 178                                         1line-radio3 (with link)
 179                                         <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
 180                                 </a>
 181                         </li>
 182                         <li class="ui-li-has-multiline ui-li-dialogue">
 183                                 <a>
 184                                         2line (with link)
 185                                         <span class="ui-li-text-sub">Subtext</span>
 186                                 </a>
 187                         </li>
 188                         <li class="ui-li-has-multiline ui-li-dialogue">
 189                                 <a>
 190                                         2line-2sub (with link)
 191                                         <span class="ui-li-text-sub">Subtext</span>
 192                                         <span class="ui-li-text-sub2">Subtext2</span>
 193                                 </a>
 194                         </li>
 195                         <li class="ui-li-has-multiline ui-li-dialogue">
 196                                 <a>
 197                                         2line-btn1 (with link)
 198                                         <span class="ui-li-text-sub">Subtext</span>
 199                                         <div data-role="button" data-inline="true">button</div>
 200                                 </a>
 201                         </li>
 202                         <li class="ui-li-has-multiline ui-li-dialogue">
 203                                 <a>
 204                                         <form><input type="checkbox"  name="c2line-check1" /></form>
 205                                         2line-check (with link)
 206                                         <span class="ui-li-text-sub">Subtext</span>
 207                                 </a>
 208                         </li>
 209                         <li class="ui-li-has-multiline ui-li-dialogue">
 210                                 <a>
 211                                         <form><input type="radio" /></form>
 212                                         2line-radio1 (with link)
 213                                         <span class="ui-li-text-sub">Subtext</span>
 214                                 </a>
 215                         </li>
 216                         <li class="ui-li-has-multiline ui-li-dialogue">
 217                                 <a>
 218                                         2line-toggle-setting (with link)
 219                                         <span class="ui-li-text-sub">Subtext</span>
 220                                         <select name="flip-11" id="flip-11" data-role="slider">
 221                                                 <option value="off"></option>
 222                                                 <option value="on"></option>
 223                                         </select>
 224                                 </a>
 225                         </li>
 226                 </ul>
 227         </div>
 228         <div data-role="footer">
 229         </div>
 230 </div>
 231