Visualizzare un Tooltip con descrizione e membri sui gruppi

Da **Niko** Sab 6 Mar 2021 - 15:22

Visualizzare un Tooltip con descrizione e membri sui gruppi

Definizione

Con questo tutorial vedremo come andare ad avere un popup tooltip (come quello dei tag utente @Niko) ma con i gruppi nel footer dell'indice, andando a far comparire la descrizione e i membri del gruppo.

Visualizzare un Tooltip con descrizione e membri sui gruppi 2021-083

Codice Javascript

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la gestione sia attivata e creiamone uno nuovo:

Titolo: a tua scelta
Dove: in tutte le pagine (o nell'indice)
Codice:
Codice:
$(function () { var max_users = 10, lang = { view_group: "Visualizza il gruppo", loading: "Caricamento...", view_err: "Il gruppo non è stato caricato correttamente." }, links = $('a[href^="/g"]').filter(function () { if (/\/g\d+-/.test(this.href)) { return this; } }), groupsinfo = {}; links.tooltipster && links.not(".tooltipstered").tooltipster({ animation: "fade", interactive: true, contentAsHTML: true, minWidth: 300, maxWidth: 300, delay: 500, theme: "tooltipster-default", arrowColor: "#EEE", autoClose: true, content: lang.loading, functionBefore: function (origin, continueTooltip) { continueTooltip(); var groupURL = $(this).attr("href"), groupId = groupURL.replace(/.*?\/g(\d+).*/, "$1"), groupName = $(this).text(); if (origin.data("ajax") !== "cached") { if (groupsinfo[groupId] != undefined) { origin.tooltipster("content", groupsinfo[groupId]).data("ajax", "cached"); } else { $.get(groupURL, function (d) { var user = $('form[action="' + groupURL + '"] a[href^="/u"]', d), i = 0, li, container = $( "<div>" + '<div class="fa_group_preview">' + '<h2 class="fa_group_name">' + groupName + "</h2>" + '<p class="fa_group_desc">' + $('form[action^="/g"]', d).find("dl:eq(1) dd, tr:eq(2) td.row2 .gen").text() + "</p>" + '<ol class="fa_group_list"></ol>' + '<div class="fa_group_button">' + '<a href="' + groupURL + '" class="button1">' + lang.view_group + "</a>" + "</div>" + "</div>" + "</div>" ); for (; i < max_users; i++) { if (user[i]) { li = document.createElement("LI"); li.appendChild(user[i]); $("ol", container).append(li); } } if (!$("li", container).length) { $("ol", container).after("<div>" + lang.view_err + "</div>"); } groupsinfo[groupId] = container.html(); origin.tooltipster("content", groupsinfo[groupId]).data("ajax", "cached"); }); } } }, }); $("head").append( '<style type="text/css">' + ".fa_group_preview { font-family:Arial; font-size:12px; color:#000; }" + ".fa_group_preview a { text-decoration:none; }" + "h2.fa_group_name { font-size:24px; }" + "p.fa_group_desc, h2.fa_group_name { margin:10px 0 10px 0; }" + "ol.fa_group_list { margin:0 25px; padding:0; }" + ".fa_group_button { margin-top:10px; text-align:center; }" + "</style>" ); });

Personalizzazione

var max_users = 10 - indica il numero massimo di membri da mostrare nel popup (utile se avete gruppi molo numerosi)
view_group: "Visualizza il gruppo" - indica il testo del bottone cliccabile
loading: "Caricamento...", - indica il testo segnaposto durante il caricamento (se ci mette troppo)
view_err: "Il gruppo non è stato caricato correttamente." } - eventuale errore nel caricamento