Hi... i have a prototype code... this code its a navigation tab like this site http://www.endi.com, see?... the seccion on top?... how i can crean some like that but.. with jquery...
i have the prototype code... but it to difficult by me!! Helpme!!! the code!! //------------------------------------------------rotacion de tabs --------------------------------------------------------------------------- intervalo=0; inPlay = false; totalTabs=5; //total de tabs function getTabData(id, auto) { if(auto==false){ inPlay = false; pausar(); } idCual=id; var url = 'if_tab'+id+'.html'; var myAjax = new Ajax.Request( url, {method: 'get', parameters: null, onLoading: null, onComplete: showResponse} ); } function showResponse (originalRequest) { var newData = originalRequest.responseText; $('tab_content').innerHTML = newData; Element.show('tab_content'); changeState() } function changeState(){ for(i=1; i<=5; i++) Element.removeClassName('tabStages_btn'+i, 'tabStages_act'+i); Element.addClassName('tabStages_btn'+idCual, 'tabStages_act'+idCual); } rotar = function(cursor, auto){ if(idCual+cursor>totalTabs) idCual=1; else if(idCual+cursor<=0) idCual= totalTabs; else idCual += cursor; getTabData(idCual, auto); } activarRotar = function (delay) { if (delay == undefined || delay <=0) delay = 3000; else delay = delay*1000; //tiempo de delay de rotacion de stages if(intervalo == 0) intervalo =setInterval('rotar(1, true);',delay); } pausar = function(){ clearInterval(intervalo); intervalo = 0; if(!inPlay){ Element.removeClassName('play', 'bPause'); Element.addClassName('play', 'bPlay'); inPlay = true; }else{ Element.removeClassName('play', 'bPlay'); Element.addClassName('play', 'bPause'); inPlay = false; activarRotar(delayTime); } } //+++++++++++++++++++++++++++++ TabSets ++++++++++++++++++++++++++++++ ++++++++++++++++= function Tabs(container, tabInicio){ this.next = tabInicio; this.AnteriorTab = tabInicio; this.totalTabs = 5; //total de tabs en set principal this.inPlay = false; this.intervalo = 0; var container = container; } Tabs.prototype.ActivarTab = function (tab, container, auto) { var myAjax = new Ajax.Request(container + '_'+tab+'.html', {method: 'get', parameters: null, onLoading: null, onComplete: show.bind(this, container)} ); var cualDesactivo = $(container+"_btn"+this.AnteriorTab) var cualActivo = $(container+"_btn"+tab) Element.removeClassName(cualDesactivo, container +"_act"+this.AnteriorTab); Element.addClassName(cualActivo, container+"_act"+tab); this.AnteriorTab = this.next = tab; } show = function (container, originalRequest) { var newData = originalRequest.responseText; $(container+'_content').innerHTML = newData; Element.show(container+'_content'); } /* tabs solo con botones de next y previous */ showSlider = function (container, totalTabs) { this.container = container this.cursor = 0; this.totalTabs = totalTabs } showSlider.prototype.loadData = function(where){ cont = this.container; if(this.cursor + where <=0) this.cursor = this.totalTabs else this.cursor += where; var myAjax = new Ajax.Request(this.container + '_'+this.cursor +'.html', {method: 'get', parameters: null, onLoading: null, onException: fallo, onComplete: placeSlider.bind(this, cont)} ); } placeSlider = function (container, originalRequest) { var newData = originalRequest.responseText; $(container+'_content').innerHTML = newData; Element.show(container+'_content'); } fallo = function(t){ Enterate.cursor = 0; Enterate.loadData(1); } //+++++++++++++++++++++++++++++ TabSets ++++++++++++++++++++++++++++++ ++++++++++++++++= loadinHome = function (){ //Mostrar solo en home //striper('ul','striped','li','first, second'); striper('ul','striped3','li','first3, second3'); //striper('ul','striped4','li','second3, first3'); tabEnt = new Tabs('tabEnt', 1); tabEnt.ActivarTab(1,'tabEnt', true); tabMed = new Tabs('tabMed', 1); tabMed.ActivarTab(1,'tabMed', true); getTabData(idCual, true); activarRotar(delayTime); Enterate = new showSlider("tabEnterate", totalTabsEnterate) Enterate.loadData(1); } loadinOpinion = function(){ tabOpina = new Tabs('tabOpina', 1); tabOpina.ActivarTab(1,'tabOpina', true); } loadinSports = function(){ tabTv = new Tabs('tabTv', 1); tabTv.ActivarTab(1,'tabTv', true); tabGame = new Tabs('tabGame', 1); tabGame.ActivarTab(1,'tabGame', true); striper('ul','striped','li','first, second'); } //+++++++++++++++++++++++++++++ utiles +++++++++++++++++++++++++++++++ +++++++++++++++= function addEvent(obj, evType, fn){ if (obj.addEventListener){ obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent){ var r = obj.attachEvent("on"+evType, fn); return r; } else { return false; } } //+++++++++++++++++++++++++++++ utiles +++++++++++++++++++++++++++++++ +++++++++++++++= /*funcion para hacer listas cambiando de color alterno*/ function striper(parentElementTag, parentElementClass, childElementTag, styleClasses) { var i=0,currentParent,currentChild; if ((document.getElementsByTagName)&&(parentElementTag)&&(childElementTag)&&(styleClasses)) { var styles = styleClasses.split(','); var parentItems = document.getElementsByTagName(parentElementTag); while (currentParent = parentItems[i++]) { if ((parentElementClass == null)||(currentParent.className == parentElementClass)) { var j=0,k=0; var childItems = currentParent.getElementsByTagName(childElementTag); while (currentChild = childItems[j++]) { k = (j+(styles.length-1)) % styles.length; currentChild.className = currentChild.className+" "+styles[k]; } } } } } and the html have this for call the functions!! <script type="text/javascript"> <!-- Variables para rotacion de stages idCual=1; //con cual Tab Empieza delayTime=4; //tiempo de delay entre tabs --> </script> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/engine.js" type="text/javascript"></script> <!-- In this im have the all function --> <script type="text/javascript"> <!-- addEvent(window, 'load', loadinHome); --> </script>