davidpadua
12/3/2013 - 1:19 AM

Creating page buttons dynamically example

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});
  });

});