Im vorherigen Artikel habe ich mehrere nützliche Komponenten in die Bootstrap -Komponentenserie eingeführt (empfohlen). Als nächstes führt dieser Artikel in der Bootstrap -Komponentenserie mehrere nützliche Komponenten ein (empfohlen 2). Interessierte Freunde werden zusammen lernen!
7. Multi-Value-Eingangskomponente Manifest
In Bezug auf die mehrwertige Eingabe von Textfeldern war es immer eine häufige Anforderung. Heute empfiehlt der Blogger eine nützliche Mehrwert-Eingangskomponente für alle. Danke mir nicht, bitte nenn mich "roter Schal"!
1. Effektanzeige
Lokales Multi-Wert-Eingangsbox
Remote Multi-Value-Eingangsbox
2. Quellcode Beschreibung
Vielen Dank an die Open -Source -Community und die süßen Leute, die gerne teilen. Open Source -Adresse.
3. Codebeispiele
(1) Lokaler Mehrwerteingang
Zuerst müssen Sie die folgenden Dateien verweisen
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "~/content/jQuery-Manifest-Master/src/jQuery.Manifest.css" rel = "stylesheet"/> <script src = "~/content./jquery- src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jQuery-Manifest-master/build/part/jQuery.ui.widget.js"> </script> <script src = "~/jquery-Manifest/jquery/jquery/jquery-Master-/jquer-/jquery-/jquery/jquery-
Die JS- und CSS -Dateien von Bootstrap sind nicht erforderlich. Dieser Artikel ist für einen guten Stil willen, so wird er verwiesen. Die Manifestkomponente stützt sich nicht auf Bootstrap, sondern hängt von JQuery ab. Darüber hinaus müssen sich auch auf drei Dateien beziehen: jQuery.manifest.css, jquery.ui.widget.js und jquery.marcopolo.js.
Dann gibt es die Initialisierung von HTML und JS
<Eingabe type = 'text' autocplete = "off" id = "txt_man"/> <script type = "text/javaScript"> $ (function () {$ ('#txt_man'). Manifest ();}); </script>Durch einfache Schritte wie oben kann der obige Effekt erzeugt werden. Ist es nicht sehr einfach? Schauen wir uns einige ihrer Verwendungen an
// Gemeinsame Eigenschaften: Erhalten Sie die Sammlung aller Elemente im Textfeld var values = $ ('#txt_man'). Manifest ('Werte'); // Gemeinsame Methode 1: Entfernen Sie das letzte Element $ ('#txt_man'). Manifest ('Entry', ': Last'); // Gemeinsame Methode 2: Hinzufügen eines neuen Elements in der Taste des Element -Tastens. Das Format des zweiten Parameters wird durch das Format von JSON Data $ ('#txt_man'). Manifest ('Add', {ID: "1", Name: "ABC"}); // Gemeinsame Methode 3: Erhalten Sie die Liste der remote durchsuchten Daten $ ('#txt_man'). (Ereignis, Daten, $ item, initial) {// alert ("Das neu hinzugefügte Element ist:"+data);}); // Gemeinsames Ereignis 2: Element Ereignis $ ('#txt_man'). On ('manifestiveStremove', function (Ereignis, Daten, $ item) {}); // gemeinsame Ereignis 3: Ereignis $ ('##TXT_MAN). {});(2) Remote-Multi-Wert-Eingang
Die Möglichkeit zur Remote -Sucheingabe erfordert, dass wir eine URL -Adresse angeben, die Daten erhalten und dann zum Browser zurückkehren. Der Einfachheit halber verwendet dieser Artikel die URL auf der Quellcode -Website direkt, um den Effekt anzuzeigen.
Zuerst müssen Sie auf die JS -Datei verweisen
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "~/content/jQuery-Manifest-Master/src/jQuery.Manifest.css" rel = "stylesheet"/> <script src = "~/content./jquery- src="~/Content/bootstrap/js/bootstrap.js"></script><script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js"></script><script src="~/Content/jquery-manifest-master/build/parts/jquery.marcopolo.js"></script><script src = "~/content/jQuery-Manifest-master/build/jquery.manifest.js"> </script>
Im Vergleich zu den oben genannten gibt es einen zusätzlichen Hinweis auf die Datei jQuery.marcopolo.js.
Dann gibt es die Initialisierung von HTML und JS
<form action = "https://api.foursquare.com/v2/venues/search?callback=?" method = "get"> <div> <div> <Eingabe type = 'text' id = "txt_man2"/> <img src = "~/content/jQuery-Manifest-master/beliebte.gif"/> </div> </div> </form> <script type = "text/javaScript"> $ (function () {) {{$ $ ('#txt_man2'. $ item, $ mpItem) {return data.name;}, formatValue: function (data, $ value, $ item, $ mpItem) {return data.id;}, marcopolo: {data: {client_id: 'no2mtqvbqanw3q3sg23ofvmegyowgyowg. 'LG2WRKKKS1SXZ2FMKDG01LDW1KDTEKKTULMXM0XEVWRN0llHB', Intent: 'Global', Limit: 5, v: '20150601'}, formatdata: function (Data) {return data.RespeT.Venues. 3, param: 'query'}, erforderlich: true});}); </script>In Bezug auf die Bedeutung jedes Parameters sollte es leicht zu verstehen sein, ob Sie ihn benötigen. Der Blogger überwachte kurz den Rückgabewert dieser Remote -Suchmethode
Wenn ein Park Freund beabsichtigt, diese Remote -Methode selbst zu verwenden, können Sie sich auf dieses Datenformat verweisen, um sie zu implementieren.
8. Textfeld-Suchkomponenten Bootstrap-Type-Köpfe
In der Tat haben viele Komponenten diese Funktion bezüglich der Funktion der Textfeldsuche. Beispielsweise gibt es eine automatische Komponente in der Jquery -Benutzeroberfläche, die der Blogger verwendet hat, um eine automatische Fertigstellung zu erzielen. Die automatischen Suchkomponenten von Bootstrap -Textfeldern entstehen online. Der Grund, warum ich diese Komponente heute ausgewählt habe, ist, dass ich denke, dass sie dem Stil von Bootstrap ähnlich ist und die Komponenten kleiner, einfach und praktisch sind.
1. Effektanzeige
Lokale statische Suche (Datenquelle ist lokal)
Remote -Suche (Datenquelle wird remote über AJAX -Anforderung abgerufen)
2. Quellcode Beschreibung
Quellcode Beschreibung
3. Codebeispiele
Die erste Datei, auf die verwiesen werden muss: Hauptsächlich enthält ein CSS und eine JS -Datei. Benötigen Sie Unterstützung von JQuery und Bootstrap.
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "~/content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/css/prettify.cs.css" src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/twitter-stieftstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"> </script>
Dann die Komponenteninitialisierung
<Eingabe type = 'text' id = "txt_man" />
Datenquelle lokal
<script type="text/javascript">$(function () {$("#txt_man").typeahead({source: [{ key: 1, value: 'Toronto' },{ key: 2, value: 'Montreal' },{ key: 3, value: 'New York' },{ key: 4, value: 'Buffalo' },{ key: 5, value: 'Boston' }, {Schlüssel: 6, Wert: 'Columbus'}, {Schlüssel: 7, Wert: 'Dallas'}, {Schlüssel: 8, Wert: 'Vancouver'}, {Key: 9, Wert: 'Seattle'}, {Key: 10, Wert: 'Los Angeles'}], Anzeige: "Valle", Val: "});};};Die Datenquelle wird durch AJAX -Anforderung erhalten
<script type="text/javascript">$(function () {$("#txt_man").typeahead({ajax: {url: '/Home2/TypeaheadData',timeout: 300,method: 'post',triggerLength: 1,loadingClass: null,displayField: null,preDispatch: null,preProcess: null},display: "Wert", Val: "Key"});}); </script>Testmethode, die dem Hintergrund entspricht
public JSonResult typeAeAtheaddata () {var lstres = new List <Object> (); für (var i = 0; i <20; i ++) lstres.add (neu {key = i, value = goid.newguid (). toString (). Substring (0, 4)});Gemeinsame Eigenschaften:
• Anzeige: Der Feldname wird angezeigt
• VAL: Der tatsächliche Wert
• Elemente: Die Anzahl der standardmäßigen Suchergebnisse. Der Standardwert ist 8
• Quelle: Lokale Datenquelle, formatiert als Array.
• AJAX: Das von Ajax angeforderte Objekt kann direkt eine String -URL oder ein Objektobjekt sein. Wenn es sich um ein Objektobjekt handelt, werde ich nicht über URL sprechen. Die TriggerLength -Eigenschaft zeigt an, dass die Eingabe mehrerer Zeichen die Suche auslöst.
Häufig verwendete Ereignisse:
• ItemSelected: Ausgelöst, wenn der Suchwert ausgewählt ist.
<script type="text/javascript">$(function () {$("#txt_man").typeahead({ajax: {url: '/Home2/TypeaheadData',timeout: 300,method: 'post',triggerLength: 1,loadingClass: null,displayField: null,preDispatch: null,preProcess: null},display: "value",val: "Schlüssel", itemSelected: Funktion (Element, val, text) {}});}); </script>Das Parameterelement repräsentiert das ausgewählte Objekt, der Parameter Val stellt den tatsächlichen Wert des ausgewählten Elements und der Text den angezeigten Wert des ausgewählten Elements dar.
9. Bootstrap -Schrittkomponente
In Bezug auf die Bootstrap -Schrittkomponente führte der vorherige Artikel ein Ystep -Widget vor. Es kann eine bestimmte Rolle bei der Betrachtung des Fortschritts der Aufgabe spielen, aber für einige komplexe Unternehmen ist es ein wenig machtlos, das entsprechende Unternehmen gemäß den aktuellen Schritten zu behandeln. Heute wird der Blogger eine Schrittkomponente einführen, die einen sehr guten Effekt hat. Mit dieser Komponente müssen sich Programmierer nicht mehr um komplexes Stiefdesign machen.
1. Effektanzeige
Einen Blick auf den Stil haben
Befolgen Sie die Schritte zu "vorheriger Schritt" und "nächster Schritt".
Weitere Schritte
2. Quellcode Beschreibung
Diese Komponente wurde vom Blogger online gefunden. Ich habe gesehen, dass viele Stile und Verwendungen von Bootstrap stammen. Das einzige, worauf ich mich beziehen muss, ist eine JS- und eine CSS -Datei. Die Quellcodequelle wurde noch nicht gefunden. Wenn jemand die Quellcodequelle kennt, können Sie dem Blogger mitteilen. Um die Arbeitergebnisse des Autors zu respektieren, muss der Blogger außerdem die Originalität respektieren!
3. Codebeispiele
Dateien, auf die verwiesen werden müssen
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-Step/CSS/bs-is-fun.css" rel = "styleSheet"/> <script src = "~/content/jqu-1.9. src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-Step/js/pinsel.js"> </script>
BS-IS-FUN.CSS und PIRBE.JS müssen verwiesen werden, und die Komponenten benötigen die Unterstützung von JQuery und Bootstrap.
Dann gibt es die Initialisierung der Komponente.
(1) Pfeil
<ul> <li> <a> Schritt1 </a> </li> <li> <a> Schritt 2 </a> </li> <li> <a> Schritt 3 </a> </li> </ul>
Wenn es sich um einen statischen Schritt handelt, benötigen Sie nur den obigen HTML -Code, um den Effekt des Pfeilschritts im obigen Bild zu sehen. Der aktive Stil hier repräsentiert den Stil, den der Schritt passiert ist.
(2) Quadrat
<ul> <li> <a> Schritt1 </a> </li> <li> <a> Schritt 2 </a> </li> <li> <a> Schritt 3 </a> </li> </ul>
(3) Kreisform
<ul> <li> <a> Schritt1 </a> </li> <li> <a> Schritt 2 </a> </li> <li> <a> Schritt 3 </a> </li> </ul>
(4) Fortschrittsbalken
<ul> <li> <a> Schritt1 <span> </span> </a> </li> <li> <a> Schritt 2 <span> </span> </a> </li> <a> <a> Schritt 3 <span > </span> </a> </li> <li> <a> Schritt 4 <span> </span> </a> </li> <li> <a> Schritt 5 <span> </span> </a> </li> </ul>
(5) Vorheriger Schritt, nächster Schritt
Der "vorherige Schritt" und "nächster Schritt" im obigen Bild werden von Ihnen in der Modalkomponente Bootstrap oder der Code für Ihre Referenz von selbst definiert.
<div id = "MYMODALNEXT"> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </span> </button> <H4> Optionskonfiguration </h4> <li> <a> <a> <a> <a> <A> <a> <All. 2 <span> </span> </a> </li> <li> <a> Schritt 3 <span> </span> </a> </li> <li> <a> Schritt 4 <span> </span> </a> </li> </li> </li> </li> </div> <div> <divida-ride = "carousel" datausel "Data-interval =" Data "false-"> <carousel "Data-interval =" Data "Data" false ". rollen = "listBox"> <div> <p> Schritt 1 </p> <div> Konfigurieren Sie die Rolle </div> <div> <Eingabe type = "text"/> </div> <div> <button type = "button"> speichern </button> </div> <p> <p> Schritt 2 </p> <div>. type = "button"> speichern </button> </div> <div> <p> Schritt 3 </p> </div> <p> Schritt 4 </p> </div> <p> <p> Schritt 5 </p> </div> <div> <p> Schritt 6 </p> </div> </div> </div> <Button = "> </div> </div> <Button =" Typ = "Button"> Weiter </button> </div> </div> </div>
Natürlich müssen Sie auch ein Klickereignis für zwei Schaltflächen registrieren
$ ("#MYMODALNEXT .MODAL-FOOLER-Button"). Jede (Funktion () {$ (this) .click (function () {if ($ ($ (this) .hasclass ("mn-next")) {$ ("#MyModalNext .Carousel"). Carousel ('Next'; li.active "). Next (). AddClass (" Active ");} else {$ ("#MyModalNext .Carousel "). Carousel ('prev'); if ($ ("#MyModalnext .step li "). Länge> 1) {$ ($ ($ ($MyModalNext"). li.active "). Länge - 1]). removeclass (" active ")}})})Die Logik kann unvollständig sein und Tests sind erforderlich, wenn sie formell verwendet werden.
10. Knopflastkomponente Ladda-Bootstrap
In Bezug auf das Laden der Schaltfläche wollte der Blogger lange eine geeignete Komponente finden, um sie zu optimieren. Wenn es nicht verarbeitet wird, besteht definitiv die Möglichkeit von wiederholten Operationen. Schauen wir uns heute so etwas an.
1. Effektanzeige
Zuerst treffen
Benutzerdefinierte Farbe, Größe, Fortschrittsbalken
2. Quellcode Beschreibung
Quellcodeadresse
3. Codebeispiele
Dateien, auf die verwiesen werden müssen
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "~/content/ladda-streatstrap-master/ladda-bootstrap-master/dist/ladda-tath.min.min.css" rel = "stylesheet"/> < src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/spin.min.min.js" src = "~/content/ladda-stootstrap-master/ladda-stootstrap-master/dist/ladda.min.js"> </script>
Komponenteninitialisierung: Initialisieren Sie 4 Schaltflächen
<Button Data-Style = "Expination-Left"> <span> Expace-Links </span> </button> <button data-style = "expon-Light"> <span> expt-right </span> </button> <button data-style = "zoom-in"> <span> Zoom-in </span> </button </button <) () () () () () () () () () () () () () () () () () () () "ug" $ ("· $" $ ("· · $" {$ ('button'). click (function (e) {e.preventDefault (); var l = ladda.create (this); l.start (); l.setProgress (0 - 1); L.Stop ();Code Zweifel: Es sollte nicht schwer zu verstehen sein. Der Code, der bei der Initialisierung der Komponente var l = ladda.create (this) beteiligt ist; L.Start (); Hier repräsentiert dies das Objekt der derzeit angeklickten Schaltfläche (beachten Sie, dass es sich um ein DOM -Objekt anstelle eines JQuery -Objekts handelt), und rufen Sie dann L.Stop () auf. Nach Abschluss der Anfrage schließen Sie die Last.
(1) Alle Datenstiloptionen sind wie folgt. Wenn Sie interessiert sind, können Sie es ausprobieren und sehen, welche Auswirkungen sie haben:
Data-Style = "Expon-Links"
Data-Style = "Expand-Right"
Data-Stil = "Erweiterung"
Data-Style = "Expand-Down"
Data-Stil = "Zoom-in"
Data-Stil = "Zoom-out"
Data-Style = "Slide-Links"
Data-Style = "Slide-Rechts"
Data-Stil = "Slide-up"
Data-Style = "Slide-Down"
Data-Stil = "Vertrag"
(2) Wenn Sie die Größe der Taste einstellen müssen, verfügt die Komponente über eine integrierte Datengröße. Alle Optionen zur Datengröße sind wie folgt:
Datengröße = "xs"
Datengröße = "S"
Datengröße = "L"
(3) Wenn Sie die Farbe der Taste einstellen müssen, verwenden Sie die Datenspinnerfarbe
Datenspinner-Color = "#ff0000"
(4) Einstellungen der Fortschrittsleiste der Taste
Ladda.bind ('button', {callback: function (instance) {var progresht = 0; var inval = setInterval (function () {progress = math.min (progress + math.random () * 0.1, 1); Instance.setProgress (Fortschritt); if (progresht === 1) {Instance.Stop (); 200);}});});Der aktuelle Ausführungsfortschritt wird hauptsächlich durch die Satzinstanz festgelegt. Im offiziellen Projekt müssen wir die aktuelle Anfrageausführungssituation berechnen, um den Fortschritt dynamisch zurückzugeben.
11. Schalterkomponenten Bootstrap-Switch Switch
Auf der Homepage der chinesischen Website von Bootstrap finden Sie eine solche Komponente
1. Effektanzeige
Anfangseffekt
Verschiedene Attribute und Ereignisse
2. Quellcode Beschreibung
Bootstrap-Switch Quellcodeadresse: https://github.com/nostalgiaz/bootstrap-switch
Bootstrap-Switch-Dokumentation und Demo: http://www.bootstrap-schitch.org/examples.html
3. Codebeispiele
Dateien, auf die verwiesen werden müssen
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "~/content/bootstrap-switch-master/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css" rel = "rel =" rel = "rel =" src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-switch-master/bootstrap-switch-master/js/js/bootstrap-switch.js-
Komponenten hängen von JQuery und Bootstrap ab
Dann gibt es die Initialisierung von HTML und JS
<Eingabe type = "checkBox" checked /> $ (function () {$ ('input [type = checkBox]'). Bootstrapswitch ({Größe: "groß"});})Das Größenattribut ist nicht erforderlich. Wenn Sie den Standardstil verwenden, können die Parameter nicht übergeben werden.
Häufig verwendete Eigenschaften
• Größe: Schaltergröße. Optionale Werte sind "mini", "klein", "normal", "groß"
• OnColor: Die Farbe der Ein -Ein -Schaltfläche im Schalter. Zu den optionalen Werten gehören "primär", "Info", "Erfolg", "Warnung", "Gefahr", "Standard"
• Offcolor: Die Farbe des Schalters in der Farbe der Aus -Taste. Optionale Werte 'primär', 'info', 'Erfolg', 'Warnung', 'Gefahr', 'Standard'
• OnText: Der Text der Schaltfläche Ein Einschalten im Switch ist "Eingeschaltet".
• Offtext: Der Text des Switchs ist standardmäßig "aus".
• OnInit: Ereignisse, die die Komponente initialisieren.
• OnSwitchChange: Ereignisse, wenn sich der Schalter ändert.
Gemeinsame Ereignisse und Methoden können verwendet werden, um die Dokumente direkt anzuzeigen, und der Beamte enthält eine sehr detaillierte Beschreibung.
12. Bewertungskomponenten Bootstrap-Stern-Bewertung
Jeder sollte die Bewertungen der Bewertungen am 10. und 10. Taobao kennen. Ich habe versehentlich eine Bewertungskomponente im Bootstrap-Stil gefunden. Ich fand es interessant. Es kann in Zukunft für E-Commerce-, Community- und Forum-Systeme nützlich sein, also werde ich es teilen.
1. Effektanzeige
2. Quellcode Beschreibung
Quellcode herunterladen
3. Codebeispiele
Diese Komponente erfordert Unterstützung für JQuery- und Bootstrap -Stile
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "~/content/bootstrap-star-rating-master/bootstrap-star-rating-master/css/star-rats src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/star-rating.js"> </script> <script src = "~/content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/locales/zh.js"> </script>
Direkt durch die HTML -Anfangskomponente
<input id="input-2b" type="number" min="0" max="5" step="0.5" data-size="xl"data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}"><input id="input-21a" value="0" type="number" min=0 max=5 step=0.5 data-size="xl"><input id="input-21b" value="4" type="number" min=0 max=5 step=0.2 data-size="lg"><input id="input-21c" value="0" type="number" min=0 max=8 step=0.5 data-size="xl" data-stars="8"><input id="input-21d" value="2" type="number" min = 0 max = 5 Schritt = 0,5 datengröße = "sm"> <Eingabe-ID = "input-21e" value = "0" Typ = "numme" min = 0 max = 5 Schritt = 0,5 Datengröße = "xs"> <Eingabe-ID = "input-21f" value = "0" type "number" min = 0 MAX = 5 SPECT = 0,5 Data-21f "MD" MD "> <". max = "5" Schritt = "0,5" Data-Stars = 5data-symbol = "" data-default-caption = "{bewertet} Herzen" Data-Star-Captions = "{}"> <Eingabe-ID = "Eingabe-22" value = "0" Typ "nummer" min = 0 max = 5 STEP = 0.5 Data-Rtlly-Rtlly-1-Rtlly-1-con-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container-container.Die Komponente wird über Class = "Rating" initialisiert. Hier sind einige Parameter, die leicht zu verstehen sein sollten:
• Wert: Repräsentiert die Standardpunktzahl bei der Komponenteninitialisierung
• min: Mindestpunktzahl
• Max: Maximale Punktzahl
• Schritt: Die minimale Skala wird jedes Mal hinzugefügt
• Datengröße: Die Größe der Sterne
• Datenstars: Die Anzahl der Sterne
Sie können die aktuelle Punktzahl mit $ ("#input-21a") erhalten. Val ().
Die oben genannten sind einige nützliche Komponenten der Bootstrap -Komponentenserie, die der Editor Ihnen vorgestellt hat (Empfehlung 2). Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!