La data/ora di oggi è Ven 12 Ago 2022 - 5:05

3 risultati trovati per "tutorial"

Toolbar: scegliere quali link visualizzare nel menu

Toolbar: scegliere quali link visualizzare nel menu


Toolbar: scegliere quali link visualizzare nel menu

Descrizione

Questo #tutorial vi permetterà di scegliere quali link visualizzare nel #menu della #toolbar forumattivo Wink

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Menu10

Installare il codice javascript

come per tutti i codici javascript dovrete andare verso PDA > Moduli > HTML & Javascript > Gestione del codice javascript e creare un nuovo codice javascript :new:

  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function() {
      var submenus = {
       
        See_my_profile : ['/u' + _userdata.user_id, 0],
        Edit_profile : ['/profile?mode=editprofile&page_profil=preferences', 0],
        'Separator 1' : ['|', 0],
       
        All_Topics : ['/sta/' + _userdata.username, 0],
        All_Messages : ['/spa/' + _userdata.username, 0],
        js_topics_followed : ['/search?search_id=watchsearch', 0],
        All_PMs : ['/privmsg?folder=inbox', 0],
        'Separator 2' : ['|', 0],
       
        'Reports' : ['/report', 2],
        'Archived Reports' : ['/report?mode=archive', 2],
        'Separator 3' : ['|', 2],
       
        Admin_panel : ['/admin', 1],
        Logout : ['/login?logout=1', 0]

      },
      i, j, li, menu;
     
      $(function() {
        menu = document.getElementById('fa_menulist');
        if (menu) {
          for (li = menu.getElementsByTagName('LI'), i = 0, j = li.length; i < j; i++) li[i].style.display = 'none'; // hide old menu links
          for (i in submenus) {
            li = document.createElement('LI');
           
            // check and correct incorrect data types
            if (submenus[i].constructor != Array) submenus[i] = [];
            if (submenus[i][0] == undefined) submenus[i][0] = '|';
            if (submenus[i][1] == undefined) submenus[i][1] = 0;
           
            // assign element attributes based on the string value
            submenus[i][0] == '|' ? li.className = 'fa_separator' : li.innerHTML = '<a href="' + submenus[i][0] + '" ' + (submenus[i][2] ? 'target="_blank"' : '') + '>' + (_lang[i] ? _lang[i] : i) + '</a>';
           
            // append the new item to the menu based on permissions
            if (_userdata.user_level == 1 || _userdata.user_level >= submenus[i][1] && submenus[i][1] != 1) menu.appendChild(li);
          }
        }
      });
    });


Potete salvare lo script adesso (verranno aggiunti due link per i moderatori), oppure continuare a leggere la nuova sezione per scoprire come modificare i link visualizzati. Wink

Modificare la toolbar

Per modificare i link visualizzati nel menu della tua toolbar, devi modificare l'oggetto submenus. E' posizionato all'inizio dello script ed ha questo aspetto:

Codice:
  var submenus = {
   
    See_my_profile : ['/u' + _userdata.user_id, 0],
    Edit_profile : ['/profile?mode=editprofile&page_profil=preferences', 0],
    'Separator 1' : ['|', 0],
   
    All_Topics : ['/sta/' + _userdata.username, 0],
    All_Messages : ['/spa/' + _userdata.username, 0],
    js_topics_followed : ['/search?search_id=watchsearch', 0],
    All_PMs : ['/privmsg?folder=inbox', 0],
    'Separator 2' : ['|', 0],
   
    'Reports' : ['/report', 2],
    'Archived Reports' : ['/report?mode=archive', 2],
    'Separator 3' : ['|', 2],
   
    Admin_panel : ['/admin', 1],
    Logout : ['/login?logout=1', 0]

  },


Personalizzazione

Crea un link personale

Ora, quindi, per creare il tuo collegamento devi semplicemente definire un nome che sarà a sinistra dei due punti, quindi creare un array a destra dei due punti usando le parentesi. ( [] ) Iniziamo semplicemente e creiamo un collegamento vuoto denominato Pagina HTML:
Codice:
'HTML Page' : []


Nota: se il collegamento che stai creando non è l'ultimo nell'elenco degli oggetti, è imperativo inserire una virgola alla fine della matrice. ( [] , ) Altrimenti, puoi omettere la virgola se è l'ultimo elemento dell'oggetto.

All'interno dell'array puoi inserire tre valori: [URL, PERMISSION_LEVEL, TARGET]

  • URL: questo dovrebbe essere l'URL a cui vuoi che il link ti porti. Poiché nell'esempio stiamo creando una pagina HTML, inserirò "/h1-my-html-page" . Tieni presente che il tuo URL dovrebbe essere racchiuso tra virgolette.

  • PERMISSION_LEVEL: questo è il livello di autorizzazione per il quale sarà disponibile il collegamento. Dovrebbe essere un numero compreso tra 0 e 2. Scegli il livello più adatto per il collegamento:

    • 0: Visibile a chiunque
    • 1 : Visibile solo agli amministratori
    • 2 : Visibile solo a moderatori e amministratori


    Per il mio esempio, sceglierò 0 in modo che il collegamento alla pagina HTML sia visibile a chiunque.

  • TARGET: questo è un terzo valore opzionale . Se impostato su true, facendo clic sul collegamento verrà aperto in una nuova finestra / scheda. Ad esempio, sarebbe simile a questo: ['/h1-my-html-page', 0, true ]


