JQuery

Ler mais... (read more)

Publicado por antlou em 14/09/2017

Encontrei numa pesquisa este pequeno mas versátil plugin jQuery plugin permite ocultar secções específicas de um conteúdo, criando um link "ler mais" para alternar o conteúdo completo.

Totalmente personalizável, permitindo que você altere a legenda dos links (mesmo individualmente), o tamanho da versão ocultada, as imagens devem ou não ser exibidas, etc.

Resultado:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio. Blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Começarei pela apresentação do ficheiro readmore.html.

readmore.html


<!--
********************************************
* Readmore                                     
* Author: David Whitworth                          
* Version: 1.1                              
* Date:2016                         
********************************************
-->
<html>
<head>
        
    <link rel="stylesheet" href="advanced-read-more.min.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script >
    <script src="advanced-read-more.min.js"> </script >
    
</head>
< body>
    <h3>Titulo</h3>
    
    <div class="jrm-truncate">
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
    Ut labore et dolore magna aliquyam erat, sed diam voluptua. 
    At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
    At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
        <img src="http://placehold.it/350x150" alt="Sample Image" />
    <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
    Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.
    Blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
    </p>
    </div>
    <hr />      

    <script >
           $('body').readMore({
            showLines: 3,
            linkCaption: 'Continuar a ler...',
            linkCloseCaption: 'Ler menos...',
            linkHint: 'Clique para ver todo o texto'
        });
    </script >
       
</body>   
</html>

O arquivo read-more.min.js e read-more.min.css devem ser incluídos dentro do html entre as tags head.

Não esquecer também a inclusão da biblioteca jquery-1.11.0.min.js para que tudo funcione corretamente.

Não vou apresentar aqui o ficheiro read-more.min.js pela sua dimensão.

Ao efectuarem a transferencia do pacote abaixo, ele estará incluido, bem como mais explicações do autor sobre este código.

readmore.css

	<!--
	 ********************************************
	 * Readmore.css                                   
	 * Author: David Whitworth                           
	 * Version: 1.1                            
	 * Date: 2016
	 *                    
	 ********************************************
	-->
	.jrm-truncate{
		overflow:hidden
	}
	.jrm-truncate.jrm-reduced.jrm-textOnly img,
	.jrm-truncate.jrm-reduced.jrm-textOnly table{
		display:none
	}
	.jrm-toggle{
		display:inline-block;
		margin-top:1em;
		margin-bottom:1em;
		text-decoration:underline;
		color:blue;
		cursor:pointer
	}

voltar para o topo ↑

Download Código

...eficiente!

Espero ter sido útil. Deixe aqui a sua avaliação.

1 votos - 5 pontos - 18 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.