Note |
---|
This helper script is supported since 2.3. |
You can make your own style listview with SnapListMarqueeStyle as the following.
In this example, text of list item scrolls horizontally and the sub text appears if the list item is placed in the middle of the screen.You can add a multiline style listview as follows:
<div class="ui-page ui-page-active" id="snaplistTest"> <header class="ui-header"> <h2 class="ui-title">Bottom Button</h2> </header> <div class="ui-content"> <ul class="ui-listview ui-snap-listview expand-list" id="snapList"> <li class="li-has-2line"> <div class="ui-marquee ui-marquee-gradient">1.SnapListview with Marquee SnapListview with Marquee</div> <div class="li-text-sub ui-li-sub-text">sub-text</div> </li> <li class="li-has-2line"> <div class="ui-marquee ui-marquee-gradient">2.SnapListview with Marquee SnapListview with Marquee</div> <div class="li-text-sub ui-li-sub-text">sub-text</div> </li> <li class="li-has-2line"> <div class="ui-marquee ui-marquee-gradient">3.SnapListview with Marquee SnapListview with Marquee</div> <div class="li-text-sub ui-li-sub-text">sub-text</div> </li> <li class="li-has-2line"> <div class="ui-marquee ui-marquee-gradient">4.SnapListview with Marquee SnapListview with Marquee</div> <div class="li-text-sub ui-li-sub-text">sub-text</div> </li> </ul> </div> </div>
In CSS code, you can make your list animation style as follows:
.ui-listview.expand-list li.li-has-2line .ui-marquee{ -webkit-transform: translate3d(0, 16px, 0); -webkit-transition: all ease .5s; } .ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-marquee{ -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all ease 1s; } .ui-listview.expand-list li.li-has-2line .ui-li-sub-text{ -webkit-transform: translate3d(0, -20px, 0); opacity: 0; -webkit-transition: all ease .5s; } .ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-li-sub-text{ -webkit-transform: translate3d(0, 0, 0); opacity: 1; -webkit-transition: all ease 1s; }
In javascript code, you can make your list as SnapListview component as follows:
<script> var page = document.getElementById("snaplistTest"), list = document.getElementById("snapList"), listHelper; page.addEventListener( "pageshow", function() { listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000}); }); page.addEventListener( "pagehide", function() { listHelper.destroy(); }); </script>
Option | Input type | Default value | Description |
---|---|---|---|
marqueeDelay | number | 0 | Sets the delay time for marquee component. The unit of time is millisecond. |
Method | Description |
---|---|
create ( ) |
Create related components for SnapListMarqueeStyle. |
create
Create related components for SnapListMarqueeStyle.
tau.helper.SnapListMarqueeStyle.create( HTMLElement, options )
Since: 2.3
SnapListMarqueeStyle Object.
Return value:
Type | Description |
---|---|
object | SnapListMarqueeStyle |
Code example:
<ul class="ui-listview ui-snap-listview" id="snapList"> <li>some element or text</li> </ul> <script> var list = document.getElementById("snapList"), listHelper; // create helper listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000}); </script>
destroy
Destroy related components for SnapListMarqueeStyle.
destroy ( )
Since: 2.3
No return value
Code example:
<ul class="ui-listview ui-snap-listview" id="snapList"> <li>some element or text</li> </ul> <script> var list = document.getElementById("snapList"), listHelper; // create helper listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000}); // destroy helper listHelper.destroy(); </script>