Ora con tutti i miei valori inseriti, il collegamento completato sarà simile a questo:
Codice:
'HTML Page' : ['/h1-my-html-page', 0]


Suggerimento: per semplificarti le cose, puoi copiare l'esempio sopra e apportare le modifiche desiderate.
Quindi, quando salvo lo script, dovrebbe essere visualizzato ovunque sia stato posizionato nell'oggetto dei sottomenu.

Creazione di un separatore

Se hai più link e vuoi creare un separatore è abbastanza semplice! Dato che hai letto l'ultima sezione dovresti già sapere come creare nuovi link, o "elementi". Segui la stessa routine, ma dagli un nome semplice come "separatore 1." L'unica differenza è che metterai una barra ( | ) come URL.

Codice:
'separator 1' : ['|', 0]


o script lo riconoscerà e l'elemento verrà inserito nel menu come separatore anziché come collegamento. Le stesse regole di autorizzazione si applicano ai separatori, quindi assicurati di scegliere il livello di autorizzazione corretto per evitare di mostrare più separatori affiancati.

Inoltre, non è possibile avere più separatori denominati "separatore 1", il nome è univoco, quindi è necessario incrementare il numero o modificare il nome per ogni nuovo separatore.

Riassunto

Con questo script sarai in grado di modificare i link visualizzati nel menu come meglio credi. Puoi anche modificare gli URL e le autorizzazioni dei link esistenti o creare il tuo elenco personalizzato per i tuoi membri .. le possibilità sono infinite, quindi personalizza!

Da Niko
il Lun 18 Gen 2021 - 18:35
 
Cerca in: Header del forum
Argomento: Toolbar: scegliere quali link visualizzare nel menu
Risposte: 0
Visite: 562

Tutorial: selezione di Luglio

Tutorial: selezione di Luglio


Carissimi membri,

Forumattivo è orgoglioso di annunciare l'apertura di una nuova #rubrica mensile. Ogni mese infatti, verrà pubblicato un annuncio contente un pack di 5+ tutorial e astuzie per il tuo forum.

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Scherm33

Saranno selezionati i migliori #tutorial ed #astuzie per aumentare le personalizzazione dei vostri forum. Iniziamo con il mese di... LUGLIO! /o/



1. Personalizza la tua pagina di errore 404: pagina non trovata:

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Scherm34

Quando si fa clic su un collegamento ed è sbagliato o non esiste, ci viene dato un messaggio di errore. Tuttavia, è un messaggio noioso e poco ricco di informazioni. Con questo script, sarà possibile modificare la pagina di errore (#404) a proprio piacimento.

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Tutori10Personalizza la tua pagina di errore 404



2. Creare un widget per il tuo staff online:

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo 5gDmL8y

Molto spesso, vorremmo mostrare agli utenti connessi, tramite le statistiche esistenti nel nostro forum,che i membri dello staff sono presenti. Con questo tutorial ti insegnerò come creare un #widget che visualizza automaticamente quando un membro dello staff è connesso.

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Tutori10Creare un widget per il tuo staff online



3. Effetto zoom sulle immagini nei topic:

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Scherm35

Grazie a questo tutorial potrai inserire la funzionalità di #ingrandire le immagini al passaggio del mouse. Per fare tutto questo, dovrai aggiungere alcuni codici CSS sul tuo forum.

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Astuce10Effetto zoom sulle immagini nei topic



4. Menu di connessione rapida popup:

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Scherm36

Normalmente cliccando sul bottone login nel menu di navigazione si viene reindirizzati alla pagina di #connessione.. con questa risorsa non sarà più necessario! Comparirà un popup dal quale potrete collegarvi senza cambiare pagina.

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Tutori10Menu di connessione rapida popup



5. Personalizzare la funzione degli hashtag:

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Scherm17

Con questo tutorial, scoprirai come poter personalizzare graficamente, tramite CSS, gli #hashtag sul tuo forum!

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Astuce10Personalizzare la funzione degli hashtag



6. Effetto lightbox nel tuo forum:

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Scherm37

Il forum di supporto portoghese ha realizzato un fantastico video per spiegare il funzionamento di questa astuzia Forumattivo. Semplicemente, per le immagini all'interno dei tuoi topic basterà un click per aprire un #popup con una visualizazione dell'immagine più in grande!

Hashtag tutorial su Forum dei Forum: Aiuto per Forumattivo Tutori10Effetto lightbox nel tuo forum



:categoria:E anche questo pack è giunto al termine! Se dovessi avere qualche problema con i tutorial, apri pure una nuova discussione in Problemi con lo script (Codici) :zen:

Se questi contenuti ti sono piaciuti, passa per la sezione Tutoriali, ne potrai trovare molti altri! :W:

Buona giornata da Forumattivo :thanks:


Da MattiaDes
il Mer 15 Lug 2015 - 10:49
 
Cerca in: Avvisi ed aggiornamenti
Argomento: Tutorial: selezione di Luglio
Risposte: 2
Visite: 1623

Inserire una notifica personalizzata

Ciao @son

si, ho un #tutorial in attesa giusto per questo :bene:

va bene se te lo fornisco domani? devo lavorarci un po' su :cuore:
Da Niko
il Gio 12 Mar 2015 - 17:19
 
Cerca in: I problemi risolti con i codici
Argomento: Inserire una notifica personalizzata
Risposte: 63
Visite: 4208

Torna in alto

Vai verso: