PDF de programación - Manual de Tabs con Ajax, Javascript , Html y CSS

Imágen de pdf Manual de Tabs con Ajax, Javascript , Html y CSS

Manual de Tabs con Ajax, Javascript , Html y CSSgráfica de visualizaciones

Actualizado el 21 de Marzo del 2018 (Publicado el 28 de Noviembre del 2017)
887 visualizaciones desde el 28 de Noviembre del 2017
83,0 KB
10 paginas
Creado hace 12a (17/08/2007)
Manual de Tabs con
Ajax, Javascript, Html y
css


La forma más fácil de crear pestañas con
Javascript, css y Html

Escrito por Ajaxman
17/08/2007


Manual de Tabs con Ajax, Javascript, Html y css

2007





Bien después de que pues casi no he escrito nada, o muy poco les
tengo un excelente manual, con el que podrán crear tabs con ajax muy
fácilmente.





Ahora vayamos a lo que nos interesa (”programar”).

Primero necesitamos un archivo php o html para poder colocar nuestras
tabs.
Empezaremos creando una tabla en HTML de la siguiente forma

1. <table width="436" border="0" heigth="400px" cellpadding="0" cells

pacing="0" bgcolor="#99CCFF" >

2. <tr>
3. <td>
4. </td>
5. </tr>
6. <tr>
7. <td bgcolor="#F6F6F6" height="380" id="mostrar">
8. Contenido
9. </td>
10. </tr>
11. </table>



En la cual la primer celda sera donde estaran nuestra pestañas, y en la
siguiente celda sera donde estara nuestro resultado.

Ahora creamos un div que contendra a nuestros tabs, al cual le
agregamos la clase “Tab”

1. <div class="Tab">
2.
3. </div>





Manual de Tabs con Ajax, Javascript, Html y css

2007

Dentro de este div, insertaremos una lista, desordenada, la cual
contendra unos links a una funcion javascript que utilizara ajax, asi como
un texto(el texto no importa) este texto debera de ir dentro de uns
etiquetas span, para poder agregarle ciertos estilos, con esto tendremos
nuestro codigo de esta forma.

1. <div class="Tab">
2. <ul>
3. <li><a href="javascript:Ajax('google');" ><span>Google</spa

n></a></li>

4. <li><a href="javascript:Ajax('yahoo');" ><span>Yahoo</span

></a></li>

5. <li><a href="javascript:Ajax('mozilla');"><span>Mozilla</span

></a></li>

6. <li><a href="javascript:Ajax('openofice');"><span>Open Oficee</s

pan></a></li>

7. </ul>
8. </div>



Les recalco que los datos que estoy enviando como parametros es texto
el cual despues, lo pueden modificar para adaptarlo a sus necesidades.

Continuamos ahora con le CSS donde estara lo divertido.

Definiremos primero los tipos de letra preefinidos para toda la pagina
web.

1.
2.
3. body {font-family: Geneva, Arial, Helvetica, sans-serif; }
4.

Creamos posteriormente la clase Tab, con ciertas caracteristicas

1.
2.
3. .Tab {
4. float:left;
5. width:100%;
6. background:#99CCFF;
7. font-size:93%;
8. line-height:normal;
9. }





Manual de Tabs con Ajax, Javascript, Html y css

2007

A los links y a la lista se le agregaran estilos de la misma forma, en el
ejemplo les adjunto las imagenes que estoy usando son solo dos
imagenes.
y nos quedaria asi

1. body {font-family: Geneva, Arial, Helvetica, sans-serif; }
2.
3. .Tab {
4. float:left;
5. width:100%;
6. background:#99CCFF;
7. font-size:93%;
8. line-height:normal;
9. }
10. .Tab ul {
11. margin:0;
12. padding:10px 10px 0 50px;
13. list-style:none;
14. }
15. .Tab li {
16. display:inline;
17. margin:0;
18. padding:0;
19. }
20. .Tab a {
21. float:left;
22. background:url("izq.gif") no-repeat left top;
23. margin:0;
24. padding:0 0 0 4px;
25. text-decoration:none;
26. }
27. .Tab a span {
28. float:left;
29. display:block;
30. background:url("der.gif") no-repeat rightright top;
31. padding:5px 15px 4px 6px;
32. color:#666;
33. }
34. .Tab a span {float:none;}
35. .Tab a:hover span { color:#000;}
36. .Tab a:hover {background-position:0% -42px; }
37. .Tab a:hover span {background-position:100% -42px;}



De estta forma ya tenemos los tabs y nuestro codigo estaria de la
siguiente forma.



Manual de Tabs con Ajax, Javascript, Html y css

2007

1. <!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht
ml1/DTD/xhtml1-transitional.dtd">

2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-

8" />

5.
6. <style type="text/css">
7. <!--
8. body {font-family: Geneva, Arial, Helvetica, sans-serif; }
9.
10. .Tab {
11. float:left;
12. width:100%;
13. background:#99CCFF;
14. font-size:93%;
15. line-height:normal;
16. }
17. .Tab ul {
18. margin:0;
19. padding:10px 10px 0 50px;
20. list-style:none;
21. }
22. .Tab li {
23. display:inline;
24. margin:0;
25. padding:0;
26. }
27. .Tab a {
28. float:left;
29. background:url("izq.gif") no-repeat left top;
30. margin:0;
31. padding:0 0 0 4px;
32. text-decoration:none;
33. }
34. .Tab a span {
35. float:left;
36. display:block;
37. background:url("der.gif") no-repeat right top;
38. padding:5px 15px 4px 6px;
39. color:#666;
40. }
41. .Tab a span {float:none;}
42. .Tab a:hover span { color:#000;}
43. .Tab a:hover {background-position:0% -42px; }
44. .Tab a:hover span {background-position:100% -42px;}

Manual de Tabs con Ajax, Javascript, Html y css

2007

45. -->
46. </style>
47. <script language="JavaScript" type="text/javascript">
48. /*<![CDATA[*/
49. function Ajax(contenido)
50. {
51. }
52. /*]]>*/
53. </script>
54. </head>
55.
56. <body bgcolor="#99CCFF">
57. <table width="436" border="0" heigth="400px" cellpadding="0" cells

pacing="0" bgcolor="#99CCFF" >

58. <tr>
59. <td>
60. <div class="Tab">
61. <ul>
62. <li><a href="javascript:Ajax('google');" ><span>Google</sp

an></a></li>

63. <li><a href="javascript:Ajax('yahoo');" ><span>Yahoo</span

></a></li>

64. <li><a href="javascript:Ajax('mozilla');"><span>Mozilla</span

></a></li>

65. <li><a href="javascript:Ajax('openofice');"><span>Open Ofi

cee</span></a></li>

66. </ul>
67. </div>
68. </td>
69. </tr>
70. <tr>
71. <td bgcolor="#F6F6F6" height="380" id="mostrar">
72. Contenido
73. </td>
74. </tr>
75. </table>
76. </body>
77. </html>





Ahora solo nos resta hacer la parte de ajax como los vimos en el primer
manual

1. <script language="JavaScript" type="text/javascript">
2. /*<![CDATA[*/



Manual de Tabs con Ajax, Javascript, Html y css

2007

3. if ( typeof XMLHttpRequest=="undefined")XMLHttpRequest = functi
on(){return new ActiveXObject(navigator.userAgent.indexOf("MSIE
5") >= 0 ?"Microsoft.XMLHTTP" : "Msxml2.XMLHTTP");};

4. var ajax=new XMLHttpRequest();
5.
6. function Ajax(contenido)
7. {
8. ajax.open("GET","proceso.php?marca="+contenido,true);
9. ajax.onreadystatechange=function (){if(ajax.readyState==4){var r
espuesta=ajax.responseText; document.getElementById('mostrar').i
nnerHTML=respuesta}}

10. ajax.send(null);
11. }
12. /*]]>*/
13. </script>

y listo, solo les recuerdo que para hacer pruebas utilice solo la funcion
var_dump de php claro que ustedes pueden tener una pagina web
completa, o algo similar.

archivo proceso.php

1. <?
2. var_dump($_GET);
3. ?>

y por ultimo tenemos el codigo final de la siguiente forma

1. <!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht
ml1/DTD/xhtml1-transitional.dtd">

2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-

8" />

5.
6. <style type="text/css">
7. <!--
8. body {font-family: Geneva, Arial, Helvetica, sans-serif; }
9.
10. .Tab {
11. float:left;
12. width:100%;
13. background:#99CCFF;
14. font-size:93%;
15. line-height:normal;
16. }



Manual de Tabs con Ajax, Javascript, Html y css

2007

17. .Tab ul {
18. margin:0;
19. padding:10px 10px 0 50px;
20. list-style:none;
21. }
22. .Tab li {
23. display:inline;
24. margin:0;
25. padding:0;
26. }
27. .Tab a {
28. float:left;
29. background:url("izq.gif") no-repeat left top;
30. margin:0;
31. padding:0 0 0 4px;
32. text-decoration:none;
33. }
34. .Tab a span {
35. float:left;
36. display:block;
37. background:url("der.gif") no-repeat right top;
38. padding:5px 15px 4px 6px;
39. color:#666;
40. }
41. .Tab a span {float:none;}
42. .Tab a:hover span { color:#000;}
43. .Tab a:hover {background-position:0% -42px; }
44. .Tab a:hover span {background-position:100% -42px;}
45. -->
46. </style>
47. <script language="JavaScript" type="text/javascript">
48. /*<![CDATA[*/
49. if ( typeof XMLHttpRequest=="undefined")XMLHttpRequest = functi
on(){return new ActiveXObject(navigator.userAgent.indexOf("MSIE
5") >= 0 ?"Microsoft.XMLHTTP" : "Msxml2.XMLHTTP");};

50. var ajax=new XMLHttpRequest();
51.
52. function Ajax(contenido)
53. {
54. ajax.open("GET","proceso.php?marca="+contenido,true);
55. ajax.onreadystatechange=function (){if(ajax.readyState==4){var r
espuesta=ajax.responseText; document.getElementById('mostrar').i
nnerHTML=respuesta}}

56. ajax.send(null);
57. }
58. /*]]>*/
59. </script>

Manual de Tabs con Ajax, Javascript, Html y css

2007

60. </head>
61.
62. <body bgcolor="#99CCFF">
63. <table width="436" border="0" heigth="400px" cellpadding="0" cells

pacing="0" bgcolor="#99CCFF" >

64. <tr>
65
  • Links de descarga
http://lwp-l.com/pdf7744

Comentarios de: Manual de Tabs con Ajax, Javascript , Html y CSS (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad