Un bottone BBcode apposito per i download

Tutorial Un bottone BBcode apposito per i download

Messaggio Da Niko Dom 31 Ott 2021 - 17:42

Un bottone BBcode apposito per i download


Qualche tempo fa un utente (dal forum di supporto rumeno) ha chiesto un tutorial su come creare un nuovo BBCode da scaricare.
Ora ecco la soluzione perfetta, il codice funziona perfettamente, anche l'integrazione di un nuovo editor, è facile da usare e da personalizzare!

Un bottone BBcode apposito per i download 2FFLwRw
Un bottone BBcode apposito per i download P6qxbSq

Installazione Javascript

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la gestione del codice Javascript sia attivata, e creiamo un nuovo codice con queste impostazioni:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    (function($) {
        document.write('<script type="text/javascript" src="https://use.fontawesome.com/141c9eaa90.js"></script>');
        var Required_Post = 70,
            Open_Type = true,
            Show_ERROR_Message = 'Non hai i permessi sufficienti per effettuare questo download';
     
        $(function() {
            $(function() {
                $('body').append('<div id="download" class="sceditor-dropdown sceditor-download" style="visibility:hidden;width:auto;text-align:left;"><div><label for="linkdownload" unselectable="on">URL</label> <input type="text" id="linksrc" class="url" placeholder="http://" value=""></div><div><input type="button" class="button" value="inserare"></div></div>');
                $('.sceditor-group:last-child').after('<div class="sceditor-group" id="download_link"><a class="sceditor-button" title="Download BBCode" onclick="selectWysiwyg(this, \'download\');"><div style="background:url(https://i.servimg.com/u/f62/19/70/74/92/if_dow13.png) no-repeat center;"></div></a></div>');
         
                $('div input[value="inserare"]', $('#download')).live("click", function(e) {
                    $('textarea#text_editor_textarea').sceditor('instance').insert('[download='+ $('#linksrc', $('#download')).val() +']');
                    $('#linksrc', $('#download')).val('');
                    $('#download').css({'visibility':'hidden'});
                });
     
                for(var i = 0, j = $('.post'); i <= j.length; i++) {
                    if(/\/t(\d+)-|\/t(\d*)p(\d+)-/g.test(window.location.href)) {
                        if(_userdata.user_posts <= Required_Post) {
                            j[i].innerHTML = j[i].innerHTML.replace(/\[download=(.*?)\]/g, '<div id="download-link" class="error">'+ Show_ERROR_Message +'</div>');
                        }
                        else if(_userdata.user_posts >= Required_Post) {
                            (Open_Type == true) ? j[i].innerHTML = j[i].innerHTML.replace(/\[download=(.*?)\]/g, "<div id="download-link"><i class="fa fa-download" aria-hidden="true"></i><a href="$1" target="_blank">Download</a></div>") : j[i].innerHTML = j[i].innerHTML.replace(/\[download=(.*?)\]/g, "<div id="download-link"><i class="fa fa-download" aria-hidden="true"></i><a href="$1">Download</a></div>");
                        }
                    }
                }
            });
        });
    }(jQuery));


Personalizzazione dello stile CSS

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Foglio di stile CSS e aggiungiamo questo codice:
Codice:
div#download-link {
    background: #f1c444;
    width: auto;
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid rgba(171, 153, 26, 0.21);
    border-radius: 2px;
}
 
div#download-link > a {
    color: #231d1d;
    text-decoration: none;
    font-size: 14px;
}
 
i.fa.fa-download {
    margin-right: 5px;
    font-size: 14px;
}
 
div#download-link.error {
    background: #e44343;
    color: wheat;
}

Personalizzazione della funzione

  • Required_Post = 30 // Ecco il numero richiesto di messaggi per utente per visualizzare il pulsante di download.

  • Open_Type = true // True = apre una nuova pagina al link per il download || False = si apre il collegamento alla pagina di download

  • how_ERROR_Message= 'Non hai i messaggi necessari per il download.' // Ecco il messaggio che apparirà se non ha il numero richiesto di messaggi inviati



Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 27
Messaggi : 9425
Località : Provincia di Varese

https://www.fmcodes.net/
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.