En HTML, créer un spoiler - comment cela fonctionne:

FONTE ZOOM:

Si vous voulez créer un spoiler en HTML, vous pouvez le faire rapidement et facilement avec quelques lignes de code CSS et jQuery. CSS sert la conception graphique et jQuery est responsable JavaScript Extension pour click-effets. Comment tout cela fonctionne, cliquez ici.

Créer une structure de base de HTML

Avant vous pouvez animer le spoiler, vous devez d'abord prendre soin de la structure de base de HTML.

  • Fondamentalement, vous avez besoin pour un effet de spoiler de trois composants: un texte pour cliquer et donc d'afficher le texte de spoiler, texte à cliquer et cacher ainsi que le texte de spoiler réelle.
  • Le texte à afficher pourrait être "Afficher les révélations" et chaud à cacher "Cacher les spoilers".
  • Pour utiliser la même fonction pour les deux clics textes, définir à la fois un "a" tag comme un cadre fixe, donc un lien et de lui donner une valeur vide, parce que grâce à ce lien oui non nouvelle page se ouvre.
  • Cela vous permet d'assigner un clic l'action ce lien aussi, vous devez attribuer l'une journée durer un ID.
  • Le code complet pourrait ressembler à ceci:
  • Entre maintenant écrivent les deux textes à cliquer et l'affecter à une balise span avec une classe à l'ordre de faire cela avec CSS plus tard.
  • Pleine fonction clic ressemblerait à ceci:
    class = 'left'> class = Afficher les révélations de «gauche»> Cacher les spoilers
  • Enfin, vous devez créer un autre élément div dans lequel vous pouvez d'abord caché par le texte de spoiler et pouvez l'afficher en cliquant. Cela pourrait par exemple être le suivant:
    ce est le texte caché

Conception graphique avec CSS

Une fois que vous avez créé le cadre HTML, vous pouvez vous concentrer sur l'utilisation de CSS pour la mise en œuvre graphique, ce est à dire le texte de spoiler et le lien pour cacher cacher en premier.

  • Vous devez d'abord dans la tête de votre fichier HTML pour créer une zone de définition CSS. Il suffit d'entrer les deux lignes suivantes:
  • Maintenant, vous pouvez définir les éléments individuels entre les deux lignes. Pour masquer le texte de spoiler d'abord, vous devez écrire:
    #spoiler
    {
    display: none;
    }
  • Affichage définit l'option d'affichage de l'élément et "none" spécifie que l'élément est caché.
  • Le même vous pouvez maintenant le texte "Cacher les spoilers" demande en allant sur la balise span "style =" display: none; '', vous laissant avec la ligne entière devrait ressembler à ceci:
    Cacher les spoilers
  • En option, vous pouvez faire les éléments encore, par exemple, changer la couleur des liens en bleu:
    .link
    {
    color: blue;
    }

Créer un effet de spoiler avec jQuery

Une fois que vous avez créé la structure de base de HTML et génère les deux éléments cachés avec CSS, vous pouvez maintenant créer l'effet de spoiler avec jQuery.

  • Pour cela, vous devez d'abord la bibliothèque actuelle jQuery pour accéder aux différentes fonctions. Il suffit d'ajouter dans la section de la tête la ligne suivante:
  • Ensuite, définir un code de script dans la section de tête en écrivant:
  • Entre maintenant créer le code de l'effet de spoiler. Cela ressemble comme suit:
    .ready $
    {
    $ .cliquez
    {
    .toggle $;
    .toggle $;
    });
    });
  • La première ligne indique que la fonction est chargé lorsque vous démarrez votre page HTML et est prêt ainsi.
  • Ensuite, vous avez votre lien avec l'ID "élargir" une fonction de clic à («clic»).
  • Les deux lignes restantes définissent les actions qui devraient se produire lorsque l'utilisateur clique sur le lien, ce est à dire soit "Afficher les révélations" ou "Cacher les spoilers".
  • Le texte ".toggle" bedeuetet ici est que l'élément alternatif est affiché ou masqué, en fonction de ce qui est actuellement active.
  • Depuis le "spoiler" Div-Elemt est d'abord caché, ce est affiché, de sorte que le texte de spoiler apparaît.
  • Pendant le "lien" de l'élément de serrage ensuite passer deux actions: d'abord, le texte affiché est caché et d'autre part le texte masqué apparaît.
  • Lorsque vous revenez cliquer sur un lien, le contraire qui se passerait exactement: le texte de spoiler disparaît, l'écran "Afficher les révélations" et "Cacher les spoilers" disparaît.
  • Le code complet est donc pour votre section HEAD:
  • Ainsi que pour la région de votre corps:
    class = 'left'> class = Afficher les révélations de «gauche»> Cacher les spoilers
    Ce est le texte caché.
VOIR AUSSI:
  1.  
  2.  
  3.  
Sans commentaires

Laisser un commentaire

Code De Sécurité