Ich war in letzter Zeit sehr beschäftigt mit der Arbeit und überarbeitet ein System. Der Projekthintergrund wurde von MVC1.0 entwickelt, aber der Front-End-Teil wurde mehrere Versionen geändert, und die vorherigen Designer sind sehr leistungsfähig und entwickeln sowohl die Entwicklung als auch die Front-End-Entwicklung. Es ist bereits sehr modisch und innovativ und verwendet das immer beliebte Bootstrap-Toolkit, und es gibt viele, die es als Web-Front-End-CSS-Framework definieren. Um ehrlich zu sein, wusste ich erst zuvor, dass es von Twitter produziert wurde und die Schnittstelle besser war. Aber es wurde in tatsächlichen Projekten nicht verwendet. Meine neuen Kollegen aus dem Unternehmen haben dies bereits zuvor getan und planten, es im offiziellen Website des Unternehmens zu verwenden. Weil ich nicht weiß, ist der Anführer nicht daran interessiert, also ist es nutzlos. Sie sagte, dass die Zusammenarbeit mit weniger zur Arbeit an Projekten die Entwicklungseffizienz verbessern und das System schöner und schöner machen kann, aber es unterstützt auch adaptives Design besser.
Die Projektanforderung besteht darin, das HTML Native Select-Tag durch den in der folgenden Abbildung gezeigten Dropdown-Box-Effekt zu ersetzen. Normalerweise sehe ich diese Art von Nachfrage. Wenn ich die nativen HTML -Tags ändern möchte, mag ich es nicht. Obwohl ich auch weiß, dass dieselben Funktionen wie Select über die UI- und Li -Tags und JavaScript -Code erreicht werden können, habe ich noch nie versucht, sie zu schreiben. Wenn es ein Problem mit der Kompatibilität des Fehlers und des Browsers gibt, werde ich mit PM kommunizieren. Sollte ich diesen Auswahl nicht ändern? Ich werde den nativen Select verwenden. PM sagte, dass es die Benutzerstörungen reduzieren und auf diese Option nicht zu viel Aufmerksamkeit schenken kann. Ich denke, das ist dasselbe. Zunächst sieht es nicht so übertrieben aus wie die Auswahl. Zweitens ist der Dropdown-Pfeil etwas klein, sodass der Benutzer nicht zu bewusst klickt. Wenn Sie auf diesen Text klicken, wird auch die unten stehende Dropdown-Liste geöffnet.
Bild (HTML Native wählen Sie Tag) Bild (endgültiges Rendering)
(HTML Native Select Tag)
Die ursprüngliche Funktion von Select besteht darin, auf den Dropdown-Pfeil rechts zu klicken, um die Dropdown-Liste zu öffnen und dem Benutzer eine Auswahl zu geben. Wenn der Benutzer eine Option auswählt, sollte der Wert im Textfeld in den entsprechenden Optionsinhalt geändert werden, und der Wertwert der Option kann erhalten werden. Eine weitere sehr wichtige Funktion ist, dass die Option eine ausgewählte Eigenschaft hat. Wenn eine Option ausgewählt wurde = "ausgewählt", wird das Dropdown-Feld standardmäßig die aktuelle Option ausgewählt.
Bootstrap bietet eine Schaltfläche Dropdown, um schöne Menüs zu erstellen, und es ist keine Funktion zur Auswahl. Als ich es suchte und sah, dachte ich, dass Bootstrap eine ausgewählte Komponente für den Taste -Dropdown -Stil liefern könnte. Aber ich bin wahnhaft. Ohne diese Komponente muss die Komponente implementiert werden. Tatsächlich habe ich Erfahrung mit dem Schreiben von Select -Tags mit UL und Li hatte, daher ist es nicht sehr schwierig, dies zu schreiben.
<div style = "margin-top: 30px;"> <a style = "Schriftgröße: 14px;" type = "button" id = "DropdownMenu1" data-toggle = "Dropdown"> text 1 <span> </span> </a> <ul rollen = "Menü" Aria-labelledBy = "DropdownMenu1"> <li rollen = "Präsentation" value => <a rolle rollen = "Menuitem" tabindex = "2" href = "#"> text 2 </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "3" href = "#"> text 3 </a> </li> </ul> </div>
Dies ist der grundlegende Code der Schaltfläche Dropdown. Da es den CSS -Stil selbst anwendet, müssen wir den Stil später in Bootstrap ändern.
<! DocType html> <html> <Head> <title> Bootstrap 101 Template </title> <meta name = "viewPort" content = "width = Gerätebreite, initial-scale = 1,0" charset = "utf-8"> <!-bootstrap-> <link href = "css/bootstrap.c.cs" rel = "stileshet"> css/bootstrap.c. type = "text/css">. src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/resprespect.js/1.3.0/Responden.min.js"> </script> <! [endif]-> </head> <body> <p> Original Select-Tag </p> </option Wert = "1". 3 </option> </select> <divd = "dropdown1" "style =" margin-top: 30px; "> <div> <a style =" Schriftgröße: 14px; "type =" button "id =" DropdownMenu1 "Data-Toggle =" Dropdown "> <! 1 </span> <span> </span> </a> <ul rollen = "Menü" aria-labelledBy = "DropdownMenu1"> <li rolle = "Präsentation" value = "1"> <a rollen = "Menuitem" tabindex = "1" href = "javaScript: void (0); rollen = "Menuitem" tabindex = "2" href = "javaScript: void (0);"> text 2 </a> </li> <li rollen = "Präsentation" value = "3"> <a rollen = "Menuitem" tabindex = "3" href = "javaScript: void (0); Die JavaScript-Plugins von Bootstrap)-> <script src = "js/jquery-1.10.2.js"> </script> <!-Fügen Sie alle kompilierten Plugins (unten) oder nach Bedarf einzelne Dateien ein-> <src = "js/bootstrap.min CustomDropdown (ele) {this.dropdown = ele; this.placeholder = this.dropdown.find ("Platzhalter"); this.options = this.dropdown.find ("ul.dropdown-menu> li"); this.val = '; -1; this.IniteVents ();} CustomDropdown.Prototype = {IniteVents: function () {var obj = this; // Diese Methode kann nicht geschrieben werden, da das Klickereignis von Bootstrap selbst erfasst wird. Die Dropdown-Liste obj.options.on ("click", function () {var opt = $ (this); obj.Text = opt.find ("a"). text (); obj.val = opt.attr ("value"); obj.index = opt.index (); obj.Placeolder.text (Obj.Text); this.text;}, getValue: function () {return this.val;}, getIndex: function () {return this.index;}} $ (Dokument) .Ready (function () {var mydropdown = new CustomDropdown ($ ("#Dropdown1");});Während des Klickvorgangs wird ein Hintergrund angezeigt. Das Betrachten von Elementen durch Chrom ist der Effekt von Schreibbox-Shodow. Aber nachdem ich es korrigiert hatte, erschien es immer noch. Lassen Sie uns morgen weiter suchen.
Fügen Sie 1 Zeile von Style Overlay hinzu, Bootstrap.css im Stil selbst.
<style type = "text/css">
Hinweis: Während des Instanziierungsprozesses geben wir ein Objekt eines JQuery -Selektors über. Wenn also eine Seite viele benutzerdefinierte Dropdowns aufweist, wird die Kategorie verwendet. Dann müssen Sie den Code während des Instanziierungsprozesses ändern!
Demo -Demo -Adresse: http://liminjun.sinaapp.com/demo/customselect/index.html
Bootstrap CDN http://www.bootstrapcdn.com/ Obwohl Baidu es auch hat, ist die Version etwas alt und wird nicht aktualisiert.
Bootstrap Offizielle Website http://getbootstrap.com/components/#btn-dropdowns