[phpbb3] [pedido]Perfiles con pestañas

Bueno, estuve preguntando por tumblr a la creadora de unos perfiles que está aquí mismo y ni me había dado cuenta.

El caso es que me gustaría conseguir poner los datos del perfil mediante pestañas como en este foro:



Kay me contestó muy amablemente por su blog (sí, la anon sin tumblr soy yo xD) pero lamento decir que no he conseguido casi nada con lo de las variables (sé qe soy torpísima).

Si pudiérais ayudarme a conseguirlo (que no hace falta que sea el mismo efecto ni nada de eso, si no simplemente la estructura) estaría muy agradecida

A ver, creo que soy la más indicada para contestar esto ^^

Bueno, no te puedo pasar el código del foro porque lógicamente está diseñado para ese foro de forma exclusiva. Como ya te dije por tumblr, el html sería algo así:

Código:

<div class="postprofile">
<div class="boton boton1"></div>
<div class="boton boton2"></div>
<div class="boton boton3"></div>
<div class="cont cont1"></div>
<div class="cont cont2"></div>
<div class="cont cont3"></div>
</div>

Y el jquery algo como lo que te pasé por tumblr, que eso ya no me lo sé de memoria.
Ahora bien, ¿qué es exactamente tu problema? ¿No sabes construir el jquery? ¿No sabes cuales son las variables que necesitas? Daaaatos, necesito daaatos <3

Claro, claro, no quiero igual! Es decir, no esperaba menos, además de que daré los créditos correspondientes!!

¡Al lío! No sé las variables que necesito ni qué poner en los contenidos :S

Soy muy torpe y lo se :$

A ver, te diré las variables del postprofile para que puedas disponer a tu antojo de ellas y ponerlas donde te plazca ^^ En los contenidos, por cierto, tienes que poner lo que quieras que vaya en cada caja. Es decir, en las distintas "pestañas" del perfil.

{postrow.displayed.POSTER_AVATAR} -> El avatar. Se genera dentro de un <img> él solito, así que no lo pongas como background del div o no funcionará.
{postrow.displayed.POSTER_NAME} -> Nombre del usuario. Se genera con un <a><span><strong></strong></span></a>.
{postrow.displayed.POSTER_RANK_NEW} -> Título del rango.
{postrow.displayed.RANK_IMAGE} -> Imagen del rango, también se genera dentro de un <img>.

Esto que te muestro ahora, en conjunto, tiene que verse así, es decir, estar dentro de lo de BEGIN profile_field y END profile_field, si no no furula bien.

Código:

<!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->

{postrow.displayed.profile_field.LABEL} -> El título del campo de perfil, se genera dentro de un <span>-
{postrow.displayed.profile_field.CONTENT} -> El contenido del campo de perfil, se genera sin nada alrededor.
{postrow.displayed.profile_field.SEPARATOR} -> El separador que elijas al crear el campo (Ningún, volver a la línea, salto de línea, barra).
{postrow.displayed.PROFILE_IMG} -> Link e imagen al perfil del user.
{postrow.displayed.PM_IMG} -> Link e imagen para mandarle un mp al user.
{postrow.displayed.EMAIL_IMG} -> Link e imagen para mandarle un mp al user.

Y lo mismo que antes con el profile_field, esto tiene que verse así, y va con los links de perfil, mp y email:

Código:

<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->

Es básicamente para que aparezcan los campos del perfil de contacto personalizado (coimo la ficha o la cronología, yoquesé)

Y luego está el {postrow.displayed.POSTER_RPG} , el cual no he usado nunca y presupongo que será para la hoja de personaje.


Y con eso estaría todo ^^

Uf, esto es demasiado complicado para mí.  A ver, he entendido que debo poner las variables dentro de los contenidos (según las que quiera mostrar o esconder) pero, debo hacerlo en el html o en el javascript?

Quizá me esté haciendo un lío yo sola pero pido paciencia porque soy medio inútil para estas cosas 

Con paciencia, Quinn, esto no se aprende en un día ^^

Las variables son del HTML. Te puedo dejar un ejemplo muy gráfico, a ver si se entiende mejor así.

Código:

<div class="postprofile">
<div class="boton boton1">1</div>
<div class="boton boton2">2</div>
<div class="boton boton3">3</div>
<div class="cont cont1">
{postrow.displayed.POSTER_AVATAR}
{postrow.displayed.POSTER_NAME}
</div>
<div class="cont cont2">
{postrow.displayed.RANK_IMAGE}
<!-- BEGIN profile_field -->
<span class="campo">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
</div>
<div class="cont cont3">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</div>
</div>

Y ahora te explico.

Como verás, al principio abro el postprofile. Todo bien. Pongo los tres botones (.boton1, .boton2, .boton3) y les pongo su consiguiente numerito dentro (porque quiero que aparezcan los números para que la gente sepa qué pestaña es (?))

