Synopsis
- LZX: basescrollbar
- JavaScript: basescrollbar
- Type: Class
- Access: public
- Topic: Components.Base Components
- Declared in: lps/components/base/basescrollbar.lzx
Description
If you want to create a scrollbar with a custom look, you can use
basescrollbar along with helper classes
basescrolltrack,
basescrollthumb, and
basescrollarrow. These classes will allow you
to change resources, colors, and the position or presence of various
elements.
Example 24. An unconventional scrollbar
<canvas height="120" bgcolor="silver" maxtextheight="700">
<class name="myscrollbar" extends="basescrollbar" width="20">
<view name="scrolltrack" width="100%" options="releasetolayout">
<basescrolltrack x="5" direction="-1"
width="${parent.width-10}" height="${parent.thumb.y}"
bgcolor="yellow"/>
<basescrollthumb name="thumb" x="1" width="${parent.width-2}"
bgcolor="green" />
<basescrolltrack x="5" direction="1"
y="${parent.thumb.y+parent.thumb.height}"
width="${parent.width-10}"
height="${parent.height - parent.thumb.y - parent.thumb.height}"
bgcolor="yellow"/>
</view>
<basescrollarrow direction="-1"
x="2" bgcolor="yellow" >
<text>up</text>
</basescrollarrow>
<basescrollarrow direction="1"
x="2" bgcolor="yellow" >
<text>dn</text>
</basescrollarrow>
<resizelayout spacing="4"/>
</class>
<view x="10" y="10" bgcolor="white"
width="200" height="100" clip="true">
<text multiline="true" width="180">
Man through his scientific genius has been able to draw distance and
save time and space. He has been able to carry highways through the
stratosphere. We read just the other day that a rocket plane went 1900
miles in one hour. Twice as fast as the speed of sound. This is the
new age. Bob Hope has described this new age, this jet age; it is an
age in which planes will be moving so fast that we will have a
non-stop flight from New York to Los Angeles, when you start out you
might develop the hiccups and you will hic in New York and cup in Los
Angeles. This is an age in which it will be possible to leave Tokyo on
a Sunday morning and arrive in Seattle, Washington on the preceding
Saturday night. When your friends meet you at the airport and ask what
time did you leave Tokyo, you will have to say I left tomorrow. That
is this new age. We live in one world geographically. We face the
great problem of making it one spiritually.
<br/>
Through our scientific means we have made of the world a
neighborhood and now the challenge confronts us through our
moral and spiritual means to make of it a brotherhood. We must
live together, we are not independent we are interdependent. We
are all involved in a single process. Whatever affects one
directly affects all indirectly for we are tied together in a
single progress. We are all linked in the great chain of
humanity.
<br/>
Martin Luther King, Jr.
<br/>
11 August 1956
</text>
<myscrollbar/>
</view>
</canvas>
Scrollbar arrows are optional or may be placed anywhere within the
scrollbar. The thumb and track elements expect to be inside a view
named scrolltrack. It may seem odd that the
scrolltrack is placed twice, but this allows a more flexible
appearance as well as particular behaviors that you may want to
trigger differently when the user clicks the track to scroll up or
down.
For another example of using basescrollbar,
you can look at lps/components/lz/scrollbar.lzx to see the code for
the lz scrollbar class. An easy way to make
your own scrollbar is to copy that file and replace resources and
modify attributes or views to suit your design goals.