Creating page buttons dynamically example
//PAGE BUTTONS
var numberOfVozOffPages = 3;
var markerPage = sym.$("vozOffText_goToPage_marker");
var conteudosTexts = sym.$("conteudos_textos");
//empty array that will receive the dynamic symbols
var vozOffPagesButtonsList = [];
for (var i = 0; i < numberOfVozOffPages; i++){
// Create an instance element of a symbol as a child of the
// given parent element
var vozOffPageButton = sym.getSymbol("vozOffText_goToPage_" + i);
//::::set the name/number
vozOffPageButton.setVariable("myNumber", (i+1));
//::::set the left pos for the marker
vozOffPageButton.setVariable("myLeftPos", ((i*30) + i));
//::::set the left pos for the conteudos_textos
vozOffPageButton.setVariable("posConteudos", -(i*300));
//set the text name
var myNumber = vozOffPageButton.getVariable("myNumber");
//myTopicoButton.$("myName").text("0"+(i+1));
vozOffPageButton.$("myName").text("0" + myNumber);
//push it into the array
vozOffPagesButtonsList.push(vozOffPageButton);
}
//a 'for each' loop through the newly populated array.
$.each(vozOffPagesButtonsList, function( count, symbolInTheArray ){
//create a jQuery reference to the DIV element inside the symbol.
var pageButton = $(symbolInTheArray.getSymbolElement());
var myLeftPos = symbolInTheArray.getVariable("myLeftPos");
var myConteudosPos = symbolInTheArray.getVariable("posConteudos");
//now you can bind interactivity to the menu items' DIVs
//::::MOUSEOVER
pageButton.bind ("click",function(){
//:::: move the marker
TweenLite.to(markerPage, 0.25, {css:{left:myLeftPos + "px"}, ease:Expo.easeInOut});
//:::: move conteudos_textos
TweenLite.to(conteudosTexts, 0.25, {css:{left:myConteudosPos + "px"}, ease:Expo.easeInOut});
});
//::::MOUSEOVER
pageButton.bind ("mouseover",function(){
var pageButtonOver = sym.getSymbol(pageButton).$("myOver");
TweenLite.to(pageButtonOver, 0.25, {css:{opacity:1}, ease:Linear.easeNone});
});
//::::MOUSEOUT
pageButton.bind ("mouseout",function(){
var pageButtonOver = sym.getSymbol(pageButton).$("myOver");
TweenLite.to(pageButtonOver, 0.25, {css:{opacity:0}, ease:Linear.easeNone});
});
});