<div data-role="page" id="genlist-dialog" data-add-back-btn="true" data-fit-page-to-window="true">
<div data-role="header" data-position="fixed">
- <h1>Dialog lists</h1>
+ <h1>DIALOG LISTS</h1>
</div>
<div class="content" data-role="content" data-scroll="y">
+ <form>
<ul data-role="listview">
-
+ <li data-role="list-divider" data-style="dialogue">DIALOGUE</li>
<li class="ui-li-dialogue">
1line
</li>
<li class="ui-li-dialogue">
- <a>1line (with link)</a>
- </li>
- <li class="ui-li-dialogue">
1line-sub
<span class="ui-li-text-sub">subtext</sub>
</li>
<li class="ui-li-dialogue">
- <a>
- 1line-sub (with link)
- <span class="ui-li-text-sub">subtext</span>
- </a>
- </li>
- <li class="ui-li-dialogue">
- 1line-setting
- <span class="ui-li-text-sub">Sub text</span>
- </li>
- <li class="ui-li-dialogue">
1line-btn1
- <div data-role="button" data-inline="true">Text Button</div>
+ <div data-role="button" data-inline="true">Button</div>
</li>
<li class="ui-li-dialogue">
- 1line-btn2
+ 1line-circle button
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</li>
<li class="ui-li-dialogue">
</li>
<li class="ui-li-dialogue">
1line-bigicon1
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
</li>
<li class="ui-li-dialogue">
1line-bigicon2
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<span class="ui-li-text-sub">Sub text</span>
</li>
<li class="ui-li-dialogue">
1line-bigicon4
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <div data-role="button" data-inline="true">Text Button</div>
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
+ <div data-role="button" data-inline="true">Button</div>
</li>
<li class="ui-li-dialogue">
1line-bigicon5
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</li>
<li class="ui-li-dialogue">
1line-bigicon6
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<select name="flip-11" id="flip-11" data-role="slider">
<option value="off"></option>
<option value="on"></option>
</select>
</li>
- <li class="ui-li-has-checkbox ui-li-dialogue">
- <form><input type="checkbox" data-style="check" name="c1line-check1" /></form>
+ <li class="ui-li-dialogue">
+ <input type="checkbox" data-style="check" name="c1line-check2" />
1line-check1
- </li>
- <li class="ui-li-has-checkbox ui-li-dialogue">
- <form><input type="checkbox" data-style="check" name="c1line-check2" /></form>
- 1line-check2
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</li>
- <li class="ui-li-has-checkbox ui-li-dialogue">
- <form><input type="checkbox" data-style="check" name="c1line-check3" /></form>
- 1line-check3
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
- <li class="ui-li-has-checkbox ui-li-dialogue">
- <form><input type="checkbox" data-style="check" name="c1line-check4" /></form>
- 1line-check4
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
- </li>
- <li class="ui-li-has-radio ui-li-dialogue">
- <form><input type="radio" /></form>
- 1line-radio1
- </li>
- <li class="ui-li-has-radio ui-li-dialogue">
- <form><input type="radio" /></form>
+ <li class="ui-li-dialogue">
+ <input type="radio" name="radio" />
1line-radio3
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</li>
- <li class="ui-li-has-radio ui-li-dialogue">
- <form><input type="radio" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- 1line-radio4
- </li>
- <li class="ui-li-has-radio ui-li-dialogue">
- <form><input type="radio" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- 1line-radio5
- <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
- </li>
-
- <li class="ui-li-multiline ui-li-dialogue">
+ <li class="ui-li-has-multiline ui-li-dialogue">
2line
<span class="ui-li-text-sub">Subtext</span>
</li>
-
- <li class="ui-li-multiline ui-li-dialogue">
- 2line-sub-main
- <span class="ui-li-text-sub">Subtext</span>
- </li>
-
- <li class="ui-li-multiline ui-li-dialogue">
+ <li class="ui-li-has-multiline ui-li-dialogue">
2line-2sub
<span class="ui-li-text-sub">Subtext</span>
<span class="ui-li-text-sub2">Subtext2</span>
</li>
-
- <li class="ui-li-multiline ui-li-dialogue">
+ <li class="ui-li-has-multiline ui-li-dialogue">
2line-btn1
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true">button</div>
</li>
-
- <li class="ui-li-2line-btn1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-btn1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call"></div>
- </li>
-
- <li class="ui-li-2line-btn2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-btn2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- </li>
-
- <li class="ui-li-2line-star1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-star1</span>
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
- <span class="ui-li-text-sub">Subtext</span>
- <span class="ui-li-text-sub2">Subtext2</span>
- </li>
-
- <li class="ui-li-2line-star2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-star2</span>
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
- <span class="ui-li-text-sub"><img src="00_winset_icon_favorite_on.png">Subtext</span>
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
- </li>
-
- <li class="ui-li-2line-setting ui-li-dialogue">
- <span class="ui-li-text-main">2line-setting</span>
- <span class="ui-li-text-sub">Subtext</span>
- </li>
-
- <li class="ui-li-2line-toggle-setting ui-li-dialogue">
- <span class="ui-li-text-main">2line-toggle-setting</span>
- <span class="ui-li-text-sub">Subtext</span>
- <select name="flip-11" id="flip-11" data-role="slider">
- <option value="off"></option>
- <option value="on"></option>
- </select>
- </li>
-
- <li class="ui-li-2line-btn-setting ui-li-dialogue">
- <span class="ui-li-text-main">2line-btn-setting</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- </li>
-
- <li class="ui-li-2line-bigicon0 ui-li-dialogue">
- <span class="ui-li-text-main">2line-bigicon0</span>
- <span class="ui-li-text-sub">Subtext<img src="00_winset_icon_favorite_on.png"></span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- </li>
-
- <li class="ui-li-2line-bigicon1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-bigicon1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- </li>
-
- <li class="ui-li-2line-bigicon2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-bigicon2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-sub2">Subtext2</span>
- </li>
-
- <li class="ui-li-2line-bigicon3 ui-li-dialogue">
- <span class="ui-li-text-main">2line-bigicon3</span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <li class="ui-li-has-multiline ui-li-dialogue">
+ <input type="checkbox" name="c2line-check1" />
+ 2line-check
+ <span class="ui-li-text-sub">Subtext</span>
</li>
-
- <li class="ui-li-2line-bigicon4 ui-li-dialogue">
- <span class="ui-li-text-main">2line-bigicon4</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <li class="ui-li-has-multiline ui-li-dialogue">
+ <input type="radio" name="radio" />
+ 2line-radio1
+ <span class="ui-li-text-sub">Subtext</span>
</li>
-
- <li class="ui-li-2line-check1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-check1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="checkbox" data-style="check" name="c2line-check1" /></form>
+ <li class="ui-li-has-multiline ui-li-dialogue">
+ 2line-toggle-setting
+ <span class="ui-li-text-sub">Subtext</span>
+ <select name="flip-11" id="flip-11" data-role="slider">
+ <option value="off"></option>
+ <option value="on"></option>
+ </select>
</li>
- <li class="ui-li-2line-check2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-check2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="checkbox" data-style="check" name="c2line-check2" /></form>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ <li data-role="list-divider" data-style="dialogue">DIALOGUE (WITH LINK)</li>
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>1line (with link)</a>
</li>
-
- <li class="ui-li-2line-check3 ui-li-dialogue">
- <span class="ui-li-text-main">2line-check3</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="checkbox" data-style="check" name="c2line-check3" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 1line-sub (with link)
+ <span class="ui-li-text-sub">subtext</span>
+ </a>
</li>
-
-
- <li class="ui-li-2line-radio1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-radio1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="radio" /></form>
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 1line-btn1 (with link)
+ <div data-role="button" data-inline="true">Button</div>
+ </a>
</li>
-
- <li class="ui-li-2line-radio2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-radio2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <form><input type="radio" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 1line-circle button (with link)
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
</li>
-
-
- <li class="ui-li-2line-colorbar1 ui-li-dialogue">
- <span class="ui-li-color-bar"></span>
- <span class="ui-li-text-main">2line-colorbar1</span>
- <span class="ui-li-text-sub">Subtext
- <img src="00_winset_icon_favorite_on.png">
- <img src="00_winset_icon_favorite_on.png">
- <img src="00_winset_icon_favorite_on.png">
- </span>
- <span class="ui-li-text-sub2">Subtext2</span>
- <div data-role="button" data-inline="true">button</div>
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 1line-toggle (with link)
+ <select name="flip-11" id="flip-11" data-role="slider">
+ <option value="off"></option>
+ <option value="on"></option>
+ </select>
+ </a>
</li>
-
- <li class="ui-li-2line-colorbar3 ui-li-dialogue">
- <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
- <span class="ui-li-text-main">2line-colorbar3<img src="00_winset_icon_favorite_on.png"></span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true">button</div>
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 1line-bigicon1 (with link)
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
+ </a>
</li>
-
- <li class="ui-li-2line-colorbar3 ui-li-dialogue">
- <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
- <span class="ui-li-text-main">2line-colorbar3<img src="00_winset_icon_favorite_on.png"></span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call"></div>
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 1line-bigicon2
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
+ <span class="ui-li-text-sub">Sub text</span>
+ </a>
</li>
-
- <li class="ui-li-2line-colorbar3 ui-li-dialogue">
- <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
- <span class="ui-li-text-main">2line-colorbar3</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 1line-bigicon4 (with link)
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
+ <div data-role="button" data-inline="true">Button</div>
+ </a>
</li>
-
- <li class="ui-li-2line-bigicon8 ui-li-dialogue">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-bigicon8</span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 1line-bigicon5 (with link)
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
</li>
-
- <li class="ui-li-2line-thumb1 ui-li-dialogue">
- <span class="ui-li-text-main">2line-thumb1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 1line-bigicon5 (with link)
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
+ <select name="flip-11" id="flip-11" data-role="slider">
+ <option value="off"></option>
+ <option value="on"></option>
+ </select>
+ </a>
</li>
-
- <li class="ui-li-2line-thumb2 ui-li-dialogue">
- <span class="ui-li-text-main">2line-thumb2<img src="00_winset_icon_favorite_on.png"></span>
- <span class="ui-li-text-sub"><img src="00_winset_icon_favorite_on.png">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ <input type="checkbox" data-style="check" name="c1line-check2" />
+ 1line-check1 (with link)
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
</li>
-
- <li class="ui-li-2line-sub-main-bigicon1 ui-li-dialogue">
- <span class="ui-li-text-sub">Subtext</span>
- <span class="ui-li-text-main">2line-sub-main-bigicon1</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <li class="ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ <input type="radio" name="radio" />
+ 1line-radio3 (with link)
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ </a>
</li>
-
- <li class="ui-li-2line-bigicon-pgbar1 ui-li-dialogue">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-bigicon-pgbar1</span>
- <span class="ui-li-text-sub">Subtext</span>
- <span class="ui-li-text-sub2">Subtext2</span>
- <div data-role="button" data-inline="true">Cancel</div>
- <div data-role="progressbar"></div>
+ <li class="ui-li-has-multiline ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 2line (with link)
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
</li>
-
- <li class="ui-li-2line-bigicon-pgbar2 ui-li-dialogue">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-bigicon-pgbar2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true">button</div>
+ <li class="ui-li-has-multiline ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 2line-2sub (with link)
+ <span class="ui-li-text-sub">Subtext</span>
+ <span class="ui-li-text-sub2">Subtext2</span>
+ </a>
</li>
-
- <li class="ui-li-2line-bigicon-pgbar2 ui-li-dialogue">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-bigicon-pgbar2</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call"></div>
+ <li class="ui-li-has-multiline ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 2line-btn1 (with link)
+ <span class="ui-li-text-sub">Subtext</span>
+ <div data-role="button" data-inline="true">button</div>
+ </a>
</li>
-
- <li class="ui-li-2line-bigicon-pgbar3 ui-li-dialogue">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-bigicon-pgbar3</span>
- <span class="ui-li-text-sub">Subtext</span>
- <span class="ui-li-text-sub2">Subtext2</span>
- <div data-role="progressbar"></div>
+ <li class="ui-li-has-multiline ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ <input type="checkbox" name="c2line-check1" />
+ 2line-check (with link)
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
</li>
-
- <li class="ui-li-2line-icon-bigicon-btn ui-li-dialogue">
- <form><input type="checkbox" data-style="check" name="c2line-icon-bigicon-btn" /></form>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
- <span class="ui-li-text-main">2line-icon-bigicon-btn</span>
- <span class="ui-li-text-sub">Subtext</span>
- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+ <li class="ui-li-has-multiline ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ <input type="radio" name="radio" />
+ 2line-radio1 (with link)
+ <span class="ui-li-text-sub">Subtext</span>
+ </a>
</li>
-
- <li class="ui-li-2line-thumb3 ui-li-dialogue">
- <span class="ui-li-text-main">2line-thumb3<img src="00_winset_icon_favorite_on.png"></span>
- <span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <li class="ui-li-has-multiline ui-li-dialogue ui-li-text-ellipsis">
+ <a>
+ 2line-toggle-setting (with link)
+ <span class="ui-li-text-sub">Subtext</span>
+ <select name="flip-11" id="flip-11" data-role="slider">
+ <option value="off"></option>
+ <option value="on"></option>
+ </select>
+ </a>
</li>
-
</ul>
+ </form>
</div>
<div data-role="footer">
</div>
projects / platform / framework / web / web-ui-fw.git / blobdiff