recherche

Maison  >  Article  >  interface Web  >  Bootstarp crée des astuces de composants_javascript pliables

Bootstarp crée des astuces de composants_javascript pliables

WBOY
WBOYoriginal
2016-05-16 15:14:061312parcourir

Cet article apprendra comment créer des composants pliables via Bootstarp. Le contenu spécifique est le suivant
. Ce qui est requis
Vous devez référencer jquery.js et bootstrap-collapse.js - les deux fichiers JavaScript se trouvent dans le dossier docs/assets/js.
Vous pouvez créer des composants pliables sans écrire beaucoup de JavaScript ni appeler JavaScript.
Exemple
Le premier exemple montre comment créer un composant pliable sans appeler JavaScript. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>collapsible example</title>
  <link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
  <div class="container-fluid">
   <div class="accordion" id="accordion2">
      <div class="accordion-group">
       <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
         Click me to exapand. Click me again to collapse. Part I.
        </a>
       </div>
       <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
        <div class="accordion-inner">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
       </div>
      </div>
      <div class="accordion-group">
       <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
         Click me to exapand. Click me again to collapse. Part II.
        </a>
       </div>
       <div id="collapseTwo" class="accordion-body collapse">
        <div class="accordion-inner">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
       </div>
      </div>
      <div class="accordion-group">
       <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
         Click me to exapand. Click me again to collapse. Part III.
        </a>
       </div>
       <div id="collapseThree" class="accordion-body collapse">
        <div class="accordion-inner">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
       </div>
      </div>
     </div>
  </div>
 <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
 <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

Explication
Il y a trois points à noter ici. Tout d’abord, ajoutez data-toggle="collapse" au lien sur lequel vous souhaitez cliquer pour développer ou réduire le composant.
Deuxièmement, ajoutez un attribut href ou data-target au composant parent dont la valeur est l'identifiant du composant enfant.
Troisièmement, ajoutez un attribut data-parent pour créer un effet accordéon. La valeur de l'attribut data-parent est la même que la valeur de l'attribut id du div du conteneur principal (qui contient l'intégralité du composant accordéon). Si vous souhaitez créer un composant accordéon simple qui n'a pas besoin d'être aussi complexe qu'un accordéon, vous n'avez pas besoin d'ajouter cette propriété.
Exemple
Le deuxième exemple montre comment créer un composant pliable simple. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>collapsible via JavaScript example</title>
  <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe.
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

Appel via JavaScript
Vous pouvez utiliser le code ci-dessous pour déclencher le repli via JavaScript. 

 $(".collapse").collapse()

Options, méthodes et événements
Voici quelques options, méthodes et événements disponibles via le plugin JavaScript pliable Bootstrap. Les détails sont les suivants :
Options
parent : le type de valeur est Sélecteur. La valeur par défaut est fausse. Lorsque l'élément parent est affiché, tous les éléments réductibles sous l'élément parent sont fermés.
bascule : la valeur est de type booléen. La valeur par défaut est vraie. Lorsqu'il est appelé, basculez tous les éléments pliables.
bascule : la valeur est de type booléen. La valeur par défaut est vraie. Lorsqu'il est appelé, basculez tous les éléments pliables.
Méthode
.collapse(options) : Déclenchez le contenu pliable. Accepte un objet option facultatif.
.collapse('toggle') : afficher ou masquer un élément de page pliable.
.collapse('show') : affiche un élément de page pliable.
.collapse(hide) : masquer un élément de page pliable.
Événement
show : cet événement est déclenché immédiatement après l'appel de la méthode d'instance show.
affiché : cet événement est déclenché lorsque l'élément de page pliable est affiché (et que l'effet de transition CSS a été exécuté).
hide : cet événement est déclenché immédiatement après l'appel de la méthode d'instance hide.
caché : cet événement est déclenché lorsque l'élément de page pliable est masqué à l'utilisateur (et que l'effet de transition CSS est terminé).

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Image de flux de cascade JavaScript chargement paresseux example_javascript skillsArticle suivant：Image de flux de cascade JavaScript chargement paresseux example_javascript skills

Articles Liés

Voir plus