Colocar link “Leia mais” usando jQuery

26 fev, 2013
By wiliamluis
0 Comments
0
Dicas, JavaScript, JQuery, Texto

O Plugin jQuery Expander é um script para mostrar/recolher o conteúdo de um texto grande.

Aqui está uma maneira simples de usar este plug-in seu HTML ou páginas ASP.NET

1. Declare uma Div ou ASP.NET Painel.

&lt;div class=&quot;readmore&quot;&gt;
   The Div Text Comes Here
&lt;/div&gt;

2. Adicione o código jQuery depois da tag <head> de sua página.

&lt;head&gt;
&lt;title&gt;Add Read More Link (from DevCurry.com)&lt;/title&gt;
    &lt;script type=&quot;text/javascript&quot;
    src=&quot;http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js&quot;&gt;
    &lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;
    src=&quot;http://plugins.learningjquery.com/expander/jquery.expander.js&quot;&gt;
    &lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('div.readmore').expander({
                slicePoint: 200,
                expandText: 'Click Here to Read More',
                userCollapseText: 'Hide Text'
            });
        });
    &lt;/script&gt;
&lt;/head&gt;

Como você pode ver, temos usado o arquivo ‘jQuery’ e o ‘Expander’ plugin no <head> de seu documento. Nota: Em um aplicativo de produção, baixar o código de expansão no seu servidor e referenciá-lo de lá.

Finalmente estamos personalizando o comportamento e a aparência do expansor, substituindo as opções padrão. Verifique a API expansor toda aqui.

Quando a página carregar, clique no botão “Clique aqui para ler mais ‘link para expandir o texto

Uma vez que o texto foi ampliado, clique no botão ‘Texto Hide’ para escondê-lo novamente.

Desmostração.

fonte: http://www.devcurry.com/2010/12/add-read-more-link-using-jquery.html