Throbber gif hébergement drupal

Soumis par Drupion soutien le 25 Septembre 2012 12:44

Les fenêtres modales sont d'excellentes caractéristiques de conception car il vous permet d'afficher facilement plus d'informations sur une page sans causer de la gêne pour le public en leur faisant charger une page tout à fait différente. J'utilise modaux où je veux afficher plus d'informations qui ne sont pas assez volumineux pour mériter une charge pleine page séparée.

Figure 1: Ce sont des liens de titres, générés par une vue que lorsque la gâchette cliqué une fenêtre modale avec du contenu supplémentaire.

Figure 2: Après avoir cliqué sur un lien comme le montre la figure 1, une fenêtre modale apparaît avec des informations supplémentaires.

Il y a deux façons générales de créer facilement modaux dans Drupal. La première méthode, et courante consiste à utiliser le ColorBox ou les modules de Lightbox2. Les deux modules ont des fonctionnalités intégrées et peuvent être configurés au niveau du constructeur de site.

Pour plus de contrôle sur thématisation et le contenu de la connaissance modale et gagner de la façon dont les fenêtres modales travail, je pris le plongeon dans Earl Miles (alias Merlin du Chaos) Outils du Chaos, ou méthode ctools de création modale. Voici comment je l'ai fait.

Ce tutoriel nécessite un niveau intermédiaire à la compréhension avancée de Drupal 7. Vous aurez besoin de construire un module pour le faire.

1. Nous nommerons notre module "Happy", afin de créer un répertoire dans votre Drupal, nommé install sites / all / modules / heureux.

A l'intérieur du répertoire « heureux », créez deux fichiers vides, « happy.module » et « happy.info. » En outre, télécharger et activer le module de ctools et le module Views. comme ctools une dépendance pour le modal, et vues est une dépendance pour cet exemple.

De plus, ajoutez ce qui suit pour les personnalisations modales à l'intérieur du répertoire du module:

• Un "js" dossier avec "happy.js", par exemple dans des 'sites / all / modules / heureux / js / happy.js').
• Un répertoire « css » avec « happy.css » à l'intérieur, par exemple 'Sites / all / modules / css / happy.css').
• Un répertoire images pour les AJAXs personnalisés throbber gifs (si désiré), par exemple 'Sites / all / modules / heureux / images / [image-name] .jpg'
• Un répertoire de thème de notre modèle dans la coutume de vues « sites / all / modules / heureux / thème », et à l'intérieur de ce répertoire un modèle de vue sera placé plus loin dans ce tutoriel.

2. Configurez le module avec le fichier « happy.info ».

Ouvrez, collez le dessous dans le fichier et enregistrer:

name = Bonne
Description = Un module d'exemple pour créer des fenêtres modales en utilisant le cadre ctools.
core = 7.x
package = Interface utilisateur
php = 5.2.4
dépendances [] = ctools
dépendances [] = vues

Note Side: Pour ce buts de exemple, nous utilisons Vues de GENERAT une liste de liens vers des noeuds qui, lorsque vous cliquez dessus, ouvrez le contenu du nœud dans la fenêtre modale. Par conséquent, pour cet exemple, Views est une dépendance.

3. Ouvrez le « happy.module » et placer l'échafaudage module standard Drupal en haut, puis enregistrez.

4. La première étape consiste à définir le chemin du menu le lien modal ouvrira lorsque la fenêtre modale apparaît.

Voici quelques points avancés: Le module ctools identifie « % ctools_js » comme un espace réservé dans le chemin de la requête. Ctools remplacera cet argument de l'espace réservé avec « js » ou « nojs, » en fonction des capacités Javascript de navigateur de l'utilisateur. Le « rappel de page » est une fonction que nous allons définir suivante. C'est là la plupart du levage lourd a lieu. Enfin, il n'y a aucune restriction d'accès dans cet exemple. Autrement dit, les utilisateurs anonymes peuvent accéder au contenu du modal depuis le « rappel de page » est réglé sur TRUE.

5. Définir la fonction « rappel de page »:

Bien qu'il semble compliqué, la fonction ci-dessus est simple. Si le navigateur de l'utilisateur ne supporte pas Javascript, comme pour nous déterminé par ctools, nous allons leur donner un contenu non Javascript. Dans le cas contraire, nous le feu au large et modal ctools leur donner le mode d'affichage Teaser d'un nœud.

6. Ensuite, nous avons besoin d'injecter les paramètres de la fenêtre modale dans la charge de la page du parent.

