Réduire la description complète plus/moins
Le script réduit le contenu d'un article complet et le révèle lorsque vous cliquez sur le lien > Plus. Et vice versa, lorsque vous cliquez sur > moins, cela masque une partie du contenu.
Installation :
1. Ajoutez des styles au fichier modèle CSS :
.full-desc{overflow:hidden;position:relative;transition:height .2s}
.text-less{margin-bottom:0!important}
.text-less:before{content:'';position:absolute;z-index:1;bottom:0;left:0;right:0;height:120px;pointer-events:none;background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,#fff 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 100%)}
.show-more{margin:0 0 20px;font-size:12px;font-weight:700}
.show-more span{display:inline-block;cursor:pointer;text-decoration:underline;color:#f0542e}
2. Insérez le code JS dans main.tpl au dessous de [/b] :
<script>
$(document).ready(function() {
$('.full-desc').ShortText({
height: '200',
text: 'Больше'
});
});
jQuery.fn.ShortText = function(e) {
var e = jQuery.extend({
height: "200",
text: "Plus"
}, e);
return this.each(function() {
var i = $(this),
t = i.height();
t > e.height && i.addClass("full-desc text-less").height(e.height).after('<div class="show-more"><span>' + e.text + "</span></div>"), $(".show-more span").click(function() {
var i = $(this),
s = $(this).parent().prev(".full-desc");
ah = parseInt(s.css("height"), 10), ah == t ? s.css({
height: e.height
}) : s.css({
height: t
}), i.text(i.text() == e.text ? "Moins" : e.text), s.toggleClass("text-less")
})
})
};
</script>
[b]3. Au bon endroit fullstory.tpl ajoutez :
<div class="full-desc clearfix">{full-story}</div>
Version DLE : 13.x-14.x
Auteur : redissx
Soutenez le site
Tous les fonds collectés seront reversés afin de garder le site et de vous proposer toujuour autant de modules et templates
Commentaires (0)