Luego vienen los contenidos. El .cont1, como podrás observar, sólo tiene el avatar y el nombre de usuario (las variables correspondientes a estos).
El .cont2 lo primero que tiene es la imagen del rango, sin el título, porque yo no quiero el título, así que no pongo la variable de este. Justo después he abierto el BEGIN profile_field para poder poner los campos del perfil, en los que he puesto el contenido, sin su título (en lugar de salir Mensajes: 40 saldrá solo 40), poniéndole una class para poder trabajar con él. Cierro con END profile_field.
El .cont3 tiene tres imágenes por defecto que son las de perfil, mp y email, y luego pongo el BEGIN contact_field tal cual te lo puse en el code de arriba para poder llamar a los iconitos que yo creo desde mi PA para ficha, relaciones y crono.


No sé si lo habrás entendido mejor así ^^

PD: Del JS por ahora olvídate, hasta que no tengas el HTML y el CSS no te debes preocupar por él, porque te vas a liar aún más.

Vale, creo que ahora lo he entendido, de esta manera si quiero darle formato al div de la primera pestaña (que contiene el avatar) puedo hacerlo con libertad. OK! Entendido! Ahora vengo con dudas antes de pasar al JS como tú dices.

Si por ejemplo quisiera añadir más "ventanas" con X contenido no tendría más problema que sumar otros divs al html y luego hacer lo mismo con el js no?

Y si por ejemplo, quiero que una pestaña este siempre activa qué tendría que hacer?

Y bueno, ya sería montar el js con algo así como me dijiste en el tumblr no?




Gracias de verdad por tomarte todo este trabajo para ayudarme!

Tendrías que sumar el correspondiente .boton4 y el .cont4, exacto

Para decidir qué pestaña dejas activa, pues sería cuando tú coloques con CSS los distintos .cont en el mismo sitio (lo más cómodo es un position:absolute), por ejemplo de esta forma:

Código:

.postprofile{
position:relative; /*Para que el absolute sólo afecte a cada perfil individualmente*/
}
.cont{
position:absolute;
top:0px;
}

Pues es cuestión de decirle lo siguiente:

Código:

.cont2, .cont3{
display:none;
}

Y liiisto


Y el JS, como bien dices es coger lo que yo te di y hacerlo para las diferentes pestañas. Recuerda que lo que te pasé va dentro de document ready y eso, que creo que te lo pasé sin él

¡Estamos para eso! Saludos

Vale, lo he entendido, lo que pasa que creo que no he montado bien el js, he hech esto:

Código:

$(document).ready(function(){

$('.boton boton1').click(function () {$('.cont cont1"').slideDown(900);$('.cont cont2, .cont cont3,').slideUp(900)});

$('.boton boton2').click(function () {$('.cont cont2').slideDown(900);$('.cont cont1, .cont cont3,').slideUp(900)});

$('.boton boton3').click(function () {$('.cont cont3').slideDown(900);$('.cont cont1, .cont cont2,').slideUp(900)});

});

Pero no van las pestañas :C

¿Puedo hacer un up por aquí para que no se pierda el tema? <3

¡Hola!

Prueba el siguiente código que he creado Para instalarlo deberás seguir los siguientes pasos:

1. Busca en la plantilla viewtopic_body.html el siguiente cacho de código:

Código:

         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>
               <dt>
                  {postrow.displayed.POSTER_AVATAR}
                  <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
               </dt>
               <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
               <dd><br /></dd>
               <dd>
                  <!-- BEGIN profile_field -->
                  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
               </dd>
               <dd><br /></dd>
               <dd>
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
               </dd>
            </dl>
         </div>

2. Reemplázalo por:

Código:

         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <div class="f_b">
               <span class="f_b1">Avatar</span>
               <span class="f_b2">Campos</span>
               <span class="f_b3">Contacto</span>
            </div>
            <div class="f_a">
               <div class="f_a1">
                  {postrow.displayed.POSTER_AVATAR}
                  <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
                  <br />{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
               </div>
               <div class="f_a2">
                  <!-- BEGIN profile_field -->
                     {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
               </div>
               <div class="f_a3">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
               </div>
            </div>
            
         </div>

Como podrás haberte fijado, he cambiado todos las etiquetas DD y DT por DIVs, lo cual hará más lógico ese apartado y permite una mayor libertad de uso de etiquetas.

3. Agrega el siguiente CSS:

Código:

.f_a > div { display: none; }
.f_a > .f_a1 { display: block; }

4. Instala el siguiente JS y márcalo para que se muestre solo en los temas:

Código:

$(function() {
   $('.f_b > span').click(function() {
      var n = $(this).attr('class').match(/\d/)[0],
      d = $(this).parent().parent().find('.f_a'+n);
      if(d.is(':not(:visible)')) {
         $(this).parent().next('.f_a').children('div').slideUp('slow');
         d.slideDown('slow');
      }
   });
});

Listo, ya debería funcionar perfectamente.

Ahora sí! Muchas gracias por todo! De verdad! Os pondré a ambos en los créditos por ayudarme! <3