Ich möchte ein auf Bootstrap verschachteltes Accordion erstellen. An und für sich kein Problem.
2 Fehler treten dabei allerdings auf
HTML-Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Builder V0.0.1</h1> </div> </div> <div class="row"> <div class="col-md-12"> <p>Create a Field</p> </div> </div> <form class="form-horizontal" action="/create_table.php"> <div class="form-group"> <label for="type" class="control-label col-sm-2">Type <span title="Hier können sie den zu verwendenden Feldtype auswählen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <select class="form-control input-sm" id="type"> <optgroup label="Einzeilige Texte"> <option value="text">Text</option> <option value="password">Password</option> <option value="telephon">Telephon</option> <option value="url">URL</option> <option value="search">Suche</option> <option value="email">EMail</option> </optgroup> <optgroup label="Mehrzeiliger Text"> <option value="textarea">Textbereich</option> <option value="editor">Editor</option> </optgroup> <optgroup label="Datumseingaben"> <option value="date">Datum</option> <option value="local_date">Lokales Datum</option> <option value="week">Woche</option> <option value="month">Monat</option> <option value="time">Zeit</option> </optgroup> <optgroup label="Auswahlfelder"> <option value="checkbox">Checkbox</option> <option value="checkboxes">Checkboxes</option> <option value="select">Select</option> <option value="radios">Radios</option> </optgroup> <optgroup label="Farbe"> <option value="color">color</option> </optgroup> </select> </div> </div> <div class="row"> <div class="section-header"> <a href="#page1" data-toggle="collapse" aria-expanded="false" aria-controls="page1">Allgemein</a> </div> <div class="section-body"> <div id="page1" class="collapse" style="padding-top: 10px; padding-right: 15px"> <div class="form-group"> <label for="name" class="control-label col-sm-2">Name <span title="Der Name des Feldes. Er muss angegeben werden, um einen eindeutigen Bezug auf das Feld zu erhalten. Dieses ist ein Pflichtfeld und darf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="name"> </div> </div> <div class="form-group"> <label for="lable" class="control-label col-sm-2">Lable <span title="Dieses ist der sichtbare Label für das Feld. Die Angabe ist optional und darf einen beliebigen Text enthalten." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="lable"> </div> </div> <div class="form-group"> <label for="id" class="control-label col-sm-2">ID <span title="Dieses ist der, durch das attribute 'id' gegebener Bezeichner. Sollte die hier nichts angegeben werden, so wird der 'Name' als Bezeichner verwendet. Die Angabe ist optional. Bei Angabe der ID darf sie nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestehen" data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="id"> </div> </div> </div> </div> </div> <div class="row"> <div class="section-header"> <a href="#page2" data-toggle="collapse" aria-expanded="false" aria-controls="page2">Events</a> </div> <div class="section-body"> <div id="page2" class="collapse" style="padding-top: 10px; padding-right: 15px"> <div class="form-group"> <label for="onblur" class="control-label col-sm-2">onBlur <span title="Dieses ist der Namen des JavaScript onBlur. Es wird ausgelöst wenn das Eingabefeld verlassen wird. Die Eingabe ist optionales und daraf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="onblur"> </div> </div> <div class="form-group"> <label for="onchange" class="control-label col-sm-2">onChange <span title="Dieses ist der Namen des JavaScript onChange - Events. Es wird ausgelöst wenn eine Selektion geändert wird. Die Eingabe ist optionales und daraf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="onchange"> </div> </div> <div class="form-group"> <label for="onfocus" class="control-label col-sm-2">onFocus <span title="Dieses ist der Namen des JavaScript onFocus. Es wird ausgelöst wenn das Eingabefeld den Focus erhält. Die Eingabe ist optionales und daraf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="onfocus"> </div> </div> <div class="form-group"> <label for="onselect" class="control-label col-sm-2">onSelect <span title="Dieses ist der Namen des JavaScript onChange. Es wird ausgelöst wenn der Text selektiert wird. Die Eingabe ist optionales und daraf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="onselect"> </div> </div> <div class="row"> <div class="section-header"> <a href="#page2_1" data-toggle="collapse" aria-expanded="false" aria-controls="page2_1">Events</a> </div> <div class="section-body"> <div id="page2_1" class="collapse" style="padding-top: 10px; padding-right: 15px"> <div class="form-group"> <label for="onkeydown" class="control-label col-sm-2">onKeyDown <span title="Dieses ist der Namen des JavaScript onKeyDown. Es wird ausgelöst wenn eine Taste gedrückt wird. Die Eingabe ist optionales und daraf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="onkeydown"> </div> </div> <div class="form-group"> <label for="onkeypress" class="control-label col-sm-2">onKeyPress <span title="Dieses ist der Namen des JavaScript onKeyPress. Es wird ausgelöst wenn eine Taste gedrückt wird. Das Ereignis onKeyPress tritt nach dem Event onKeyDown ein. Es werden je nach Browser nicht alle Tasten unterstüzt (z.B. 'SHIFT', 'ALT', 'STRG', 'ES'). Um alle Tasten abzufangen verwende onKeyDown. Die Eingabe ist optionales und daraf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="onkeypress"> </div> </div> <div class="form-group"> <label for="onkeyup" class="control-label col-sm-2">onKeyUp <span title="Dieses ist der Namen des JavaScript onKeyUp. Es wird ausgelöst wenn eine Taste losgelassen wird. Die Eingabe ist optionales und darf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="onkeyup"> </div> </div> </div> </div> </div> <div class="form-group"> <label for="ondrop" class="control-label col-sm-2">onDrop <span title="Dieses ist der Namen des JavaScript onDrop. Es wird ausgelöst wenn ein Element bei DragDrop fallengelassen wird. Die Eingabe ist optionales und darf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="ondrop"> </div> </div> <div class="form-group"> <label for="ondragover" class="control-label col-sm-2">onDragOver <span title="Dieses ist der Namen des JavaScript onDropOver. Das Ereignis ondragover gibt an, wo die gezogenen Daten abgelegt werden können. Die Eingabe ist optionales und darf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="ondragover"> </div> </div> <div class="form-group"> <label for="ondragstart" class="control-label col-sm-2">onDragStart <span title="Dieses ist der Namen des JavaScript onDragStart. Wird ausgelöst, wenn der Benutzer ein Element zieht. Die Eingabe ist optionales und darf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="ondragstart"> </div> </div> <div class="form-group"> <label for="ondragenter" class="control-label col-sm-2">onDragEnter <span title="Dieses ist der Namen des JavaScript onDragStart. Wird ausgelöst, wenn das gezogene Element das Ablageziel erreicht. Die Eingabe ist optionales und darf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="ondragenter"> </div> </div> <div class="form-group"> <label for="ondrag" class="control-label col-sm-2">onDrag <span title="Dieses ist der Namen des JavaScript onDragStart. Wird ausgelöst, wenn ein Element gezogen wird. Die Eingabe ist optionales und darf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="ondrag"> </div> </div> <div class="form-group"> <label for="ondragend" class="control-label col-sm-2">onDragend <span title="Dieses ist der Namen des JavaScript onDragStart. Wird ausgelöst, wenn der Benutzer das Element vollständig gezogen hat. Die Eingabe ist optionales und darf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="ondragend"> </div> </div> <div class="form-group"> <label for="ondragleave" class="control-label col-sm-2">onDragLeave <span title="Dieses ist der Namen des JavaScript onDragStart. Wird ausgelöst, wenn das gezogene Element das Ablageziel verlässt. Die Eingabe ist optionales und darf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="ondragleave"> </div> </div> <div class="form-group"> <label for="ondrop" class="control-label col-sm-2">onDrag <span title="Dieses ist der Namen des JavaScript onDragStart. Wird ausgelöst, wenn das gezogene Element auf dem Ablageziel abgelegt wird. Die Eingabe ist optionales und darf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="ondrop"> </div> </div> <div class="form-group"> <label for="onchange" class="control-label col-sm-2">Name <span title="Dieses ist der Namen des JavaScript onChange. Es wird ausgelöst wenn das Eingabefeld verlassen wird. Die Eingabe ist optionales und daraf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="onchange"> </div> </div> <div class="form-group"> <label for="onchange" class="control-label col-sm-2">Name <span title="Dieses ist der Namen des JavaScript onChange. Es wird ausgelöst wenn das Eingabefeld verlassen wird. Die Eingabe ist optionales und daraf nur aus Kleinbuchstaben, Großbuchstaben, Zahlen und '_' (Unterstrich) bestzen." data-toggle="tooltip" data-placement="top" data-html="true"><span class="glyphicon glyphicon-info-sign"></span></span>:</label> <div class="col-sm-10"> <input type="text" class="form-control input-sm" id="onchange"> </div> </div> </div> </div> </div> </form> </div> <style> .tooltip-inner { max-width: 350px; /* If max-width does not work, try using width instead */ width: 350px; } a:link, a:visited { color: #666; text-decoration: none; } a:hover, a:active { color: #000; text-decoration: none; } .section-header { font-weight: bold; background-color: #ccc; padding: 5px 5px 5px 15px; border: 1px solid #bbb; } .section-body { // padding: 10px 5px 5px 15px; border-style: hidden solid solid solid; border-color: #ccc; border-width: 1px; } </style> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); $( function() { $( "#accordion" ).accordion(); } ); </script> </body> </html>
- Bei vielen "form-group"s werden, wenn sie aufgeklappt werden und es ein Bildschirm überlauf nach unten hin passiert, wird es zumindest in Chrome zur linken Seite verschoben
- bei verschachtelten Einträgen, passiert ein Fehler
Kommentar