Conectar-se

Esqueci minha senha

Os membros mais ativos do mês

Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 19 em Ter Jan 03, 2012 9:38 am
Últimos assuntos
» Equipe Web ASA Fórum
Dom Jun 24, 2012 11:15 am por Alisson Silva

» [Re-Apresentação] Fábio
Sex Maio 25, 2012 4:45 pm por Fábio

» PixelZIP ~ design&programção em só lugar
Sex Maio 25, 2012 4:44 pm por Fábio

» Pedido de logo
Dom Maio 20, 2012 10:06 am por Alisson Silva

» Kernel - Apresentação
Sab Maio 19, 2012 9:49 am por Alisson Silva

» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sab Maio 19, 2012 9:48 am por Alisson Silva

»  HEBBO HOTEL 24 HORAS ONLINE !!
Sex Maio 04, 2012 7:20 pm por Alisson Silva

» Pedido de Layout
Sex Maio 04, 2012 5:23 pm por Fonsecca

» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry

» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry


[TUTORIAL] Widget que oculta conteúdo

Ir em baixo

[TUTORIAL] Widget que oculta conteúdo

Mensagem por Fry em Qui Dez 29, 2011 12:21 pm

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.


[Você precisa estar registrado e conectado para ver 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)


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

[Você precisa estar registrado e conectado para ver esta imagem.] 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:
[Você precisa estar registrado e conectado para ver este link.]



- 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)
[Você precisa estar registrado e conectado para ver este link.]

[Você precisa estar registrado e conectado para ver esta imagem.] [Você precisa estar registrado e conectado para ver esta imagem.] Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.
[Você precisa estar registrado e conectado para ver esta imagem.] [Você precisa estar registrado e conectado para ver esta imagem.] 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.
[Você precisa estar registrado e conectado para ver esta imagem.] [Você precisa estar registrado e conectado para ver esta imagem.] "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.
[Você precisa estar registrado e conectado para ver esta imagem.] [Você precisa estar registrado e conectado para ver esta imagem.] Autorizações do widget - Já com o Portal actualizado, já poderá modificar as autorizações do widget, carregando em "Autorizações" ([Você precisa estar registrado e conectado para ver esta imagem.]).
[Você precisa estar registrado e conectado para ver esta imagem.] [Você precisa estar registrado e conectado para ver esta imagem.] Autorizações - Neste painel, poderá escolher quais os grupos de usuários poderão visualizar o widget.




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

[Você precisa estar registrado e conectado para ver este link.][Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]
[Você precisa estar registrado e conectado para ver esta imagem.]




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



[Você precisa estar registrado e conectado para ver esta imagem.] 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)
avatar
Fry
Admintradores
Admintradores

Posts Posts : 175
Idade Idade : 19
Respeito Respeito : 0
Web Moedas Web Moedas : 415

http://Em breve...

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum