<li><a href="#">Rod Tarker</a></li>
<li data-role="list-divider">S</li>
<li><a href="#">Sawyer Wakefield</a></li>
- <li data-role="list-divider">A</li>
- <li><a href="#">Adam Kinkaid</a></li>
- <li><a href="#">Alex Wickerham</a></li>
- <li><a href="#">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="#">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="#">Caleb Booth</a></li>
- <li><a href="#">Christopher Adams</a></li>
- <li><a href="#">Culver James</a></li>
- <li data-role="list-divider">D</li>
- <li><a href="#">David Walsh</a></li>
- <li><a href="#">Drake Alfred</a></li>
- <li data-role="list-divider">E</li>
- <li><a href="#">Elizabeth Bacon</a></li>
- <li><a href="#">Emery Parker</a></li>
- <li><a href="#">Enid Voldon</a></li>
- <li data-role="list-divider">F</li>
- <li><a href="#">Francis Wall</a></li>
- <li data-role="list-divider">G</li>
- <li><a href="#">Graham Smith</a></li>
- <li><a href="#">Greta Peete</a></li>
- <li data-role="list-divider">H</li>
- <li><a href="#">Harvey Walls</a></li>
- <li data-role="list-divider">M</li>
- <li><a href="#">Mike Farnsworth</a></li>
- <li><a href="#">Murray Vanderbuilt</a></li>
- <li data-role="list-divider">N</li>
- <li><a href="#">Nathan Williams</a></li>
- <li data-role="list-divider">P</li>
- <li><a href="#">Paul Baker</a></li>
- <li><a href="#">Pete Mason</a></li>
- <li data-role="list-divider">R</li>
- <li><a href="#">Rod Tarker</a></li>
- <li data-role="list-divider">S</li>
- <li><a href="#">Sawyer Wakefield</a></li>
- <li data-role="list-divider">A</li>
- <li><a href="#">Adam Kinkaid</a></li>
- <li><a href="#">Alex Wickerham</a></li>
- <li><a href="#">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="#">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="#">Caleb Booth</a></li>
- <li><a href="#">Christopher Adams</a></li>
- <li><a href="#">Culver James</a></li>
- <li data-role="list-divider">D</li>
- <li><a href="#">David Walsh</a></li>
- <li><a href="#">Drake Alfred</a></li>
- <li data-role="list-divider">E</li>
- <li><a href="#">Elizabeth Bacon</a></li>
- <li><a href="#">Emery Parker</a></li>
- <li><a href="#">Enid Voldon</a></li>
- <li data-role="list-divider">F</li>
- <li><a href="#">Francis Wall</a></li>
- <li data-role="list-divider">G</li>
- <li><a href="#">Graham Smith</a></li>
- <li><a href="#">Greta Peete</a></li>
- <li data-role="list-divider">H</li>
- <li><a href="#">Harvey Walls</a></li>
- <li data-role="list-divider">M</li>
- <li><a href="#">Mike Farnsworth</a></li>
- <li><a href="#">Murray Vanderbuilt</a></li>
- <li data-role="list-divider">N</li>
- <li><a href="#">Nathan Williams</a></li>
- <li data-role="list-divider">P</li>
- <li><a href="#">Paul Baker</a></li>
- <li><a href="#">Pete Mason</a></li>
- <li data-role="list-divider">R</li>
- <li><a href="#">Rod Tarker</a></li>
- <li data-role="list-divider">S</li>
- <li><a href="#">Sawyer Wakefield</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<li data-role="list-divider">Virtual List</li>
<li><a href="virtuallist-normal.html">Virtual List Normal Style 1line</a></li>
<li><a href="virtuallist-normal_3_1_4.html">Virtual List Normal Style 1line-btn1</a></li>
- <li><a href="virtuallist-normal_3_1_6.html">Virtual List Normal Style 1line-toggle</a></li>
<li><a href="virtuallist-normal_3_1_14.html">Virtual List Normal Style 1line-bigicon5</a></li>
<li><a href="virtuallist-normal_3_2_7.html">Virtual List Normal Style 2line-star1</a></li>
</ul>
- <div data-role="page" id="virtuallist-normal_1line" class="virtuallist_demo_page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Virtual List - Normal Style 1line</h1>
- </div>
- <div data-role="content">
- <script id="tmp-1line" type="text/x-jquery-tmpl">
- <li class="ui-li-1line"><span class="ui-li-text-main">${NAME}</span></li>
- </script>
+<div data-role="page" id="virtuallist-normal_1line" class="virtuallist_demo_page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Virtual List - Normal Style 1line</h1>
+ </div>
+ <style type="text/css">
+#virtuallist-normal_1line_ul li .ui-li-text-main {
+ max-width:95%;
+ display:inline-block;
+ overflow:hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+ </style>
+ <div data-role="content">
+ <script id="tmp-1line" type="text/x-jquery-tmpl">
+ <li class="ui-li-1line">
+ <span class="ui-li-text-main">${NAME}</span>
+ </li>
+ </script>
- <ul id="virtuallist-normal_1line_ul" data-role="virtuallistview" data-template="tmp-1line" data-dbtable="JSON_DATA" data-row="100">
- </ul>
- </div>
- <div data-role="footer">
- </div>
+ <ul id="virtuallist-normal_1line_ul" data-role="virtuallistview" data-template="tmp-1line" data-dbtable="JSON_DATA" data-row="100">
+ </ul>
+ </div>
+ <div data-role="footer">
</div>
+</div>
<div data-role="header" data-position="fixed">
<h1>Virtual List - Normal Style 1line-bigicon5</h1>
</div>
+ <style type="text/css">
+#virtuallist-normal_1line-bigicon5_ul li .ui-li-text-main {
+ max-width:75%;
+ display:inline-block;
+ overflow:hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+ </style>
<div data-role="content">
<script id="tmp-1line-bigicon5" type="text/x-jquery-tmpl">
<li class="ui-li-1line-bigicon5">
- <span class="ui-li-text-main">${NAME}</span>
<img src=${TEAM_LOGO} class="ui-li-bigicon">
+ <span class="ui-li-text-main">${NAME}</span>
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</li>
</script>
- <div data-role="page" id="virtuallist-normal_1line-btn1" class="virtuallist_demo_page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Virtual List - Normal Style 1line-btn1</h1>
- </div>
- <div data-role="content">
- <script id="tmp-1line-btn1" type="text/x-jquery-tmpl">
- <li class="ui-li-1line-btn1">
- <span class="ui-li-text-main">${NAME}</span>
- <div data-role="button" data-inline="true">${ACTIVE}</div>
- </li>
- </script>
- <ul id="virtuallist-normal_1line-btn1_ul" data-role="virtuallistview" data-template="tmp-1line-btn1" data-dbtable="JSON_DATA" data-row="100">
- </ul>
- </div>
- <div data-role="footer">
- </div>
+<div data-role="page" id="virtuallist-normal_1line-btn1" class="virtuallist_demo_page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Virtual List - Normal Style 1line-btn1</h1>
</div>
+ <style type="text/css">
+#virtuallist-normal_1line-btn1_ul li .ui-li-text-main {
+ max-width:62%;
+ display:inline-block;
+ overflow:hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+#virtuallist-normal_1line-btn1_ul li .ui-btn {
+}
+ </style>
+ <div data-role="content">
+ <script id="tmp-1line-btn1" type="text/x-jquery-tmpl">
+ <li class="ui-li-1line-btn1">
+ <span class="ui-li-text-main">${NAME}</span>
+ <div data-role="button" data-inline="true">${ACTIVE}</div>
+ </li>
+ </script>
+ <ul id="virtuallist-normal_1line-btn1_ul" data-role="virtuallistview" data-template="tmp-1line-btn1" data-dbtable="JSON_DATA" data-row="100">
+ </ul>
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
<div data-role="header" data-position="fixed">
<h1>Virtual List - Normal Style 2line-star1</h1>
</div>
+ <style type="text/css">
+ #virtuallist-normal_2line-star1_ul > li .ui-li-text-main {
+ max-width:95%;
+ display:inline-block;
+ overflow:hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ #virtuallist-normal_2line-star1_ul > li .ui-li-text-sub2 {
+ max-width:60%;
+ width: auto;
+ margin-right:1em;
+ top: 1.59rem;
+ }
+ </style>
<div data-role="content">
<script id="tmp-2line-star1" type="text/x-jquery-tmpl">
<li class="ui-li-has-multiline">
- ${NAME}
+ <span class="ui-li-text-main">${NAME}</span>
<span class="ui-li-text-sub">${ACTIVE}
<img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
</span>
- <span class="ui-li-text-sub2" style="margin-right:1em;">${FROM}</span>
+ <span class="ui-li-text-sub2">${FROM}</span>
</li>
</script>
<li id="progressbarTest" ><div data-role="progressbar" id="progressbar"></div></li>
<li data-role="list-divider">Progress Pending</li>
- <li id="pendingTest" ><div data-role="progressing" data-style="pending" id="pending"></div></li>
+ <li id="pendingTest" ><div data-role="progress" data-style="pending" id="pending"></div></li>
<li data-role="list-divider">Progress ~ing</li>
<li id="progressingTest" >
- <div data-role="progressing" data-style="circle" id="progressing"></div>
+ <div data-role="progress" data-style="circle" id="progressing" style="right:10px"></div>
Loading..
</li>
</ul>