[TUTORIAL] Widget que oculta conteúdo

De forma a poder cada vez mais personalizar os seus widgets, criamos agora uma forma de poder dar a entender que o widget se encontra oculto, adicionando um conjunto de imagens que produz o efeito de conteúdo escondido e oculto.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Atenção: Os códigos mencionados neste tutorial, apenas terão efeito para a versão PhpBB 3 estaremos estudando novos códigos para outras versões.

--> Tutoriais, Dicas e Astúcias <--
Widget que oculta conteúdo (com imagens)

1º - Teremos de criar um widget personalizado, pois somente poderemos aplicar este método a widgets editáveis;

Para informações completas sobre a adição do portal e sobre a adição de widgets à este, recomendamos que leia o tutorial específico para esta função: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

2º - Agora teremos de aplicar o conteúdo no widget. Copie exactamente como está em baixo, para poder destingir, quais as partes que terá de modificar;

• Código normal que iremos utilizar:

<script>
var imageURL = "URL_DA_IMAGEM_WIDGET_CONTEÚDO_OCULTO";
if (document.images) {
var menos = new Image();
menos.src = "URL_DA_IMAGEM_WIDGET_CONTEÚDO_VISÍVEL";
var mais = new Image();
mais.src = "URL_DA_IMAGEM_WIDGET_CONTEÚDO_OCULTO";
}
function mudarImage() {
if (document.images) {
if (imageURL == "URL_DA_IMAGEM_WIDGET_CONTEÚDO_VISÍVEL") imageURL = "URL_DA_IMAGEM_WIDGET_CONTEÚDO_OCULTO";
else imageURL = "URL_DA_IMAGEM_WIDGET_CONTEÚDO_VISÍVEL";
document.myImage.src = imageURL;
}
}
</script>

<div class="module">
<div class="inner">
<span class="corners-top"><span></span></span>
<dl style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none'); mudarImage();">
<dt class="h3">
<img src="URL_DA_IMAGEM_WIDGET_CONTEÚDO_OCULTO" name="myImage" style="float:right;">

TÍTULO DO WIDGET

</dt><dd>
<div style="display: none;"><span class="genmed" style="line-height: 150%;"><ul><li><span class="genmed">

CONTEÚDO DO WIDGET

</span></li></ul></span><span class="corners-bottom"></span>
</div></dd></dl></div></div>

Agora que já colocamos o código no widget, vamos modificar os conteúdos:

- URL_DA_IMAGEM_WIDGET_CONTEÚDO_OCULTO -> Esta imagem, aparecerá quando o conteúdo do wisget está oculto, ou seja representa que terá de carregar para visualizar o conteúdo, uma dica de imagem, poderá ser um "+" (sinal mais) ou uma "seta para baixo".
- URL_DA_IMAGEM_WIDGET_CONTEÚDO_VISÍVEL -> Esta imagem aparecerá quando o widget tem o conteúdo visível e o usuário poderá querer escondê-lo novamente, uma dica de imagem para este caso é um "-" (sinal menos) ou uma "seta para cima".
- Título do Módulo -> A primeira parte a ser modificada, podemos colocar o título, normalmente, como se colocássemos nos campos que estão em cima.
- Conteúdo que ficará oculto -> Colocámos o nosso conteúdo, o que pretendemos que seja oculto, na mesma como procedemos com o título, também aqui, devemos colocar, como se estivéssemos a coloca num widget normal.

- mudarImage e myImage - Estas variáveis, apenas devem ser modificadas, se este código for utilizado em mais do que um widget, isto porque se os dois widgets tiverem as mesmas variáveis, as imagens não se irão modificar! Recomenda-se que num segundo código se coloque à frente destas variáveis um número por exemplo, para um segundo widget poderia ser: mudarImage2 e myImage2, para um terceiro poderia ser mudarImage3 e myImage3 e por aí em diante.



3º - Agora teremos de colocar o widget criado, na estrutura do Portal.
Para isso terá de aceder a:
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura

Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.

Widget personalizado - Depois de entrar na estrutura da página, terá de localizar o widget personalizado, que se encontra no separador "Widgets pessoais", por baixo da matriz do Portal.

"Salvar" Portal - Agora que está localizado o widget, mova-o para a matriz do Portal, através do método drag&drop (arrastar e soltar). Depois de efectuar essa acção, terá de carregar em "salvar", para que o Portal seja actualizado.

Autorizações do widget - Já com o Portal actualizado, já poderá modificar as autorizações do widget, carregando em "Autorizações" ([Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]).

Autorizações - Neste painel, poderá escolher quais os grupos de usuários poderão visualizar o widget.

4º - O resultado final, numa animação GIF:

--> FAQ <--
Widget que oculta conteúdo (com imagens)

• O que posso colocar no local: "Conteúdo que ficará oculto"?

Poderá colocar todo o tipo de conteúdos, desde textos normais, textos formatados, códigos multimédia, etc, todo o tipo de conteúdos.

• Quais as vantagens deste tipo de widget?

A vantagem principal, é que ao acedermos ao Portal, o conteúdo que se encontra dentro, não é carregado, o que facilita o carregamento da página. Assim o conteúdo só é carregado quando abrimos o widget. é por isso uma excelente opção para conteúdos muito "pesados".

• O meu widget não tem a mesma formatação que os restantes?

Isso ocorre porque personalizou o CSS do seu Fórum. nesse caso poste o seu problema neste mesmo Fórum, que os usuários competentes tentarão resolver o seu problema.

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Widget que oculta conteúdo (com imagens)