Vorwort: Ich habe bereits viele gängige Komponenten von Bootstrap geteilt, einschließlich Formulare, Formularüberprüfung, Datei-Upload, Dropdown-Boxen, Popup-Boxen usw. In diesem Zeitraum hat der Blogger einige nützliche Komponenten gesammelt (von denen einige im Projekt verwendet wurden). Nach zwei Tagen hat er einige von ihnen aussortiert. Basierend auf dem Prinzip der "guten Dinge müssen mit anderen geteilt werden" werden wir heute einige Vorteile geben, um die Dinge, die der Blogger als Referenz durch Gärtner in Not gesammelt hat, zu teilen. Die meisten Komponenten sind Open -Source -Komponenten, und einige von ihnen sind die Effekte, die von Bloggern im Internet gefunden und neu geschrieben wurden. Sie sind möglicherweise nicht zufriedenstellend. Wenn Sie interessiert sind, werfen Sie bitte einen Blick darauf.
1. Zeitkomponente
Es gibt viele Zeitkomponenten im Bootstrap -Stil. Sie können nach dem Schlüsselwort "DatePicker" auf GitHub suchen und viele Zeitkomponenten finden. Der Blogger hat bereits zwei davon verwendet und festgestellt, dass es einige Probleme mit großer oder kleiner Größe geben wird. Nach einigem Screening fanden wir eine Zeitkomponente, die gute Ergebnisse erzielt und für verschiedene Szenarien verwendet werden kann. Schauen wir uns den Stil unten an.
1. Effektanzeige
Anfangseffekt
Anpassung der Kultur- und Datumsformate in Komponenten: Es werden nur Daten angezeigt
Zeigen Sie Datum und Uhrzeit an (die Erfahrung von Mobiltelefon- und Tablet -Geräten kann besser sein)
2. Quellcode Beschreibung
Chuchu untersuchte den Komponenteneffekt und gab der Quellcodeadresse an
3. Codebeispiele
Verweisen Sie zunächst auf die erforderliche Datei
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-dateTimePicker-master/build/css/bootstrap-datetimePicker.css" rel = "stylesheet"/> < src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "// cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.0/moment.0/moment.0/moment.0/moment.0/moment.0/moment.0/moment.0/moment.0/moment.0/moment-with.Js"> src = "~/content/bootstrap-dateTimePicker-master/build/js/bootstrap-dateTimePicker.min.js"> </script>
JQuery und Bootstrap sind erforderlich. Darüber hinaus müssen Sie sich auch auf die Moment-with-Locales.js-Datei beziehen. Natürlich können Sie diese JS -Datei auch in Ihren lokalen Bereich herunterladen, ohne diese CDN -Methode zu verwenden. Sie können diese JS -Datei vollständig in Ihren lokalen Bereich herunterladen und dann eine lokale Referenz hinzufügen.
(1) Anfangseffekt
<Label> Datum: </label> <div class = 'input-gruppendatum' id = 'DateTimePicker1'> <Eingabe type = 'text'/> <span> </span> </span> </div> <script type = "textImscript"> $ () {$ ('#DateTimePicker1'). </script>Dies gibt den Effekt wie im obigen Bild gezeigt.
(2) Chinesische Kultur- und Datumsformatierung
Das HTML -Teil bleibt unverändert. Fügen Sie einfach Parameter hinzu, wenn Sie JS initialisieren.
<script type = "text/javaScript"> $ (function () {$ ('#DateTimePicker1'). DateTimePicker ({Format: 'yyyy-mm-dd', // Datumsformatierung, nur das Datumsgebietsschema: 'Zh-Cn' // chinesische Kultur});}); </script>(3) Anzeigezeit
<Label> Zeit: </label> <div class = 'Eingabe-Gruppen-Datum' ID = 'DateTimePicker2'> <Eingabe type = 'text'/> <span> </span> </span> </div> <script type = "text/javaScript"> $ () {$ ('#datetimepicker2'). HH: MM: SS ', Gebietsschema:' zh-cn '}); </script>(4) Höchstdatum und Mindestdatum
$ ('#DateTimePicker1'). DateTimePicker ({Format: 'yyyy-mm-dd', // Datumsformatierung, nur Date Lokale: 'Zh-Cn', // Chinesische Kultur Maxdate: '2017-01-01', // Maximum Date Mindate: 2010-01-01 '// // minimal- // // minimaldatum');(5) Aktivieren Sie die Taste löschen
ShowClear: Richtig
(6) Attribut des Ansichtsmodus. Setzen Sie den Browser auf ausgewählte Modus, um den Code wie folgt zu kopieren: ViewMode: 'Jahre'
(7) andere
Für leistungsstärkere Funktionen finden Sie in der API, damit ich sie nicht alle hier auflisten werde. Es gibt eine große Anzahl von Attributen, Ereignissen und Methoden, um Ihre verschiedenen besonderen Bedürfnisse zu erfüllen.
2. Komponenten für selbststeigende Gerätekomponenten
In Bezug auf Bootstrap AutoIncrementer ist dies möglicherweise nicht in jedem Projekt erforderlich. Es gibt einige spezielle Szenarien wie: Ein bestimmtes Textfeld erfordert Datennummern, und die Größe des Arrays muss fein abgestimmt werden. Nach langer Zeit wissen einige Gärtner möglicherweise nicht, wie es aussieht. Klicken Sie also auf das Bild.
1. Effektanzeige
Tatsächlich ist der Effekt sehr einfach, kann jedoch automatisch den Maximalwert, den Mindestwert und den Selbstverhalten einstellen und automatisch digitale Überprüfung durchführen. Das bequemste ist, dass es mit JavaScript initialisiert werden muss und nur in HTML initialisiert werden muss.
2. Quellcode Beschreibung
Quellcode und Dokumentadresse
3. Codebeispiele
Die erste Datei, auf die referenziert wird, lautet wie folgt:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link rel = "styleSheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.3/css/font- href = "~/content/jQuery.spinner-master/dist/css/bootstrap-spinner.css" rel = "styleSheet"/> <script src = "~/content/jQuery.9.1.js"> </script Src = "~/content/bootstrap/js/bootstrap.js" src = "~/content/jQuery.spinner-master/dist/js/jquery.spinner.js"> </script>
Die Datei font-aweeeoome.min.css ist ebenfalls eine CDN-Referenzdatei, und Sie können sie auch an Ihren lokalen Ort verweisen.
(1) Initialisierung
<div data -trigger = "Spinner"> <Eingabe type = "text" value = "1" data-rule = "Menge"> <span> <a href = "javaScript:;" Data-Spin = "Up"> <i> </i> </a> <a href = "JavaScript:;" Data-Spin = "Down"> <i> </i> </a> </span> </div>
Nur ein einfacher HTML -Abschnitt sehen Sie den Effekt wie im obigen Bild gezeigt. Ist es einfach?
(2) selbststärker Typ
Wenn Sie den Quellcode der Komponente anzeigen, können Sie feststellen, dass für uns mehrere Selbststillstandstypen definiert sind:
Sie können das Data-Rule-Attribut für diese Typen definieren, z. B.:
Die Regeln, die die Selbstverlängerungskomponente steuern können, werden gemäß den monatlichen Regeln durchgeführt.
(3) Legen Sie den Maximalwert, den Mindestwert und den Selbstvertretungswert fest
Zusätzlich zu den oben genannten spezifischen Typen unterstützen die Komponenten auch benutzerdefinierte Maximum, Minimum und Selbstvertreter.
<div data -trigger = "Spinner"> <Eingabe type = "text" value = "1" data-min = "-10" data-max = "10" data-Step = "2" data-rule = "Menge"> <span> <a href = "javaScript:;" Data-Spin = "Up"> <i> </i> </a> <a href = "JavaScript:;" Data-Spin = "Down"> <i> </i> </a> </span> </div>
Data-min = "-10": Minimaler Wert data-max = "10": Maximalwert Data-Schritt = "2": Selbstverhinderungswert
Das ist leicht zu verstehen, und ich werde es nicht zu sehr erklären. Wirkung:
(4) Ereigniserfassung
Die Komponente bietet zwei geänderte und änderende Ereignisse, die der numerischen Änderung und dem Ereignisrückruf nach der Änderung entsprechen.
$ ('#id'). Spinner ('geändert', Funktion (e, newval, oldval) {}); $ ('[data -trigger = "Spinner"]'). Spinner ('ändern', Funktion (e, newval, oldval) {});3. Beladungseffekt
Vor einigen Tagen fragte ein Gruppenmitglied, welche Komponenten für den Ladeeffekt von Bootstrap verwenden sollten. Die Suche nach Baidu kann auch viele Ergebnisse finden. Hier wird der Blogger ein paar geladene Widgets basierend auf seiner Nutzungserfahrung teilen, in der Hoffnung, dass jeder sie benutzen kann. Es ist hauptsächlich in praktisch und cool unterteilt. Das praktische Modell hat einen durchschnittlichen Effekt, kann jedoch für verschiedene Browser verwendet werden. Das coole Modell wird mit dem neuesten CSS3 und HTML5 geschrieben, und der Effekt ist sehr cool, aber im Grunde ist die untere Version von IE (unter 10) nicht kompatibel.
1) praktisch
1. Perfectloading -Komponente
Diese Komponente ist ein JS, das der Blogger im Internet gefunden hat, aber nach dem Herunterladen fand ich einige große und kleine Probleme. Der Blogger hat es also umgeschrieben und die Bootstrap-Loading-Komponente genannt. Sein Prinzip ist es, eine Deckschicht zu eröffnen, wenn die Komponente gestartet wird. Wenn die Komponente geschlossen ist, wird die Overlay -Schicht -DOM entfernt und der Ladeeffekt verwendet ein GIF -Bild.
Perfectload.js Dateiinhalt:
/********************************************* * * Plug-in: Friendly page loading effect* Author:sqinyang ([email protected]) * Time:2015/04/20 * Explanation: With the popularity of HTML5, the page effect is getting more and more dazzling, and at the same time, it also requires loading a large number of plug-ins and materials. Die Internetgeschwindigkeit ist extrem heftig, insbesondere für Websites, die auf fremden Servern hängen. Sobald Sie eine Reihe von Materialien geöffnet haben, können Sie die Standorte langsam laden und die Standorte sind inkonsistent. Therefore, this method is written to facilitate everyone to use **********************************************************/jQuery.bootstrapLoading = { start: function (options) { var defaults = { opacity: 1, //loading page transparency backgroundColor: "#ffff", //loading page background color borderColor: "#bbb", //prompt Grenze Farbborderbreite: 1, // schnelle Randbreite BorderSyle: "Solid", // sofortige Randstil LoadingTips: "Laden, bitte warten ...", // Eingabeaufforderung Text tipsColor: "#666", // Eingabeaufforderung Farbverzögerung: 1000, // Nach dem Laden der Seite ist das Ladungs -Page abgeschlossen, und 0/ //. Es entspricht 0, es besteht keine Notwendigkeit,} var options = $ .extend (Standardeinstellungen, Optionen) auszusetzen. // Seitenbreite und Höhe var _pageHeight = document.documentElement.clientHeight, _pagewidth = document.documentElement.clientwidth; // Loadinghtml benutzerdefinierter Inhalt, das vor der Seite angezeigt wird, nicht geladen ist var '; filter: alpha (opacity =' + option.opacity * 100 + '); z-Index:' + option.zindex + '; Optionen. '; Schriftgröße: 20px; ">' + Optionen.loadingtips + '</div> </div>'; // Ladeeffekt $ ("Körper") darstellen. Append (_loadinghtml); // Die Breite und Höhe des Ladens ein Eingabeaufforderungsfeld abrufen var _loadingTipsh = document.getElementById ("LoadingTips"). ClientHeight, _loadingTipSw = document.getElementById ("LoadingTips"). Clientwidth; // Berechnen Sie die Entfernung und halten Sie das Ladeeingangsbox, unten, links und rechts, zentriertes var _loadingtop = _pageHeight> _loadingtipsh? (_PageHeight - _loadingTipsh) / 2: 0, _loadingleft = _pagewidth> _loadingtipsw? (_PageWidth - _loadingtipsw) / 2: 0; $ ("#loadingTips"). // Hören Sie sich die Seite Ladestatus -Dokument an. // Funktionsfunktion pageloaded () {if (document.ReadyState == "complete") {var laderingmask = $ ('#loadingPage'); setTimeout (function () {ladeingmask.Animate ({"Opazität": 0}, options.delayTime, function () {$ (this) .hide ();});}, options.sleep); }}}, Ende: function () {$ ("#loadingPage"). REMET (); }}
Dieser JS ist im Grunde genommen online, aber auf dieser Grundlage fügte der Blogger eine Endmethode hinzu.
Mal sehen, wie die Komponenten verwendet werden. Hier ist der Testcode:
<html> <head> <meta name = "viewPort" content = "width = Geräte-Width. src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-loading/perfectload.js"> </script> <script type = "text/javascript"> $ () {$ ("#btn_submit"). $. </script> </head> <body> <div style = "padding: 0px"> <div style = "height: 450px;"> <div> Abfragebedingungen </div> <div> <Form ID = "FormSearch"> <div> <div> <button type </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>Verwendungsanweisungen: Die Komponente benötigt keinen HTML -Code. Er muss nur die Startmethode der Komponente beim Ausführen des Ladens aufrufen. Die Start () -Methode startet die Popup-Ebene und kann alle Parameter in der Standardvariablen einstellen. Beim Abschluss des Ladens wird die Endmethode der Komponente aufgerufen und die Popup-Ebene automatisch entfernt. Lassen Sie uns den Effekt sehen:
Wenn Sie mit dem Effekt nicht zufrieden sind, können Sie die Parameter in den Standardeinstellungen selbst festlegen. Die Anmerkungen sind ausführlich geschrieben, sodass ich sie hier nacheinander nicht auflisten werde.
2. CHRYSANTHEMUM -LADENKONENTE SPIN.JS
Die Verwendung von Bildern zur Anzeige von Belastungseffekten hat inhärente Nachteile, so dass viele Ladekomponenten CSS+JS jetzt verwenden, um Animationseffekte zu erzielen. Spin.js ist eines dieser Beispiele. spin.js ist eine Open -Source -Komponente mit einer Open -Source -Adresse.
Nach dem Herunterladen des Quellcodes stellt die Initialisierung fest, dass die Komponente keine Maske hat, sodass sie nur so sein kann:
Nachdem ich lange nach seinen Parametern gesucht hatte, konnte ich sie nicht finden, oder ich fand sie nicht dort, wo es eine "Organisation" gab. Es gibt keinen Weg, der Blogger kann nur den Effekt der Maske selbst hinzufügen. Daher wurde eine neue CSS -Style -Datei erstellt und vorübergehend spin.css genannt, wobei nur ein Stil darin besteht:
.Fade {Position: behoben; Top: 0; Rechts: 0; unten: 0; links: 0; Z-Index: 9999; Deckkraft: 1; Hintergrundfarbe: Grau;}Dann wurde Spin.js an zwei Stellen umgeschrieben, und der Umschreiben ist wie folgt:
/** * Copyright (C) 2011-2014 Felix Gnass * lizenziert unter der MIT-Lizenz * http://spin.js.org/ * * Beispiel: var opts = {Linien: 12, // Die Anzahl der Linien zeichnet Länge: 7, // Länge der Länge jeder Länge: 5.0/ SCAIS-SCIDIS-SCIDIUS. spinner corners: 1, // Roundness (0..1) color: '#000', // #rgb or #rrggbb opacity: 1/4, // Opacity of the lines rotate: 0, // Rotation offset direction: 1, // 1: clockwise, -1: counterclockwise speed: 1, // Rounds per second trail: 100, // Afterglow percentage fps: 20, // Frames per second when using setTimeout () Zindex: 2E9, // Verwenden Sie standardmäßig einen hohen z-Index. }; var target = document.getElementById ('foo'); var spinner = neuer Spinner (opts) .spin (Ziel); */; (function (root, factory) {if (typeof module == 'Objekt' && module.exports) module.exports = factory (); // Commonjs else if (typeof define == 'function' && define.amd) Define (factory); // Amd Modul elsewurzel. Präfixe = ['Webkit', 'Moz', 'MS', 'O']; * Ein Div -Wert wird erstellt. <n; * 100), Zeilen] .join ('-'); '-' + Präfix + '-' || ''; '%{Opazität:' + Alpha + '}' + '100%{Opazität:' + Z + '}' + '}', SHAD. i; Funktion CSS (EL, Prop) {für (var n) {El.Style [Anbieter (el, n) || (OBJ [n] === undefined) OBJ [n] = Def [n]; Länge: 7, // Die Länge jeder Linienbreite: 5, // Der Radius der Liniendicke: 10, // Der Radius der inneren Kreisskala: 1,0, // Skalen Gesamtgröße der Spinner -Ecken: 1, // Rundheit (0..1) Farbe: ' #000', // #rgb oder #rgbb Offacity: 1/4. 1: im Uhrzeigersinn, -1: gegen den Uhrzeigersinn: 1, // Runden pro Sekunde Trail: 100, // Nachglühenprozenta FPS: 20, // Frames pro Sekunde bei SetTimeout () Zindex: 2E9, // Verwenden Sie ein hohes Z -Index mit Standardklassenname: 'Spinnner', // CSS. Schatten: Falsch, ob ein Schatten hwaccel rendert: Falsch, ob Hardware-Beschleunigungsposition verwendet wird: 'Absolute' // Element-Positionierung}; {}; O.ClASSNAME}); Self.Lines (EL, Self.Opts); O.Trail / 100); self.el && setTimeout (Anim, ~~ (1000); Regexp ('(// s |^) Fade (// s | $)'); Fallback -Modus unten. 'px', Hintergrund: Farbe, BoxShadow: Schatten, Transformorigin: 'links', Transform: 'rotate (' + ~~ (360/o.lines * i + o.Rotate) + 'Deg) übersetzt (' + o.scale * o.Radius + 'Px' + ', 0), Borderradius: (O.Corners * O.Scale * O. O.Scale * O. O. } für (; i <o.lines; i ++) {Seg = CSS (createel (), {Position: 'Absolute', top: 1 + ~ (o.scale * o.width / 2) + 'px', Transform: o.hwaccel? 'Translate3d (0,0,0)': '', '', Opacity: O.OPACIT: O.OPACIT: O.OPACKACITION: O.OPACKACITION: O.OPACKACITICAL: OPACKACITICAL: OPACKACITIC: OPACKACITICAL: OPACKACITIC: OPACKACITIC: OPACKACITIC: OPACKACITIC: OPACKACITICA: Addanimation (O.OPACITY, O.TRAIL, START + I * O.DIRECTION, O.LINES) + '' + 1 / O.SPEED + linear Infinite '}); FILL (GetColor (O.Color, I), '0 1px RGBA (0,0,0, .1))); El.Childnodes [i] .Style.Opacity = val; Eine CSS-Regel für VML-Elemente: Sheet.Addrule ('. Spin-VML', 'Verhalten: URL (#Standard#vml)); Coordside: s + '' + s, Koordinate: -r + '' + -r}), {Breite: S, S, S}); filter) { ins( g, ins( css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}), ins( css( vml('roundrect', {arcsize: o.corners}), { width: r, height: o.scale * o.width, left: o.scale * o.radius, top: -O.Scale * O. Width >> 1, Filter: Filter}), vml ('fill', {Farbe: GetColor (O.Color, I), Opazität: O.Opazität}), vml ('Schlaganfall', {{}) // transparente Schlaganfall (}); O. lines; I, o) {var c = El.FirstChild; ! 'url (#Standard#vml)'});spin.js
Zwei Änderungen:
(1) Fügen Sie beim Initialisieren, wenn es angezeigt wird, dem entsprechenden Tag einen Fade -Stil hinzu.
(2) Löschen Sie den Fade -Stil jedes Mal.
Nach der Änderung der Änderung ist die Testschnittstelle jetzt verfügbar.
<html> <head> <meta name = "viewPort" content = "width = Geräte-Width"/> <title> Loading2 </title> <link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/<links href = "~/content/content/content/content/spin/spin/spin/spin.js-master/css/css/csS.- und spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin/spin. <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/spin.js-master/js/spin.js"></script> <script type="text/javascript"> $(function () { $("#btn_submit").on("click", function () { //var opts = { // lines: 9, // Number of petals// length: 1, // Petal length// width: 10, // Petal width// radius: 15, // Petal radius from the center// corners: 1, // Petal smoothness (0-1) // Rotate: 0, // Petal rotation angle// direction: 1, // Petal rotation direction 1: Clockwise, -1: Counterclockwise// color: '#000', // Petal color// speed: 1, // Petal rotation speed// trail: 60, // Shadow when petal rotates (percentage) // shadow: false, // Whether the petal displays shadow// hwaccel: false, // Spinner Whether hardware acceleration and high-speed rotation are enabled// ClassName: 'Spinner', // Spinner CSS-Stil // Zindex: 2E9, // Spinner's Z-Axis (Standard ist 20000000) // Top: 'auto', // Spinner-Top-Positionierungseinheit PX Relativ zu dem Elterncontainer // links: 'auto' // Spinner-Positioning-Einheit // // //}; Spinner = neuer Spinner ({}). Spin (Ziel); Blütenstarke von der Mitte: TRUE, OPACITY: 1/8}; </script> </head> <body> <div style = "padding: 0px"> <div style = "height: 450px;"> <div> Abfragebedingungen </div> <div> <Form ID = "FormSearch"> <div> <div> <button type </div> </div> </div> </div> </div> </div> <div id = "foo"> </div> </body> </html> test_spin.cshtmlAnweisungen zur Verwendung: Wenn Ihre Seite nicht JQuery verwendet, lesen Sie die Datei spin.js, diese Datei erfordert keine JQuery -Unterstützung. Wenn Sie JQuery verwenden möchten, lesen Sie die Datei jquery.spin.js. Der obige Code verwendet JQuery nicht. Die Komponente muss ein leeres Div definieren und dann auf diesem Div initialisieren. Die erhaltenen Ergebnisse sind wie folgt:
Wenn Sie mit diesem Effekt nicht zufrieden sind, können Sie natürlich auch die Transparenz der Maskenschicht und den Stil der gesamten Maske festlegen. Es gibt auch verschiedene Parameter für die Rotation, die während der Initialisierung angepasst werden können, und es gibt detaillierte Kommentare im obigen Code.
2) Cooles Modell
1. JQuery.Shcircleloader.js Komponente
Unnötig zu erwähnen, dass diese Komponente auch einfach zu bedienen ist, wird jedoch nicht für Versionen unter IE10 unterstützt. Lassen Sie uns zuerst den Effekt sehen:
In Bezug auf die spezifische Code -Nutzung beabsichtigt der Blogger nicht, tief in sie einzugehen, sodass Sie nach Baidu oder GitHub suchen können.
2. Komponente fakeloader.js
Weitere Optionen, bessere Abflachungseffekte, bessere Erfahrung mit Mobiltelefon- und Tablet -Geräten. Schauen Sie sich einfach die Bilder an und Sie werden es wissen. Open Source -Adresse.
4. Durchflussdiagramm-Plug-In
Ich musste vor einiger Zeit einen Workflow machen und musste zeigen, wohin der aktuelle Prozess lief. Ich fand einen Prozess-Plug-in-Ystep. Der Vorteil dieser Komponente besteht darin, dass sie einfach zu bedienen und leicht ist.
1. Effektanzeige
Lassen Sie uns zuerst den Effekt sehen
Blau reduzierte Version
2. Quellcode Beschreibung
Open Source -Adresse.
3. Codebeispiele
Verweisen Sie zunächst auf die erforderliche Datei
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "~/content/ymstep-master/css/ymstep.css" rel = "styleSheet"/> <srcs src = "~/content/jquery-1.1.1.1.js" src = "~/content/bootstrap/js/bootstrap.js"> </script>
Diese Komponente erfordert Unterstützung von zwei Komponenten: JQuery und Bootstrap.
Dann definieren Sie eine leere Div
<div id = "div_ystep1"> </div>
Initialisieren Sie schließlich die Komponente, wenn die Schaltfläche klickt
<skript type = "text/javaScript"> $ (function () {$ ("#btn_submit"). click (function (function // Schrittname Titel: "Start", // Schrittinhalte (wenn die Maus zum Knoten dieses Schritts wechselt, wird aufgefordert) Inhalt: "Process start"}, {Titel: "Genehmigung", Inhalt: "Jede Rollen starten Genehmigung"}, {Titel: "Implementierung", Inhalt: "Anforderungen beginnen implementieren", {Titel: "End:" Inhalt: "Inhalt:" $ ("#div_ystep1"). setStep (3); </script>Wenn es sich um einen dynamischen Schritt handelt, kann es erforderlich sein, die Schritte zu konstruieren, die dynamisch zugänglich sind. Verwenden Sie dann setStep (), um welchen Schritt Sie erreicht haben.
Häufige Methoden:
// Übergehen zum nächsten Schritt $ (". Ymstep1"). NextStep (); // Überspringen Sie zum vorherigen Schritt $ (". Ymstep1"). Prevstep (); // Überspringen Sie mit dem angegebenen Schritt $ (". Ymstep1"). SetStep (2); // Erhalten Sie den aktuellen Schritt $ (ystep1 ".5. Taste Eingabeaufforderungskomponenten Bootstrap-Konfirmation
Die Taste-Eingabeaufforderungskomponente ähnelt der Bestätigungsfunktion in JS. Diese Bestätigung ist jedoch ein Tooltip-Pop-up-Effekt, der den Benutzern ein Bestimmungs- und Stornierungsurteil ermöglicht, und die Schnittstelle ist freundlicher. Bevor Sie diese Komponente vorstellen, können Sie sich zunächst den Effekt der Eingabeaufforderung in Bootstrap ansehen:
Die Bootstrap-Confirmation-Komponente wird basierend auf dem Effekt dieser Eingabeaufforderung implementiert. Es gibt viele Bootstrap-Confirmation-Komponenten auf GitHub, aber sie sind im Grunde genommen gleich. .
1. Effektanzeige
Der ursprüngliche Effekt
Benutzerdefinierte Titel, Schaltflächentext
2. Quellcode Beschreibung
Open Source -Adresse
3. Codebeispiele
(1) Zitatdateien:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <script src = "~/content/jQuery.9.1.js"> </script Src = "~/content/bootstrap/js/bootstrap.js"> </cript "> </</cript"> </</cript "> </</cript"> </cript "> </cript
Stile erfordern Unterstützung von Bootstrap.css. JavaScript erfordert Unterstützung von JQuery und Bootstrap.js.
(2) entsprechendes Klick -Tag (kann ein beliebiges Tag sein)
<button type = "button" id = "btn_submit1"> <span aria-hidden = "true"> </span> löschen </button>
(3) JS -Initialisierung
<script type = "text/javaScript"> $ (function () {$ ('#btn_submit1'). Bestätigung ({Animation: True, Placement: "Bottom", Titel: "Sind Sie sicher, dass Sie löschen möchten?", Btnoklabel: "OK", btncancellabel: 'coverning ac, ’| OnCancel: function () {// alert ("Clicked Cancel"); </script>(4) Mehr Attribute, Ereignisse, Methoden
Zusätzlich zu den oben genannten initialisierten Eigenschaften gibt es einige häufig verwendete Eigenschaften. Zum Beispiel:
BTNOKCLASS: Bestimmen Sie den Stil der Schaltfläche; BtncancelClass: Stornieren Sie den Stil der Schaltfläche; Singleton: ob nur eine Bestimmungsbox zulässig ist; Popout: Ob Sie das Bestimmungsfeld verbergen sollen, wenn der Benutzer auf einen anderen Ort klickt;
Zum Beispiel können Sie BtnokClass auf btnokclass einstellen: 'Btn Btn-SM Btn-Primary',
6. Bildklassifizierung und Filterkomponenten Muxitup
Dies ist eine Gruppierungs- und Filterkomponente mit einem sehr coolen Effekt und einer Open -Source -Adresse. Der Blogger sah eine Demo im Internet und fand es wirklich effektiv. Ohne weiteres das Bild oben.
Wie wäre es damit, der Effekt ist in Ordnung. Diese Komponente wird vorerst im Projekt nicht verwendet, aber ich bin der Meinung, dass es die Möglichkeit gibt, es in Zukunft zu benötigen, also habe ich sie gesammelt. Der Implementierungscode wird online kopiert. Ich habe es nicht ausführlich studiert. Wenn Sie interessiert sind, können Sie einen Blick darauf werfen. Der HTML+JS -Code wird wie folgt implementiert:
<html> <head> <meta name = "viewPort" content = "width = Geräte-Width"/> <title> mixitup </title> <link href = "~/content/image/css/normalize src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/mixitup-master/jQuery.Eassing.min.js"> </script> <script src = "~/content/mixitup-master/build/jAvitup.min { var filterList = { init: function () { debugger; // MixItUp plugin $('#portfoliolist').mixitup({ targetSelector: '.portfolio', filterSelector: '.filter', effects: ['fade'], easing: 'snap', // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { // Simple parallelax effect $('#portfoliolist .portfolio').hover( function () { $(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad'); $(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad'); }, function () { $(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad'); $(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad'); } ); } }; // Run the show! filterList.init(); }); </script></head><body> <div> <ul id="filters"> <li><span data-filter="app card icon logo web">All categories</span></li> <li><span data-filter="app">Mobile application</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="icon">icon</span></li> <li><span data-filter="logo">Logo</span></li> <li><span data-filter="web">Web page</span></li> </ul> <div id="portfoliolilist"> <div data-cat="logo"> <div> <img src="~/Content/image/Logo/5.jpg" /> <div> <div> <a>Bird Document</a> <span>Logo</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/app/1.jpg" /> <div> <div> <a>Visual Infography</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/4.jpg" /> <div> <a>Sonor's Design</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/1.jpg" /> <div> <div> <a>Typography Company</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/3.jpg" /> <div> <a>Weatherette</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/4.jpg" /> <div> <div> <a>BMF</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/5.jpg" /> <div> <a>Techlion</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/1.jpg" /> <div> <div> <a>KittyPic</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/2.jpg" /> <div> <a>Graph Plotting</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/card/2.jpg" /> <div> <a>QR Quick Response</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/6.jpg" /> <div> <div> <a>Mobi Sock</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <a>Village Community Church</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/4.jpg" /> <div> <div> <a>Domino's Pizza</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/3.jpg" /> <div> <a>Backend Admin</a> <span>Web design</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/1.jpg" /> <div> <div> <a>Instagram</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/2.jpg" /> <div> <a>Student Guide</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/2.jpg" /> <div> <div> <a>Scoccer</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/icon/5.jpg" /> <div> <a>3D Map</a> <span>Icon</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/web/1.jpg" /> <div> <div> <a>Note</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/3.jpg" /> <div> <a>Native Designers</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/logo/4.jpg" /> <div> <a>Bookworm</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <div> <a>Sandwich</a> <span>Icon</span> </div> <div></div> </div> </div> </div> </div> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <a>Reality</a> <span>Business card</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/2.jpg" /> <div> <div> <a>Specialisterne</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div><!-- container --></body></html>muxitup以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的朋友节省寻找组件的时间。
上面分享了几个项目中比较常用的组件，引起了许多朋友的关注。下面还是继续，因为觉得还有几个非常简单、实用的组件，实在不愿自己一人独享，没办法，谁让博主这么爱分享呢~~
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
感谢开源社区，感谢那些喜欢分享的可爱的人儿，开源地址。
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-1.9.1.js"></script> <script 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/jquery.manifest.js"></script>
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
<input type='text' autocomplete="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
//常用属性：得到文本框里面所有项的集合var values = $('#txt_man').manifest('values'); //常用方法1：移除最后一项$('#txt_man').manifest('remove', ':last'); //常用方法2：项文本框里面新增一项。第二个参数的格式由JSON数据的格式决定$('#txt_man').manifest('add', { id: "1", name:"ABC" }); //常用方法3：获取远程搜索到的数据的列表$('#txt_man').manifest('list'); //常用事件1：组件的新增项事件$('#txt_man').on('manifestadd', function (event, data, $item, initial) { //alert("新增的项为："+data); }); //常用事件2：组件的移除项事件$('#txt_man').on('manifestremove', function (event, data, $item) { }); //常用事件3：远程调用时通过键盘选择项变化的事件$('#txt_man').on('manifestselect', function (event, data, $item) { });(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-1.9.1.js"></script> <script 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> <input type='text' id="txt_man2" /> <img src="~/Content/jquery-manifest-master/busy.gif" /> </div> </div> </form>
<script type="text/javascript"> $(function () { $('#txt_man2').manifest({ formatDisplay: function (data, $item, $mpItem) { return data.name; }, formatValue: function (data, $value, $item, $mpItem) { return data.id; }, marcoPolo: { data: { client_id: 'NO2MTQVBQANW3Q3SG23OFVMEGYOWIZDT4E1QHRPZO0BFCN4X', client_secret: 'LG2WRKKS1SXZ2FMKDG01LDW1KDTEKKTULMXM0XEVWRN0LLHB', intent: 'global', limit: 5, v: '20150601' }, formatData: function (data) { return data.response.venues; }, formatItem: function (data, $item) { return data.name; }, minChars: 3, param: 'query' }, required: 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
如果有打算自己用这个远程的方法，可以参考这个数据格式去实现。
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
Quellcodeadresse
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/demo/css/prettify.css" rel="stylesheet" /> <script 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' }, { key: 6, value: 'Columbus' }, { key: 7, value: 'Dallas' }, { key: 8, value: 'Vancouver' }, { key: 9, value: 'Seattle' }, { key: 10, value: 'Los Angeles' } ], display: "value", val:"key" }); }); </script>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: "value", val:"key" }); }); </script>Testmethode, die dem Hintergrund entspricht
public JsonResult TypeaheadData() { var lstRes = new List<object>(); for (var i = 0; i < 20; i++) lstRes.Add(new { key = i, value = Guid.NewGuid().ToString().Substring(0, 4) }); return Json(lstRes, JsonRequestBehavior.AllowGet) ; }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: "key", itemSelected: function (item, 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/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/bootstrap-step/js/brush.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>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</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>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li></ul>
(3) Kreisform
<ul> <li> <a>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li></ul>
(4) Fortschrittsbalken
<ul> <li> <a>step1<span></span></a> </li> <li> <a>step2<span></span></a> </li> <li> <a>step3<span></span></a> </li> <li> <a>step4<span></span></a> </li> <li> <a>step5<span></span></a> </li> <li> <a>step6<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>选项配置</h4><ul> <li> <a>步骤一<span></span></a> </li> <li> <a>步骤二<span></span></a> </li> <li> <a>步骤三<span></span></a> </li> <li> <a>步骤四<span></span></a> </li> <li> <a>步骤五<span></span></a> </li> <li> <a>步骤六<span></span></a> </li> </ul> </div> <div> <div> <div data-ride="carousel" data-interval="false" data-wrap="false"> <div role="listbox"> <div> <p>步骤一</p> <div> 配置角色</div> <div> <input type="text" /> </div> <div> <button type="button">保存</button> </div> </div> <div> <p>步骤二</p> <div> 配置用户</div> <div> <input type="text" /> </div> <div> <button type="button">保存</button> </div> </div> <div> <p>步骤三</p> </div> <div> <p>步骤四</p> </div> <div> <p>步骤五</p> </div> <div> <p>步骤六</p> </div> </div> </div> </div> </div> <div> <button type="button">上一步</button> <button type="button">下一步</button> </div> </div> </div> </div>
Natürlich müssen Sie auch ein Klickereignis für zwei Schaltflächen registrieren
$("#myModalNext .modal-footer button").each(function () { $(this).click(function () { if ($(this).hasClass("MN-next")) { $("#myModalNext .carousel").carousel('next'); $("#myModalNext .step li.active").next().addClass("active"); } else { $("#myModalNext .carousel").carousel('prev'); if ($("#myModalNext .step li").length > 1) { $($($("#myModalNext .step li.active"))[$("#myModalNext .step li.active").length - 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-bootstrap-master/ladda-bootstrap-master/dist/ladda-themeless.min.css" rel="stylesheet" /> <script 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.js"></script> <script src = "~/content/ladda-stootstrap-master/ladda-stootstrap-master/dist/ladda.min.js"> </script>
Komponenteninitialisierung: Initialisieren Sie 4 Schaltflächen
<button data-style="expand-left"><span>expand-left</span></button><button data-style="expand-right"><span>expand-right</span></button><button data-style="zoom-in"><span>zoom-in</span></button><button data-style="zoom-out"><span>zoom-out</span></button> $(function () { $('button').click(function (e) { e.preventDefault(); var l = Ladda.create(this); l.start(); l.setProgress(0 - 1); $.post("/Home2/TypeaheadData",{ }, function (data,statu) { console.log(statu); }, "json"); .always(function () { l.stop(); }); return false; }); });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="expand-left"data-style="expand-right"data-style="expand-up"data-style="expand-down"data-style="zoom-in"data-style="zoom-out"data-style="slide-left"data-style="slide-right"data-style="slide-up"data-style="slide-down"data-style="contract"
(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 progress = 0; var interval = setInterval(function () { progress = Math.min(progress + Math.random() * 0.1, 1); instance.setProgress(progress); if (progress === 1) { instance.stop(); clearInterval(interval); } }, 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="stylesheet" /> <script 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/dist/js/bootstrap-switch.js"></script>
Komponenten hängen von JQuery und Bootstrap ab
Dann gibt es die Initialisierung von HTML und JS
<input type="checkbox" checked /> $(function () { $('input[type=checkbox]').bootstrapSwitch({ size: "large" });})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-rating.css" rel="stylesheet" /> <script 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" step="0.5" data-stars=5 data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}"><input id="input-22" value="0" type="number" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon=0>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 ().
十三、总结
通过这篇文章给大家分享了下bootstrap的十二款组件，博主相信这些里面肯定有些你能够用上，可能有些并不常用，但留着以后或许能用上呢！至此，bootstrap组件的总结暂时告一段落，后面将会分享下ko的一些封装。如果你觉得本文能够帮到你，可以推荐下，博主一定继续努力！