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

July 31,

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

MZG

September 18,

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

September 19,

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

October 31,

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

November 9,

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

November 9,

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

November 9,

This topic is archived.

Scrolling Tab

See also:

Search

New Data Grid

Version 2