[TUTORIAL] Widget que oculta conteúdo

Ir para baixo

[TUTORIAL]  Widget que oculta conteúdo Empty [TUTORIAL] Widget que oculta conteúdo

Mensagem por Flavisic 07.06.09 22:00

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.


[TUTORIAL]  Widget que oculta conteúdo Act_bottom 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)


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

[TUTORIAL]  Widget que oculta conteúdo Logo 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:
Administração e instalação do portal / widgets


- 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.



- 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

(carregue na imagem para aumentar)
[TUTORIAL]  Widget que oculta conteúdo Widget10
[TUTORIAL]  Widget que oculta conteúdo 110111 Seta Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.
[TUTORIAL]  Widget que oculta conteúdo 110210 Seta 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.
[TUTORIAL]  Widget que oculta conteúdo 110310 Seta "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.
[TUTORIAL]  Widget que oculta conteúdo 110410 Seta Autorizações do widget - Já com o Portal actualizado, já poderá modificar as autorizações do widget, carregando em "Autorizações" ([TUTORIAL]  Widget que oculta conteúdo Perms).
[TUTORIAL]  Widget que oculta conteúdo 110510 Seta Autorizações - Neste painel, poderá escolher quais os grupos de usuários poderão visualizar o widget.



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

[TUTORIAL]  Widget que oculta conteúdo Wid-oc10



--> 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



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

Membro desde : 09/11/2007
Mensagens : 6290
Pontos : 3467

http://www.webscriptner.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos