[jQuery] Nav Tab with Controls Play, Pause, Next and Prev.
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>