Ver Mensaje Individual
  #2 (permalink)  
Antiguo 17/04/2007, 14:13
Avatar de engonga
engonga
Usuario no validado
 
Fecha de Ingreso: marzo-2002
Ubicación: Buenos Aires
Mensajes: 1.300
Antigüedad: 22 años, 8 meses
Puntos: 8
Re: contenedor externo en ajax muy bueno pero...

el fichero de ajax ajaxtabs.js es el siguiente

Código PHP:
var bustcachevar=//bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadstatustext="<img src='ajaxtabs/loading.gif' /> Carregant contingut..."
////NO NEED TO EDIT BELOW////////////////////////
var loadedobjects=""
var defaultcontentarray=new Object()
var 
bustcacheparameter=""
function ajaxpage(urlcontaineridtargetobj){
var 
page_request false
if (window.XMLHttpRequest// if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (
window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")

catch (
e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (
e){}
}
}
else
return 
false
var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li")
for (var 
i=0i<ullist.lengthi++)
ullist[i].className=""  //deselect all tabs
targetobj.parentNode.className="selected"  //highlight currently clicked on tab
if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax)
document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]
return
}
document.getElementById(containerid).innerHTML=loadstatustext
page_request
.onreadystatechange=function(){
loadpage(page_requestcontainerid)
}
if (
bustcachevar//if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET'url+bustcacheparametertrue)
page_request.send(null)
}
function 
loadpage(page_requestcontainerid){
if (
page_request.readyState == && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function 
loadobjs(revattribute){
if (
revattribute!=null && revattribute!=""){ //if "rev" attribute is defined (load external .js or .css files)
var objectlist=revattribute.split(/s*,s*/) //split the files and store as array
for (var i=0i<objectlist.lengthi++){
var 
file=objectlist[i]
var 
fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src"file);
}
else if (
file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel""stylesheet");
fileref.setAttribute("type""text/css");
fileref.setAttribute("href"file);
}
}
if (
fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
}
function 
expandtab(tabcontentidtabnumber){ //interface for selecting a tab (plus expand corresponding content)
var thetab=document.getElementById(tabcontentid).getElementsByTagName("a")[tabnumber]
if (
thetab.getAttribute("rel")){
ajaxpage(thetab.getAttribute("href"), thetab.getAttribute("rel"), thetab)
loadobjs(thetab.getAttribute("rev"))
}
}
function 
savedefaultcontent(contentid){// save default ajax tab content
if (typeof defaultcontentarray[contentid]=="undefined"//if default content hasn't already been saved
defaultcontentarray[contentid]=document.getElementById(contentid).innerHTML
}
function 
startajaxtabs(){
for (var 
i=0i<arguments.lengthi++){ //loop through passed UL ids
var ulobj=document.getElementById(arguments[i])
var 
ulist=ulobj.getElementsByTagName("li"//array containing the LI elements within UL
for (var x=0x<ulist.lengthx++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (
ulistlink.getAttribute("rel")){
var 
modifiedurl=ulistlink.getAttribute("href").replace(/^http://[^/]+//i, "http://"+window.location.hostname+"/")
ulistlink.setAttribute("href"modifiedurl//replace URL's root domain with dynamic root domain, for ajax security sake
savedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab content
ulistlink.onclick=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
return 
false
}
if (
ulist[x].className=="selected"){
ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink//auto load currenly selected tab content
loadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files
}
}
}
}


y para montar la tabla

Código PHP:
<ul id="maintab" class="shadetabs">
<
li class="selected"><a href="#default" rel="ajaxcontentarea">Presentaci&oacute;</a></li>
<
li><a href="contingut_share/con_empresa2.asp" rel="ajaxcontentarea">Selecci&oacutede personal</a></li>
<
li><a href="contingut_share/con_empresa1.asp" rel="ajaxcontentarea">Formaci&oacute;</a></li>
<
li><a href="contingut_share/con_empresa3.asp" rel="ajaxcontentarea">Outsorcing</a></li>
<
li><a href="contingut_share/con_empresa4.asp" rel="ajaxcontentarea">Assessoria</a></li>
<
li><a href="contingut_share/con_empresa5.asp" rel="ajaxcontentarea">Demandes</a></li>

</
ul>
<
div id="ajaxcontentarea" class="contentstyle">
<
p><br />
<
div align="center">
  <
img src="imatges/sumer_consultora_igualada_empresa.jpg" alt="sumer_consultora_empresa" width="500" height="241" /> </div> <br />
  <
p>Som   especialistes en <U>Captaci&oacutei Selecci&oacutede personal</U> , aquesta &eacute;s la nostra   activitat principalTamb&eacuteels hi podem oferir els serveis de <U>Formaci&oacute;,   Outsourcing de rrhh i els d&acute;Assessoria</U><U></U></p>
  <
p>Sumer   Consultora li ofereix el <U>S</U>ervei de Consultoria des del plantejament de   les seves necessitats a una continua assessoria orientada cap a l'optimitzaci&oacute;   dels seus Recursos Humans.<br />
    <br />
  Sumer t&eacute; quatre grans &agrave;rees   que es complementen entre s&iacute;: <a href="javascript: expandtab('
maintab', 2)">Selecci&oacute;</a>, <a href="javascript: expandtab('maintab', 1)">Formaci&oacute;</a>, <a href="javascript: expandtab('maintab', 3)">Outsourcing de RRHH</a> i   <a href="javascript: expandtab('maintab4)">Assessoria-Consulting</a>.<br />
  </p>
</p>
  </div>
<script type="
text/javascript">
//Start Ajax tabs script for UL with id="
maintab" Separate multiple ids each with a comma.
startajaxtabs("
maintab")
</script>