Visualizzare un Tooltip con descrizione e membri sui gruppi

Definizione

Codice Javascript

• 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