Vous pouvez le faire un certain nombre de fonctions de crochet où Drupal rend le contenu de la page. crochets Exemple où le code suivant travail comprennent hook_node_view (modifier la pièce d'objet de contenu $ node->), hook_block_view, hook_field_load, et etc.

Aux fins de cet exemple, je suis de générer une vue titres de nœud que lorsque vous cliquez dessus, l'affichage teaser du nœud à l'intérieur du modal. Pour cela, je le crochet Vues, ​​hook_views_pre_render ():

Ceci est beaucoup à écrire lors de la création d'un modal. En résumé, nous devons charger tous les fichiers ctools JS. Ensuite, nous définissons la taille et les caractéristiques du modal en utilisant le tableau de configuration ctools (dans cet exemple, la happy_style de $). Et enfin, nous injectons les paramètres requis, fichier Javascript et fichier CSS pour thématisation le contenu modal.

7. Définir les liens qui déclencheront la fenêtre modale apparaisse.

Jusqu'à présent, nous avons défini la page et le contenu qui affiche à l'intérieur du modal, et nous avons défini les styles initiaux du modal. Maintenant, nous devons définir le déclencheur qui ouvre la fenêtre modale. Tout ce qui est vraiment nécessaire sont des liens avec des classes particulières de ctools. Depuis que je suis en utilisant Vues, ​​je vais définir un modèle de vues pour ma liste des titres raccordables. De cette façon, je peux modifier les liens contenus dans la vue à ctools déclenchent au courant.

Vous pouvez également définir les liens qui déclenchent modal sur la couche de thème en utilisant les crochets hook_preprocess, ou à l'intérieur d'un modèle de vues à l'intérieur du répertoire du thème du site.

Je préfère avoir toutes les fonctionnalités d'un module personnalisé dans le même répertoire du module. Il est plus propre. Par conséquent, je choisi de créer un modèle de vues à l'intérieur du répertoire du module heureux.

Voici la meilleure façon. enregistrer d'abord le modèle thématique et offre une vue:

Après avoir déclaré cela, vous devrez créer un [module_dir] / répertoire thématique et placez-le - fichier à l'intérieur 'vues-view champs happy.tpl.php. Pour le contenu initial, utilisez le contenu du défaut du module Views « vue-view-fields.tpl.php » le modèle, situé à l'intérieur du répertoire du thème du module Views.

Parce que je l'ai enregistré un hook_theme et à l'intérieur du hook_theme, a déclaré un modèle de vues, je peux utiliser pour disputer avec l'affichage éventuel des liens de titre de hook_preprocess_view () Views j'ai créé:

À ce stade, la variable ctools_link de $ sera disponible pour moi dans les vues-view-champs - fichier happy.tpl.php. A l'intérieur de ce modèle, il suffit d'ajouter la ligne:

9. Le fichier Javascript.

Nous avons accompli tous les tass PHP pour créer un modal ctools. Maintenant, nous tournons notre attention sur le Javascript.

Vous pouvez commencer par la valeur par défaut ctools dossier modal à l'intérieur du module ctools_ajax_example, mais j'ai simplifié ce fichier pour vous, en déclarant tout ce que vous avez besoin pour commencer.

Voici les sites / all / modules / heureux / js / contenu du fichier happy.js:

10. Maintenant, vous êtes prêt à le style modal.

L'utilisation de 'sites / all / modules / heureux / css / happy.css', le style de la fenêtre modale à vos goûts.

À ce stade, vous avez créé un modal ctools dans Drupal 7. Pour plus d'informations, éviter Google jusqu'à ce que vous avez consommé les vastes fichiers d'aide HTML à l'intérieur du module ctools à 'sites / all / modules / ctools / help / modal.html.'

Bonne Modaling avec Drupal 7!

Articles Liés

Si vous utilisez plus d'un site Drupal, vous pouvez simplifier la gestion et pouvez mettre à jour vos sites en utilisant la fonction multi-site. Multi-site vous permet de partager un seul Drupal ...

Je crée une archive de site Web qui permettra aux utilisateurs de télécharger différents types de contenu multimédia y compris la vidéo, audio, images, documents et textes. Je veux le rendre facile pour les utilisateurs de ...

HTTPS est un protocole qui crypte les requêtes HTTP et leurs réponses. Cela garantit que si quelqu'un en mesure de compromettre le réseau entre votre ordinateur et le serveur que vous demandez ...

Note: extra merci à Doug Vann pour fournir la motivation pour poster enfin ce blog! Au début de 2016, lorsque les modules liés Solr-API de recherche et de Drupal 8 étaient au début de l'alpha ...

Il y a plusieurs raisons pour lesquelles un administrateur ou un développeur de systèmes peuvent choisir d'héberger plusieurs sites sur le même serveur dans une configuration multisite. Par exemple, une telle configuration pourrait: ...