Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB
 
AccueilAccueil  PortailPortail  Connexion  S'enregistrerS'enregistrer  
-29%
Le deal à ne pas rater :
Kit de mémoire vive PNY XLR8 2X8 (2 x 8Go) à 49,90€
49.91 € 69.91 €
Voir le deal

 

 [AWESOMEBB]Afficher le nombre LIKES dans la liste des sujets

Aller en bas 
AuteurMessage
Milouze14
Fondateur

Milouze14



[AWESOMEBB]Afficher le nombre LIKES dans la liste des sujets Empty
MessageSujet: [AWESOMEBB]Afficher le nombre LIKES dans la liste des sujets   [AWESOMEBB]Afficher le nombre LIKES dans la liste des sujets EmptyMar 19 Oct 2021 - 9:19

Hello les amies,

L'astuce consiste a placer un bouton sur la liste des sujets après chaque titre.
Au clic et seulement au clic , l'information sera affichée
car je ne voulais pas faire plusieurs requêtes pour tous les sujets à l'ouverture de la page.

Tout sera personnalisable dans la feuille de style ok .


[AWESOMEBB]Afficher le nombre LIKES dans la liste des sujets 1346



Au clic et si le nombre de LIKES est positif:

[AWESOMEBB]Afficher le nombre LIKES dans la liste des sujets 2133

Au clic et si le nombre de LIKES est négatif:

[AWESOMEBB]Afficher le nombre LIKES dans la liste des sujets 339



Pour cela il est impératif de suivre les modifications a apporter dans le template topics_list_box:
Affichage/Templates/Général/topics_list_box

Recherchez ceci:
Code:
<p>{topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR} {topics_list_box.row.GOTO_PAGE_NEW}</p>

Remplacez par:

Code:
<p>{topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR} <div class="M14_liked_listbox"><span class="M14_liked_not">Oups aucun résultat!!!</span><img class="M14_liked_listbox_img"src="https://i.servimg.com/u/f20/20/11/87/27/pouce110.png"/><span class="M14_liked_listbox_liked" title="Afficher les j'aimes pour ce sujet">J'aime</span><span class="M14_liked_listbox_num"></span></div><span class="M14_paGin">{topics_list_box.row.GOTO_PAGE_NEW}</span></p>



Pensez à enregistrer puis à valider en cliquant respectivement sur   Enregistr puis Ajout

Vous pouvez changer le texte de l'infobulle au survol du bouton ici:

Code:
title="Afficher les j'aimes pour ce sujet"

Vous pouvez changer le texte en cas ou la recherche ne trouve rien ici:
Code:
<span class="M14_liked_not">Oups aucun résultat!!!</span>

Vous pouvez changer le lien de l'image ici:
Code:
<img class="M14_liked_listbox_img"src="https://i.servimg.com/u/f20/20/11/87/27/pouce110.png"/>
Les dimensions de cette image 13px par 13 px .

Gardez ces dimensions car l'espace est très restreint.

Ensuite une dernière modification dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Recherchez ceci (ligne 59 environ) :
Code:

 <div class="pagination">
            {PAGINATION}
        </div>

Remplacez par:
Code:


<div class="M14_paginTopIc pagination">
         {PAGINATION}
      </div>



Pensez à enregistrer puis à valider en cliquant respectivement sur   Enregistr puis Ajout

Voilà pour les modifications des templates.



Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutez ceci:

Code:

    /******DEBUT LES LIKES******/
    /*L AFFICHAGE EN CAS OU AUCUN LIKE*/
    .M14_liked_not
    {
background-color: #666;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: none;
font-size: 10px;
height: 20px;
line-height: 20px;
margin-left: -3px;
margin-top: -24px;
padding: 0px 5px;
position: absolute;
      
    }
    /*LE BLOC COMPLET DES LIKES*/
    .M14_liked_listbox
    {
    /*on affiche a gauche*/
    float:left;
    background-color:#F49100;
    border-radius: 3px;
    cursor: pointer;
    margin:1px;
    padding:2px 10px 2px 2px;
    transition: all 0.5s ease-in;
    }
    /*ON DONNE UNE APPARENCE A L IMAGE*/
    .M14_liked_listbox img
    {
    width:13px;
    height:13px;
    position: relative;
    top: 2px;
    }
    /*LE TEXTE J AIME*/
    .M14_liked_listbox_liked
    {
    color:#fff;
    font-size: 10px;
    margin-left:3px;
    }
    /*LES CHIFFRES*/
    .M14_liked_listbox_num
    {
    color:#fff;
    font-size: 10px;
    margin-left:3px;  
    min-width: 15px;
    display: inline-block;
      text-align: center;
    }
    /*ON CHANGE L APPARENCE SI LIKE*/
    .M14_liked_listbox.M14_liked_best
    {
    background:#4CAF50;
    }

    /******FIN LES LIKES******/



Pensez à cliquer sur le bouton [AWESOMEBB]Afficher le nombre LIKES dans la liste des sujets Sans_t10


Suivez les commentaires pour vous repérer.

Puis pour finir, le script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cochez sur les sous-forums

Déposez ceci:

Code:

$(function(){$('.M14_liked_listbox').each(function(){var num=0;var $this=$(this);var link=$(this).closest('.posts-section').find('a.topictitle[href^="/t"]').attr('href');
var pagin=$(this).closest('.posts-section').find('.M14_paGin .pagination a[href^="/t"]').length;
var paginlink=$(this).closest('.posts-section').find('.M14_paGin .pagination a[href^="/t"]:last').attr('href');
if(pagin===0){$this.click(function(){$(this).unbind();$.get(link , function(data){
num+=$(data).find('p.fa_like_list').find('a[href^="/u"]').length;
if(num){$this.addClass('M14_liked_best').find('.M14_liked_listbox_num').text(num);}
else{$this.find('.M14_liked_listbox_num').html('0');$this.find('.M14_liked_not').fadeIn().delay(800).fadeOut();}});});}});});
$(function(){$('.M14_liked_listbox').each(function(){var $this=$(this);var num=0;var numb=0;
var pagin=$(this).closest('.posts-section').find('.M14_paGin .pagination a[href^="/t"]').length;
var paginlink=$(this).closest('.posts-section').find('.M14_paGin .pagination a[href^="/t"]:last').attr('href');
if(pagin){$this.click(function(){$(this).unbind();var result=0;$.get(paginlink,function(data){
num+=$(data).find('p.fa_like_list').find('a[href^="/u"]').length;
$(data).find('.M14_paginTopIc').find('a[href^="/t"]:not(:eq(1)) ').each(function(){
var link=$(this).attr('href');   $.get(link , function(data){numb+=$(data).find('p.fa_like_list:not(:first)').find('a[href^="/u"]').length;
var result=num+numb;if(result>=1){$this.addClass('M14_liked_best').find('.M14_liked_listbox_num').text(result);}
if(result===0){$this.find('.M14_liked_listbox_num').html('0');$this.find('.M14_liked_not').show();$this.find('.M14_liked_not').delay(800).fadeOut();}});});});});}});});


Pensez à cliquer sur le bouton Valid

Le fait de cliquer sur le bouton évite la surcharge des requêtes sur l'ensemble des sujets.

saya aime ce message

Revenir en haut Aller en bas
https://www.milouze14.com
 
[AWESOMEBB]Afficher le nombre LIKES dans la liste des sujets
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [PHPBB3] Afficher le nombre LIKES dans la liste des sujets
» [PHPBB2]Afficher le nombre LIKES dans la liste des sujets
» [MODERNBB]Afficher le nombre LIKES dans la liste des sujets
» [PUNBB] Afficher la description du forum dans la liste des sujets
» [PHPBB3] Afficher les forums de la catégorie dans la liste des sujets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Astuces Forumactif :: Astuces Forumactif :: Les astuces AwesomeBB-
Sauter vers: