Visualizzare un Tooltip con descrizione e membri sui gruppi


Tutorial Visualizzare un Tooltip con descrizione e membri sui gruppi

Messaggio 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



Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 25
Messaggi : 8923
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/

A rozalia piace questo messaggio.

Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.