Borisigna nos enseña a hacer un webgame

ATENCIÓN: Nos mudamos a http://juegodenavegador.host22.com/index.php


No estás conectado. Conéctate o registrate

sistema de pestañas

Ir abajo  Mensaje [Página 1 de 1.]

1 sistema de pestañas el Dom Abr 04, 2010 8:37 pm

people=shit

avatar
bueno aca les dejo un sistema de pestañas muy facil de usar esta echa en javascript y css:

(al final muestro unas capturas de como queda y comolo use yo)

queda bastante bien, yolo use para mi index (login y registro)

lo pongo para descarga por que son archivos largos y dejarian re largo el post



¿como se usa?
para usarla se necesita de unos simples codigos:

Código:

<html>
<head>
<title>ejemplo del uso de pestañas</title>
<link href="style-people-shit.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="SpryAssets/SpryTabbedPanels.js"></script>
<script type="text/javascript">var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");</script>
</head>
<body >
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">titulo de pestaña 1</li>
    <li class="TabbedPanelsTab" tabindex="0">titulo de pestaña 2</li>
    <li class="TabbedPanelsTab" tabindex="0">titulo de pestaña 3</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">contenido de la primera pestaña</div>
    <div class="TabbedPanelsContent">contenido de la segunda pestaña</div>
    <div class="TabbedPanelsContent">contenido de la tercera pestaña</div>
  </div>
</div>

<script type="text/javascript">var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");</script>

</body>
</html>

explicacion por partes:

Código:

<link href="style-people-shit.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="SpryAssets/SpryTabbedPanels.js"></script>
<script type="text/javascript">var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");</script>
creo que todos saben que es esto pero por las dudas lo digo: agregamos el archivo de estilos
que yo le di como nombre style-people-shit.css (lo pueden cambiar por el que quieran)
y el javascript que lo hace funcionar.

Código:

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">titulo de pestaña 1</li>
    <li class="TabbedPanelsTab" tabindex="0">titulo de pestaña 2</li>
    <li class="TabbedPanelsTab" tabindex="0">titulo de pestaña 3</li>
  </ul>
estos son los titulos de las pestañas.

Código:

  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">contenido de la primera pestaña</div>
    <div class="TabbedPanelsContent">contenido de la segunda pestaña</div>
    <div class="TabbedPanelsContent">contenido de la tercera pestaña</div>
  </div>
</div>
en este codigo se define el contenido de cada pestaña.
dentro de <li class="tabbedpanelscontent"> y </div>


para agregar una pestaña nueva:

para agregar o quitar una pestaña lo que tenemos que hacer es primero darle un titulo:

dentro de:
Código:

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">

agregamos:

Código:
<li class="TabbedPanelsTab" tabindex="0">titulo de la pestaña</li>
creo que esta muy claro cambias "titulo de la pestaña" por cualquier otro.

y terminamos con:
Código:
</ul>

ponerle un contenidoa la pestaña nueva:
dentro de:
Código:
<div class="TabbedPanelsContentGroup">

agregamos:

Código:

<div class="TabbedPanelsContent">contenido de la pestaña</div>
y cambiamos "contenido de la pestaña" por cualquier otro

y terminamos con:
Código:

 <div>
  </div>

----------------------------------------------

este es codigo de arriba que use para explicarlo:

pestaña1:

pestaña2:

pestaña3:


el del de mi juego:

pestaña1 login:



pestaña2 registro:

http://hazzaft.comuv.com/

2 Re: sistema de pestañas el Mar Abr 06, 2010 1:33 am

BORISIGNA


Admin
Bonito Wink

El juego de la granja que yo crearé tendrá un PÉSIMO (pirat) apartado visual, ya que si me pongo a hacer diseños complicaría y alargaría mucho el blog.

Tarea de ustedes hacer su web design Exclamation

http://juegodenavegador.wordpress.com

Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.