:: Forum >>

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.
LEW
Monday, July 31, 2006
subj =)
me to want it to know....
MZG
Monday, September 18, 2006
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.

Carl
Tuesday, September 19, 2006
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,
Kris
Tuesday, October 31, 2006
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,
-Kris
Thursday, November 9, 2006
It makes sense ... a complete example (if you have a URL) would be awesome. Thanks.
Thursday, November 9, 2006
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>
-Kris
Thursday, November 9, 2006

This topic is archived.


Back to support forum

Forum search