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. Cooler Stil
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.easing.min.js"></script> <script src="~/Content/mixitup-master/build/jquery.mixitup.min.js"></script> <script type="text/javascript"> $(function () { 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>muxitup7. Zusammenfassung
以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。
The above is the relevant knowledge of the Bootstrap component series welfare chapter (recommended) that the editor introduced to you. Ich hoffe, es wird Ihnen hilfreich sein. If you have any questions, please leave me a message and the editor will reply you in time. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!