O jquery entre as suas inúmeras facilidades tem a possibilidade de mostrar ou ocultar um conteúdo de uma div por exemplo. Essa funcionalidade é muito útil para páginas com conteúdo muito grande e que podem ser oculto.

Para fazer um dos métodos é usar a função toogle.

Aqui um exemplo de como irá ficar:

[inline]

[script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"][/script]

[script type="text/javascript"]
//só irá executar o script quando o DOM estiver pronto(quando toda a página estiver carregada)
$(document).ready(function() {

// texto que irá aparecer no link
var showText=’Mostrar’;
var hideText=’Ocultar’;

var visivel = false;

// adiciona esse link ao conteudo
$(‘.toggle’).prev().append(‘ (‘+showText+’)’);

// oculta o conteudo
$(‘.toggle’).hide();

//quando o link for clicado irá executar essa função
$(‘a.toggleLink’).click(function() {
// troca a visibilidade
visivel = !visivel;

// troca o texto do link
$(this).html( (!visivel) ? showText : hideText);

// exibe/oculta o conteúdo
$(this).parent().next(‘.toggle’).toggle(‘slow’);
// troca a linha acima pela de baixo para mudar o efeito
// $(this).parent().next(‘.toggle’).slideToggle(‘fast’);

return false;

});
});
[/script]
[/inline]

Conteudo 1

Conteúdo 2

Aqui segue todo o código para fazer ele funcionar.

[code language="php"]<script type="text/javascript">
//só irá executar o script quando o DOM estiver pronto(quando toda a página estiver carregada)
$(document).ready(function() {

// texto que irá aparecer no link
var showText='Mostrar';
var hideText='Ocultar';

var visivel = false;

// adiciona esse link ao conteudo
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');

// oculta o conteudo
$('.toggle').hide();

//quando o link for clicado irá executar essa função
$('a.toggleLink').click(function() {
// troca a visibilidade
visivel = !visivel;

// troca o texto do link
$(this).html( (!visivel) ? showText : hideText);

// exibe/oculta o conteúdo
$(this).parent().next('.toggle').toggle('slow');
// troca a linha acima pela de baixo para mudar o efeito
// $(this).parent().next('.toggle').slideToggle('fast');

return false;

});
});
</script>
<p>Conteudo 1</p>
<div class="toggle" style="display: none;">

<p>Aqui pode ter qualquer conteúdo</p>

<p>Incluindo listas usando &lt;ul&gt; &lt;li&gt;</p>

</div>

<p>Conteúdo 2</p>
<div id="2009" class="toggle" style="display: none;">

<p>Aqui pode ter outro conteúdo</p>

<p>Linha 2</p>

<p>Linha 3</p>

</div>
[/code]

Como pode ser visto só é preciso adicionar a class=”toogle” a uma div que ele irá adicionar a funcionalidade.

Obs: caso queira fazer um efeito onde somente um dos itens seja visível de cada vez use a função Accordion do jquery

Para quem oferece algum sistema, onde qualquer pessoa possa enviar textos é interessante, ter um editor para formatação de textos, já que não é qualquer um que sabe comandos HTML para formatar o texto. E o seu uso é recomendado para não permitir que qualquer comando HTML possa ser usado, já que alguns comandos poderiam arruinar o seu Layout

Para fazer isso existem dois tipo de editores:

WYSIWYG(What You See Is What You Get), que é um editor visual ou seja ao usa-lo você já verá o texto formatado, igual o word, g-mail, wordpress, etc.

BBCODE(Bulletin Board Code), que é uma simples função para substituir caracteres, ex: a tag <b></b> ficará [b][/b], como o seu nome diz ele foi criado para fóruns, onde é encontrado comumente, para criar um editor desse é preciso saber bastante programação, já que é preciso, substituir todos os caracteres, e bloquear o uso de outros comandos html.

Usando um WYSIWYG

Os editores desse tipo, são de uso mais facil, pois são feitos com Javascript, e podem ser usados com qualquer tipo de sistema, PHP, ASP, etc.

Quando eu estive procurando por isso, achei um monte de editores assim, mas não consegui usar ou adaptar ao que eu queria quase nenhum.

O unico que eu me dei bem foi o TinyMCE. Veja aqui um exemplo dele Para usa-lo é bem simple, com o download dele em alguma pasta do seu sistema, e adicione o seguinte no arquivoirá usa-lo

<script type=”text/javascript” src=”pasta_onde_esta_os_arquivos/tinymce/tiny_mce.js”></script>

[code="javascript"][/code]

Esse segundo javascript serve para formatar a exibição, no caso aqui ele irá aparecer todas as opções, mas como ele usa um esquema de plugins, cada botão é um plugin, então é possiveo formatar isso.

Como pode ser visto ele tem theme_advanced_buttonsX_add e na frente de cada uma tem os botões que seram mostrados, ou seja é só deletar o nome do botão para remove-lo. E se não for usar um botão pode remover a sua pasta dentro do tinymce para ficar mais leve.

Adicionando esses scripts ele irá adicionar o editor em todas as textareas que houver na página.

Irei ensinar 2 maneiras de redirecionar uma pagina, usando meta tag, e javascript, o meta tag tem a vantagem de permitir definir um tempo até que a página seja redirecionada, já usando javascript não tem essa opção.

Usando Meta tag

[code="html"]html>

Criando vidro usando o V-ray no 3ds max »« Adicionando o efeito de neve ao seu site