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