Heim > Artikel > Web-Frontend > Bootstarp erstellt zusammenklappbare Komponenten_Javascript-Tipps

Bootstarp erstellt zusammenklappbare Komponenten_Javascript-Tipps

WBOYOriginal: 2016-05-16 15:14:061267Durchsuche

In diesem Artikel erfahren Sie, wie Sie mit Bootstarp zusammenklappbare Komponenten erstellen. Der spezifische Inhalt ist wie folgt
Was ist erforderlich
Sie müssen auf jquery.js und bootstrap-collapse.js verweisen – beide JavaScript-Dateien befinden sich im Ordner docs/assets/js.
Sie können reduzierbare Komponenten erstellen, ohne viel JavaScript zu schreiben oder JavaScript aufzurufen.
Beispiel
Das erste Beispiel zeigt, wie man eine reduzierbare Komponente erstellt, ohne JavaScript aufzurufen.

<!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>

Erklärung
Hier sind drei Punkte zu beachten. Fügen Sie zunächst data-toggle="collapse" zu dem Link hinzu, auf den Sie klicken möchten, um die Komponente zu erweitern oder zu reduzieren.
Zweitens fügen Sie der übergeordneten Komponente ein href- oder Datenzielattribut hinzu, dessen Wert die ID der untergeordneten Komponente ist.
Drittens fügen Sie ein übergeordnetes Datenattribut hinzu, um einen Akkordeoneffekt zu erzeugen. Der Wert des data-parent-Attributs ist derselbe wie der Wert des id-Attributs des Hauptcontainer-Div (das die gesamte Accordion-Komponente enthält). Wenn Sie eine einfache Akkordeonkomponente erstellen möchten, die nicht so komplex wie ein Akkordeon sein muss, müssen Sie diese Eigenschaft nicht hinzufügen.
Beispiel
Das zweite Beispiel zeigt, wie man eine einfache zusammenklappbare Komponente erstellt.

<!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>

Aufruf über JavaScript
Sie können den folgenden Code verwenden, um die Minimierung über JavaScript auszulösen.

 $(".collapse").collapse()

Optionen, Methoden und Ereignisse
Hier sind einige Optionen, Methoden und Ereignisse, die über das Bootstrap Collapsible JavaScript-Plugin verfügbar sind. Die Details lauten wie folgt:
Optionen
parent:Der Werttyp ist Selector. Der Standardwert ist false. Wenn das übergeordnete Element angezeigt wird, werden alle reduzierbaren Elemente unter dem übergeordneten Element geschlossen.
toggle:Der Wert ist vom Typ Boolean. Der Standardwert ist wahr. Beim Aufruf werden alle reduzierbaren Elemente umgeschaltet.
toggle:Der Wert ist vom Typ Boolean. Der Standardwert ist wahr. Beim Aufruf werden alle reduzierbaren Elemente umgeschaltet.
Methode
.collapse(Optionen): Reduzierbaren Inhalt auslösen. Akzeptiert ein optionales Optionsobjekt.
.collapse('toggle'): Ein reduzierbares Seitenelement anzeigen oder ausblenden.
.collapse('show'): Zeigt ein reduzierbares Seitenelement an.
.collapse(hide): Ein reduzierbares Seitenelement ausblenden.
Veranstaltung
show: Dieses Ereignis wird unmittelbar nach dem Aufruf der Show-Instanzmethode ausgelöst.
angezeigt: Dieses Ereignis wird ausgelöst, wenn das reduzierbare Seitenelement angezeigt wird (und der CSS-Übergangseffekt ausgeführt wurde).
hide: Dieses Ereignis wird unmittelbar nach dem Aufruf der Methode zum Ausblenden der Instanz ausgelöst.
versteckt: Dieses Ereignis wird ausgelöst, wenn das reduzierbare Seitenelement für den Benutzer verborgen ist (und der CSS-Übergangseffekt abgeschlossen ist).

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript-Wasserfall-Flow-Bild, verzögertes Laden, Beispiel_Javascript-KenntnisseNächster Artikel：JavaScript-Wasserfall-Flow-Bild, verzögertes Laden, Beispiel_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen