Throbber gif Hosting Drupal

Inserito da Drupion supporto per set 25, 2012 00:44

Le finestre modali sono eccellenti caratteristiche di progettazione perché permette di visualizzare facilmente maggiori informazioni su una pagina senza causare l'inconveniente al pubblico facendoli caricare una pagina completamente diversa. Io uso modali dove voglio visualizzare più informazioni che non è abbastanza voluminoso da meritare un carico separata pagina intera.

Figura 1: Questi sono i link dei titoli, generate da una visione che se cliccato grilletto una finestra modale con contenuti aggiuntivi.

Figura 2: Dopo cliccando su un collegamento come mostrato in figura 1, viene visualizzata una finestra modale con informazioni aggiuntive.

Ci sono due modi generali per creare facilmente modali in Drupal. Il primo, e comune metodo consiste nell'utilizzare il moduli Lightbox2 ColorBox o. Entrambi i moduli hanno alcune funzionalità built-in e possono essere configurati a livello di sito del costruttore.

Per un maggiore controllo sulla tematizzazione e il contenuto del modali, e acquisire la conoscenza di come funzionano finestre modali, ho preso il grande passo in Earl Miles' (aka Merlin of Chaos) Strumenti del Caos, o il metodo CTools della creazione modale. Ecco come ho fatto.

Questo tutorial richiede un livello intermedio ed avanzato di conoscenza di Drupal 7. Sarà necessario creare un modulo per fare questo.

1. Noi chiameremo il nostro modulo "Felice", in modo da creare una directory all'interno del vostro Drupal install nome, siti / all / modules / felice.

All'interno della cartella 'felice', creare due file vuote, 'happy.module' e 'happy.info.' Inoltre, scaricare e abilitare il modulo CTools e il modulo Visualizzazioni. come CTools una dipendenza per il modali, e Vista è una dipendenza per questo esempio.

Inoltre, aggiungere il seguente per le personalizzazioni modali all'interno della directory del modulo:

Una cartella "js" con "happy.js" all'interno, ad esempio 'sites / all / modules / felici / js / happy.js').
Una directory "css" con "happy.css" all'interno, per esempio 'Sites / all / modules / css / happy.css').
Una directory immagini per le AJAXs personalizzati throbber gif (se lo si desidera), ad esempio, '/ All / modules / felice / immagini / [image-name] .jpg siti'
Una cartella del tema per la nostra Visualizzazioni personalizzate modello in 'sites / all / modules / felice / a tema', e dentro quella directory di un modello di vista sarà posizionato più avanti in questo tutorial.

2. Configurare il modulo con il file 'happy.info'.

Aprire, incollare il seguito nel file e salvare:

name = Felice
Descrizione = un modulo di esempio per la creazione di finestre modali utilizzando il framework CTools.
nucleo = 7.x
package = Interfaccia utente
php = 5.2.4
dipendenze [] = ctools
dipendenze [] = vista

Nota a margine: Per gli scopi di questo esempio, stiamo usando Visualizzazioni ai generat un elenco di link a nodi che, se cliccato, aprire il contenuto del nodo all'interno della finestra modale. Pertanto, per questo esempio, Vista è una dipendenza.

Throbber gif Hosting Drupal Configurare il modulo con la

3. Aprire la 'happy.module' e posizionare il modulo di impalcature standard di Drupal in alto, quindi salvare.

4. Il primo passo è quello di definire il percorso di menu il link modale si aprirà quando viene visualizzata la finestra modale.

Qui ci sono un paio di punti avanzati: Il modulo CTools identifica "% ctools_js" come segnaposto nel percorso di richiesta. CTools sostituirà tale argomento segnaposto con "js" o "nojs", a seconda della capacità di Javascript del browser dell'utente. La "pagina di callback" è una funzione che definiremo prossimo. Questo è dove la maggior parte del lavoro avviene. Infine, non ci sono limitazioni di accesso in questo esempio. Cioè, gli utenti anonimi possono accedere al contenuto del modal dal momento che la 'pagina di callback' è impostato su TRUE.

5. Definire la funzione di 'pagina di callback':

Anche se apparentemente complicata, la funzione sopra è diretto. Se il browser dell'utente non supporta Javascript, come determinato per noi da CTools, quindi daremo loro contenuto non Javascript. In caso contrario, ci fiamme al largo dei modali CTools e dare loro la modalità di visualizzazione Teaser di un nodo.

6. Quindi, abbiamo bisogno di iniettare le impostazioni per la finestra modale nel caricamento della pagina del genitore.

Si può fare questo è una serie di funzioni hook dove Drupal rende il contenuto della pagina. ganci esempio in cui il seguente codice funzionerà includono hook_node_view (modificare il $ node-> contenuti oggetto parte), hook_block_view, hook_field_load, ed ecc

Ai fini di questo esempio, sto generando una vista dei titoli dei nodi che se cliccato, il display del teaser del nodo all'interno del modale. Per questo, ho usato il gancio Vista, hook_views_pre_render ():

Questo è molto di scrivere quando si crea un modale. In sintesi, dobbiamo caricare tutti i file CTools JS. Poi, definiamo le dimensioni e le caratteristiche del modal utilizzando la matrice di configurazione CTools (in questo esempio, il $ happy_style). E, infine, abbiamo iniettare le impostazioni necessarie, file JavaScript, e file CSS per tematizzazione il contenuto modali.

7. Definire i link che innescheranno che appaia la finestra modale.

Finora abbiamo definito la pagina e il contenuto che verrà visualizzato all'interno della modali, e abbiamo definito gli stili di iniziali del modale. Ora, dobbiamo definire il trigger che si aprirà la finestra modale. Tutto ciò che è veramente necessario sono i collegamenti con le classi particolari CTools. Dal momento che sto usando Vista, sto andando a definire un modello di vista per la mia lista dei titoli linkabili. In questo modo, posso modificare i collegamenti all'interno della vista di essere CTools innescare consapevoli.

In alternativa, è possibile definire i collegamenti che attivano il modal sullo strato tema utilizzando i ganci hook_preprocess, o all'interno di un modello di vista all'interno di directory il tema del sito.

Io preferisco avere tutte le funzionalità di un modulo personalizzato all'interno della stessa directory del modulo. E 'più pulito. Pertanto, ho optato per creare un modello di vista all'interno della directory del modulo Felice.

Ecco il modo migliore. In primo luogo registrare il modello di tema e vista:

Dopo aver dichiarato questo, è necessario creare una directory [module_dir] / tema e posizionare i 'vista-view-campi - happy.tpl.php' di file all'interno. Per contenuto iniziale, utilizzare i contenuti di default "vista-view-fields.tpl.php" template del modulo Vista, che si trova all'interno della directory il tema del modulo Viste.

Perché ho registrato un hook_theme e all'interno del hook_theme, ha dichiarato un modello Visualizzazioni, posso usare hook_preprocess_view Vista () per disputare con l'eventuale visualizzazione dei collegamenti titolo che ho creato:

A questo punto, il $ ctools_link variabile sarà a disposizione per me il punto di vista-view-campi - File happy.tpl.php. Dentro tale modello, è sufficiente aggiungere la riga:

9. il file JavaScript.

Abbiamo compiuto tutti i Tass PHP per la creazione di un modale CTools. Ora ci rivolgiamo la nostra attenzione al Javascript.

Si può iniziare con il file di default CTools modale js all'interno del modulo ctools_ajax_example, ma ho semplificato il file per voi, dichiarando tutto ciò che serve per iniziare.

Ecco i siti / tutti i moduli felici / js contenuto / / / del file happy.js:

10. Ora si è pronti per lo stile modale.

Usando 'sites / all / modules / felice / css / happy.css', lo stile della finestra modale al vostro gusto.

A questo punto, si è creato un modale CTools in Drupal 7. Per ulteriori informazioni, evitare di Google fino a quando avete consumato le ampie file della Guida HTML all'interno del modulo CTools a 'sites / all / modules / ctools / help / modal.html.'

Felice Modaling con Drupal 7!

Guarda questo video!

Choose Hosting

Top 3

Throbber gif Hosting Drupal

Articoli Correlati