SnapListMarqueeStyle

SnapListMarqueeStyle helper provides helper script to support some creating usable components for list style.
It supports making listview more effective using SnapListview and Marquee component.
Note
This helper script is supported since 2.3.

Table of Contents

  1. How to create SnapListMarqueeStyle
  2. Options
  3. Methods

How to create SnapListMarqueeStyle

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.

HTML Example

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>

CSS Style Example

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;
}

Javascript Example

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>

Options

Option Input type Default value Description
marqueeDelay number 0 Sets the delay time for marquee component. The unit of time is millisecond.

Methods

Summary

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>

Where to Go Next