pp108 : Roller

Roller

  


Enables the scrolling behavior of HTML elements such as DIV and UL.

Syntax

HTML

 
<div id=rollerID class="roller"> ... </div>

Scripting

application.addType(rollerID, "wcp.library.ui.Roller")



The various properties and methods defined for this component are as follows:

Table 1. List of Properties

Property

Description

direction

String. Determines the type of roller.

  • vertical: Roller is displayed for vertical scrolling.
  • horizontal: Default. Roller is displayed for horizontal scrolling.

pagination

String. Determines whether to hide the default pagination controls or not.

  • visible: Default. Pagination controls are visible.
  • hidden: Pagination controls are hidden.
    This property can be used when external controls are used.

rollType

String. Determines the type of scrolling action.

  • auto: Items are scrolled automatically without any roller controls.
  • continuous: Items are scrolled horizontally (left or right), on placing the mouse pointer on the roller controls. Clicking a roller control directly scrolls to the first or last set of items.
  • item: Items are scrolled one by one on clicking a roller control.
  • page: Items are scrolled by sets of visible items on clicking a roller control.

 

Table 2. List of Methods

Method

Description

getDirection()

Retrieves the scroll-direction of roller.

registerItem(sHTML)

Registers the given HTML string as a roller item.

  • sHTML: Required. String that specifies the HTML string to be added as a roller item.

scrollNext()

Scrolls items towards the right or towards the bottom according to the specifiedrollTypeanddirection.

scrollPrevious()

Scrolls items towards the left or towards the top depending on the specifiedrollTypeanddirection.

scrollToItem(htmlElement Or htmlElementId)

Scrolls to display to the specified element or the element with the specified id.

setDirection(sDirection)

Sets the scroll-direction of roller. The possible values arehorizontalandvertical.

setScrollbar(bScroll)

Removes pagination bar and sets scrollbar to roller. Possible values are:

  • true: removes pagination bar and sets scrollbar to roller.
  • false: sets pagination bar and removes scrollbar.

start()

Starts the scrolling action of roller items.

stop()

Stops the scrolling action of roller items.

 

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
	<head> 
		<title>Roller Demo</title>
		<script src="/cordys/wcp/application.js" ></script>
	</head>
	
	<body scroll="no" >
		<div style="width:100%; height:100%; overflow:auto;" >
			<div class="roller" id="roller1" direction="horizontal" rollType="continuous" >
				<div class="atask" >
					<div class="ataskdiv" taskgroupid="bizProcess" >
						<IMG src="/cordys/wcp/theme/default/image/wizard/isvpcreator.png" > </IMG>
						<LABEL>Model &amp; Manage</LABEL>
						<H1>Business Processes</H1>
					</div>
				</div>
				<div class="atask" >
					<div class="ataskdiv" taskgroupid="bizData" >
						<IMG src="/cordys/wcp/theme/default/image/wizard/isvpcreatorapplicationconnectors.png" />
						<LABEL>Model &amp; Manage</LABEL>
						<H1>Business Data</H1> 
					</div>
				</div>
				<div class="atask" >
					<div class="ataskdiv" taskgroupid="bizRules" >
						<IMG src="/cordys/wcp/theme/default/image/wizard/isvpcreatorcomponentdependencies.png" />
						<LABEL>Model &amp; Manage</LABEL>
						<H1>Business Rules</H1>
					</div>
				</div>
				<div class="atask" > 
					<div class="ataskdiv" taskgroupid="bizNotifications" >
						<IMG src="/cordys/wcp/theme/default/image/wizard/isvpcreatorcomponents.png" />
						<LABEL>Model &amp; Manage</LABEL>
						<H1>Tasks &amp; Notifications</H1>
					</div>
				</div>
				<div class="atask" >
					<div class="ataskdiv" taskgroupid="xforms" >
						<IMG src="/cordys/wcp/theme/default/image/wizard/isvpcreatorfinish.png" />
						<LABEL>Model &amp; Manage</LABEL>
						<H1>XForms</H1>
					</div>
				</div>
				<div class="atask" >
					<div class="ataskdiv" taskgroupid="bizSchedules" >
						<IMG src="/cordys/wcp/theme/default/image/wizard/isvpcreatorfinish.png" />
						<LABEL>Model &amp; Manage</LABEL>
						<H1>Schedules</H1>
					</div>
				</div>
				<div class="atask" >
					<div class="ataskdiv" taskgroupid="manageCordys" taskgroupname="Manage &amp; Monitor Cordys Network" >
						<IMG src="/cordys/wcp/theme/default/image/wizard/isvploaderprompts.png" />
						<LABEL>Manage &amp; Monitor</LABEL> 
						<H1>Cordys Network</H1>
					</div>
				</div> 
				<div class="atask" >
					<div class="ataskdiv" taskgroupid="utilities" taskgroupname="Other Utilities" >
						<IMG src="/cordys/wcp/theme/default/image/wizard/selectedisvps.png" />
						<LABEL>Other</LABEL>
						<H1>Utilities</H1>
					</div>
				</div>
				<div class="atask" >
					<div class="ataskdiv" taskgroupid="helpinfo" taskgroupname="Find Help &amp; Info" >
						<IMG src="/cordys/wcp/theme/default/image/wizard/virtualdirectories.png" />
						<LABEL>Find</LABEL>
						<H1>Help &amp; Info</H1>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>