Scrolling Tab

Dose anyone know that how to make scrolling tab?
ex) when you need 30 tabs but want to show 5 tabs on the screen.
So, the rest of tabs can be accessed by arrow button.

subj =)
me to want it to know....

I've been wondering that too.

I do have an idea. I'll try and put it together tomorrow and will try and post a link to an example by tomorrow night.

Hi Carl,

Were you ever able to create an example for scrolling tabs? If so, can you please direct me to the link where you had it posted?

Thank you,

Here is the solution,

First maintain an array of index for your tabls ([0,1,2,...]).

Next create 2 functions,

function back() {
viewIdx.unshift(viewIdx.pop());
tab.setViewIndices(viewIdx);
}

function forward() {
viewIdx.push(viewIdx.shift());
tab.setViewIndices(viewIdx);
}

Now put a forward and backward images on your page and add a click event to them. On forward click call forward function and backward click call backward function. You can download images from a lot of websites such as www.bestbuy.com, etc ....

I can post a complete example if this doesn't make sense.

Cheers,

It makes sense ... a complete example (if you have a URL) would be awesome. Thanks.

Don't have a place to host it, so here is a simple example. In real world I would replace the buttons with images.

<html>
<head>
<script src="../runtime/lib/aw.js"></script>
<link href="../runtime/styles/aqua/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>

/********************************************************************
Tabs
********************************************************************/

#myTabs {width: 150px; height: 30px;}

/********************************************************************
Items
********************************************************************/

#myTabs .aw-list-item {color: blue}

</style>

<p style="font:menu">
see page source
</p>

<script>

var obj = new AW.UI.Tabs;
obj.setId("myTabs"); // necessary for CSS rules
obj.setItemText(["Tab1", "Tab2", "Tab3", "Tab4", "Tab5", "Tab6", "Tab7", "Tab8", "Tab9", "Tab10"]);
obj.setItemCount(10); // same as setViewCount()
obj.setViewCount(10); // by default view/count takes value from item/count
obj.setSelectedItems([0]);
document.write(obj);

</script>
<div style="border-top: 1px solid #999">
</div>

<p></p>

<script>
var index = 0;
var viewIdx = [0,1,2,3,4,5,6,7,8,9];
var button = new AW.UI.Button;
button.setControlText("<-");
button.setPosition(250,35);
document.write(button);

var button2 = new AW.UI.Button;
button2.setControlText("->");
button2.setPosition(300,35);
document.write(button2);

function back() {
viewIdx.unshift(viewIdx.pop());
obj.setViewIndices(viewIdx);
}

function forward() {
viewIdx.push(viewIdx.shift());
obj.setViewIndices(viewIdx);
}

button.onClick = function(){
back();
}
button2.onClick = function() {
forward();
}

</script>
</body>
</html>

Forum search