Préface: J'ai partagé de nombreux composants communs de bootstrap avant, y compris les formulaires, la vérification des formulaires, le téléchargement de fichiers, les boîtes déroulantes à cocher, les boîtes contextuelles, etc. Pendant cette période, le blogueur a collecté des composants utiles (dont certains ont été utilisés dans le projet). Après deux jours, il en a réglé certains. Sur la base du principe des «bonnes choses doivent être partagées avec les autres», nous donnerons aujourd'hui des avantages pour partager les choses collectées par le blogueur pour référence par les jardiniers dans le besoin. La plupart des composants sont des composants open source, et certains d'entre eux sont les effets trouvés et réécrits par des blogueurs sur Internet. Ils peuvent ne pas être satisfaisants. Si vous êtes intéressé, jetez un œil.
1. Composant temporel
Il existe de nombreux composants dans le style bootstrap. Vous pouvez rechercher le mot-clé "DatePicker" sur GitHub et vous pouvez trouver de nombreux composants de temps. Le blogueur en a déjà utilisé deux et a constaté qu'il y aura des problèmes de grande ou de petite taille. Après un dépistage, nous avons trouvé un composant temporel qui a de bons résultats et peut être utilisé pour divers scénarios. Jetons un coup d'œil à son style ci-dessous.
1. Affichage d'effet
Effet initial
Personnalisation des formats de culture et de date dans le composant: seules les dates sont affichées
Afficher la date et l'heure (l'expérience des téléphones portables et des tablettes peut être meilleure)
2. Description du code source
Chuchu a regardé l'effet du composant et a donné l'adresse du code source
3. Exemples de code
Tout d'abord, référencez le fichier requis
<link href = "~ / contenu / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <link href = "~ / contenu / bootstrap-datetimepicker-master / build / css / bootstrap-datetimepick src = "~ / contenu / jQuery-1.9.1.js"> </ script> <script src = "~ / contenu / bootstrap / js / bootstrap.js"> </ script> <script src = "// cdnjs.cloudflare.com/ajax/libs/Moment.js/2.0/momement-with-locales.js"> </ script> src = "~ / contenu / bootstrap-dattetimepicker-master / build / js / bootstrap-datetimepicker.min.js"> </ script>
JQuery et bootstrap sont nécessaires. De plus, vous devez également vous référer au fichier Moment-With-Locales.js. Bien sûr, vous pouvez également télécharger ce fichier JS dans votre zone locale sans utiliser cette méthode CDN. Vous pouvez télécharger complètement ce fichier JS dans votre région, puis ajouter une référence locale.
(1) effet initial
<label> Date: </ Label> <div class = 'input-group Date' id = 'DateTimePicker1'> <input type = 'Text' /> <span> <span> </span> </span> </ div> <script type = "Text / javascript"> $ (function () {$ ('# dateTimePicker1'). DatetimePicker ();}); </cript>Cela donnera l'effet comme indiqué dans l'image ci-dessus.
(2) Culture chinoise et formatage des dattes
La partie HTML reste inchangée. Ajoutez simplement des paramètres lors de l'initialisation de JS.
<script type = "text / javascript"> $ (function () {$ ('# dateTimePicker1'). DateTimePicker ({format: 'yyyy-mm-dd', // formatage de date, seulement le lieu de date: 'zh-cn' // culture chinoise});}); </cript>(3) l'heure d'affichage
<label> Time: </ Label> <div class = 'input-group Date' id = 'dateTimePicker2'> <input type = 'text' /> <span> <span> </span> </span> </div> <script type = "Text / javascrip HH: MM: SS ', Locale:' ZH-CN '}); </cript>
(4) Date maximale et date minimale
$ ('# DateTimePicker1'). DateTimePicker ({Format: 'Yyyy-mm-dd', // Date Formatting, seulement Afficher la date des paramètres: 'Zh-Cn', // Chinese Culture Maxdate: '2017-01-01', // maximum Date Mindate: '2010-01-01' // Date minimum});(5) Activer le bouton Supprimer
ShowClear: True
(6) Affichage du mode Attribut. Définissez le navigateur pour sélectionner le mode pour copier le code comme suit: ViewMode: 'Years'
(7) Autres
Pour des fonctions plus puissantes, veuillez vous référer à l'API, donc je ne les répertorierai pas tous ici. Il existe un grand nombre d'attributs, d'événements et de méthodes pour répondre à vos différents besoins spéciaux.
2. Composants de l'appareil auto-croissant
En ce qui concerne Bootstrap AutoInCreader, il peut ne pas être nécessaire dans chaque projet. Il existe des scénarios spéciaux, tels que: une certaine zone de texte nécessite des numéros de données, et la taille du tableau doit être affinée. Après avoir parlé pendant longtemps, certains jardiniers peuvent ne pas savoir à quoi cela ressemble, alors cliquez sur l'image.
1. Affichage d'effet
En fait, l'effet est très simple, mais il peut automatiquement définir la valeur maximale, la valeur minimale et la valeur auto-axée, et peut effectuer automatiquement une vérification numérique. La chose la plus pratique est qu'elle doit être initialisée à l'aide de JavaScript, et elle doit seulement être initialisée en HTML.
2. Description du code source
Code source et adresse de document
3. Exemples de code
Le premier fichier à référence est le suivant:
<link href = "~ / contenu / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <link rel = "Stylesheet" href = "https://maxcdn.bootsstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min..css"> <lien " href = "~ / content / jQuery.spinner-master / dist / css / bootstrap-spinner.css" rel = "Stylesheet" /> <script src = "~ / contenu / jQuery-1.9.1.js"> </ script> <script src = "~ / contenu / bootstrap / js / bootstrap.js"> </ script> src = "~ / content / jQuery.spinner-master / dist / js / jQuery.spinner.js"> </ script>
Le fichier FONT-AWEAEOME.MIN.CSS est également un fichier de référence CDN, et vous pouvez également vous y référer à votre local.
(1) initialisation
<div data-trigger = "spinner"> <input type = "text" value = "1" data-rule = "Quantity"> <span> <a href = "javascript:;" data-spin = "up"> <i> </i> </a> <a href = "javascript:;" data-spin = "down"> <i> </i> </a> </span> </div>
Juste une section HTML simple, vous pouvez voir l'effet comme indiqué dans l'image ci-dessus. Est-ce facile?
(2) type auto-croissant
Lors de la visualisation du code source du composant, vous pouvez voir qu'il existe plusieurs types d'auto-incitation définis pour nous:
Vous pouvez définir l'attribut de règle de données à ces types, tels que:
Les règles qui peuvent contrôler le composant auto-augmentation sont effectuées conformément aux règles mensuelles.
(3) Définir la valeur maximale, la valeur minimale, la valeur auto-ajoutée
En plus des types spécifiques ci-dessus, les composants prennent également en charge la valeur maximale, minimale et auto-ajout personnalisée.
<div data-trigger = "Spinner"> <input type = "text" value = "1" data-min = "- 10" data-max = "10" data-step = "2" data-rule = "Quantity"> <span> <a href = "javascript:;" data-spin = "up"> <i> </i> </a> <a href = "javascript:;" data-spin = "down"> <i> </i> </a> </span> </div>
data-min = "- 10": valeur minimale data-max = "10": valeur maximale data-step = "2": valeur auto-croissante
C'est facile à comprendre et je ne l'expliquerai pas trop. Effet:
(4) Capture d'événements
Le composant fournit deux événements modifiés et changeants, ce qui correspond au changement numérique et au rappel des événements après le changement.
$ ('# id'). spinner ('changé', fonction (e, newVal, oldVal) {}); $ ('[data-trigger = "spinner"]'). Spinner ('change', function (e, newval, oldval) {});3. Effet de chargement
Il y a quelques jours, un membre du groupe a demandé quels composants utiliser pour l'effet de chargement de bootstrap. En fait, la recherche sur Baidu peut également trouver de nombreux résultats. Ici, le blogueur partagera quelques widgets chargés en fonction de son expérience d'utilisation, en espérant que tout le monde puisse les utiliser. Il est principalement divisé en pratique et cool. Le modèle pratique a un effet moyen, mais il peut être utilisé pour divers navigateurs; Le modèle cool est écrit en utilisant les derniers CSS3 et HTML5, et l'effet est très cool, mais fondamentalement, la version inférieure de IE (en dessous de 10) n'est pas compatible.
1. Pratique
1. Composant de perfectionnement
Ce composant est un JS trouvé par le blogueur sur Internet, mais après l'avoir téléchargé, j'ai trouvé de grands et petits problèmes. Le blogueur l'a donc réécrit et l'a nommé le composant de chargement bootstrap. Son principe est d'apparaître une couche de couverture lorsque le composant est démarré, puis lorsque le composant est fermé, le Dom de couche de superposition est supprimé et l'effet de chargement utilise une image GIF.
Contenu du fichier Perfectload.js:
/ *****************. La vitesse Internet est extrêmement féroce, en particulier pour les sites Web accrochés aux serveurs étrangers. Une fois que vous ouvrez un tas de matériaux, vous pouvez lentement charger les emplacements et les emplacements sont incohérents. Par conséquent, cette méthode est écrite pour faciliter tout le monde pour utiliser ************************************************************ / jQuery.bootstraploading = {start: function (Options) {var par défaut = {Opacité: 1, // Page de chargement de la page Background: "#FFF", // Page de chargement Couleur de la page BorderColor: " Couleur BorderWidth: 1, // Invite Border Width Borderstyle: "Solid", // Invite Border Style LoadingTips: "Chargement, veuillez vous attendre ...", // Text Tipscolor: "# 666", // Invite Color Delaytime: 1000, // Une fois le chargement de la page terminé, la page de chargement est progressivement hors de la vitesse: 999, // Il est égal à 0, il n'est pas nécessaire de suspendre} var options = $ .extend (par défaut, options); // Obtenez la largeur de la page et la hauteur var _pageHeight = document.DocumentElement.ClientHeight, _PageWidth = document.DocumentElement.ClientWidth; // ChargeingHtml Contenu personnalisé affiché avant que la page ne soit chargée var _loadinghtml = '<div id = "LoadingPage" style = "position: fixe; Left: 0; top: 0; _position: Absolute; Width: 100%; height:' + _pageHeight + 'px; background:' + options. '; filtre: alpha (opacity =' + options.opacity * 100 + '); z-index:' + options.zindex + '; "> <div id =" Loadingtips "Style =" Position: Absolute; Options.Borterwidth + 'PX; «; // représente l'effet de chargement $ ("body"). Append (_lokinghtml); // obtient la largeur et la hauteur de la boîte d'invite de chargement var _lokingtipsh = document.getElementById ("LoadingTips"). ClientHeight, _lokingTipsw = document.getElementById ("LoadingTips"). ClientWidth; // Calculez la distance et maintenez la boîte de chargement de chargement, en bas, à gauche et à droite, var centré _lokingtop = _pageHeight> _lokingtipsh? (_PageHeight - _lokingtipsh) / 2: 0, _loadingleft = _pageWidth> _lokingtipsw? (_PageWidth - _lokingTipsw) / 2: 0; $ ("# chargingtips"). css ({"Left": _loadingleft + "px", "top": _lokingtop + "px"}); // Écoutez le document d'état de chargement de page.OnreadyStateChange = PageLoaded; // Exécuter la fonction pageloaded () {if (document.readystate == "complet") {var chargement massk = $ ('# chargingpage'); setTimeOut (function () {charingmask.animate ({"opacity": 0}, options.delaytime, function () {$ (this) .hide ();});}, options.Sleep); }}}, end: function () {$ ("# chargingpage"). disover (); }}Ce JS est essentiellement en ligne, mais sur cette base, le blogueur a ajouté une méthode finale.
Voyons comment les composants sont utilisés. Voici le code de test:
<html> <éad- head> <meta name = "Viewport" contenu = "width = device-width" /> <tight> Loading </ title> <link href = "~ / contenu / bootstrap / css / bootstrap.css" rel = "stylesheet" /> <script src = "~ / contenu / jQuery-1.9.1.js"> </ script> src = "~ / contenu / bootstrap / js / bootstrap.js"> </ script> <script src = "~ / contenu / bootstrap-chargeding / perfecter.js"> </ script> <script type = "text / javascrip $ .bootstraploading.start ({chargement de chargement: "Les données sont en cours de traitement, veuillez patienter ..."}); }); </ script> </ head> <body> <div style = "padding: 0px"> <div style = "height: 450px;"> <div> Conditions </ div> <div> <form id = "FormSearch"> <div> <div> <Button Type = "Button" id = "btn_submit"> <spann-hidden = "true"> </ spannem Tester de chargement </ Formulaire> </ Formul> </ Formul> Formul> </div> </ div> </ div> </ div> </div> </ div> </div> </div> </div> </div> </div> </div> </ody> </html>Instructions pour une utilisation: Le composant ne nécessite aucun code HTML, il n'a qu'à appeler la méthode de démarrage du composant lors de l'exécution du chargement. La méthode start () démarre la couche pop-up et peut définir tous les paramètres dans la variable par défaut. Une fois le chargement terminé, la méthode de fin du composant sera appelée et la couche pop-up sera automatiquement supprimée. Voyons l'effet:
Si vous n'êtes pas satisfait de l'effet, vous pouvez définir vous-même les paramètres dans les valeurs par défaut. Les annotations sont écrites en détail, donc je ne les listerai pas ici.
2. Composant de chargement chrysanthémum spin.js
L'utilisation d'images pour afficher les effets de chargement a ses inconvénients inhérents, de sorte que de nombreux composants de chargement utilisent désormais CSS + JS pour réaliser des effets d'animation. Spin.js est l'un de ces exemples. Spin.js est un composant open source avec une adresse open source.
Après avoir téléchargé le code source, l'initialisation constate que le composant n'a pas de masque, donc cela ne peut être que ceci:
Après avoir recherché ses paramètres pendant longtemps, je n'ai pas pu les trouver, ou je ne les ai pas trouvés là où il y avait une "organisation". Il n'y a aucun moyen, le blogueur ne peut qu'ajouter l'effet du masque lui-même. Ainsi, un nouveau fichier de style CSS a été créé et temporairement nommé spin.css, avec un seul style:
.fade {position: fixe; en haut: 0; à droite: 0; en bas: 0; à gauche: 0; Z-Index: 9999; Opacité: 1; Color en arrière-plan: gris;}Ensuite, Spin.js a été réécrit à deux endroits, et le contenu de réécriture est le suivant:
/ ** * Copyright (c) 2011-2014 Felix GNASS * Licencié sous la licence MIT * http://spin.js.org/ * * Exemple: var opts = {lignes: 12, // le nombre de lignes à dessiner la longueur: 7, // la longueur de chaque large largeur: 5, 5, 1/20, la taille de la ligne de la taille: // le radius de l'échelle du cercle intérieur: Corners de spinner: 1, // rondeur (0..1) Couleur: '# 000', // #rgb ou #rrggbb OPCACITY: 1/4, // Opacité des lignes Rotation: 0, // Rotation Offset Direction: 1, // 1: dans le sens horaire, -1: Speed dans le sens contre-courant: 1, // Rounds par seconde piste: 100, // Afterglow pourcent setTimeout () zindex: 2e9, // Utilisez une classe z-index haute par défaut: «Spinner», // CSS Classe à affecter au sommet de l'élément: '50% ', // Centre verticalement à gauche: '50%', // Center Horizontally Shadow: False, // pour rendre un buggy Shadow }; var cible = document.getElementById ('foo'); var spinner = new Spinner (opts) .spin (cible); * /; (fonction (root, factory) {if (typeof module == 'object' && module.exports) module.exports = factory (); // CommonJs else if (typeof define == 'function' && define.amd) define (factory); // module AMD Else root.spinner = factory (); // Browser Global} (that, '); prefixes = [webkit ',' moz ',' ms ',' o ']; * Une div est créée. <n; i ++) {Parent.APPEDCHILD (arguments [I]); * 100), i, lignes]. Prefix + '-' || '% {opacité:' + alpha + '}' + '100% {opacité:' + z + '}' + '}', feuille. I; Fonction CSS (el, prop) {pour (var n dans Prop) {el.style [vendor (el, n) || n] = prop [n]; =7 Chaque largeur de ligne: 5, // le rayon d'épaisseur de ligne: 10, // le rayon de l'échelle du cercle intérieur: 1.0, // échelle la taille globale des coins de spinner: 1, // rondeur (0..1) Couleur: '# 000', // #rgb ou #rrggbb opacité: 1/4, // 1: Corloge: - 0, // Rotation Offset Difficie Vitesse dans le sens antihoraire: 1, // Rounds par seconde Trail: 100, // pourcentage de après-Reglow FPS: 20, // Frames par seconde lorsque vous utilisez Settimeout () Zindex: 2e9, // Utilisez un Haute Z-Index par défaut ClassName: 'Spinner', // CSSS Class pour attribuer à l'élément TOP: '50%', // Centre à gauche: '50% ', // Centre Horrizontal: FAUX: FAUX, à gauche: '50%' ', Rendez une ombre Hwaccel: FALSE, //, il faut utiliser la position d'accélération matérielle: 'Absolute' // Element Positioning}; {** * Ajoute le spinner à l'élément cible donné. O.Position, largeur: 0, Zindex: O.zindex, o.left, top: o.top}); (! O.lines; (fonction anim () {i ++; for (var j = 0; j <o.lines; j ++) {alpha = math.max (1 - (i + (o.lines - j) * Step)% f * Step, o.opacity); self.opacity (el, j * o.direction + start, alpha, o);} ~~ (1000 / fps);}) ();} el.parentNode.classname = el.parentNode.classname.replace (Replace, ''); (O.lines - 1) * (1 - O.Direction) / 2; Transform: 'rotation (' + ~~ (360 / o.lines * i + o.rotate) + 'deg) traduire (' + o.scale * o.radius + 'px' + ', 0)', borderradius: (o.corners * o.scale * o.width >> 1) + 'px'}); css (createel (), {position: 'absolu', top: 1 + ~ (o.scale * o.width / 2) + 'px', transform: o.hwaccel? 'tradlate3d (0,0,0)': '', opacité: o.opacity, animation: usecssanimations && adanimation (o.opacital, o.trail, start + i *. O.lines) + '' + 1 / O.Speed + 'S Linear Infinite'}); RGBA (0,0,0, .1)));} Retourne El;}, / ** * initvml () {/ * Fonction utilitaire pour créer une balise VML * / fonction VML (tag, att) {return CreateEel ('<' + tag + 'xmlns = "urn: schémas transforms-transforms.com: VML">', attr); 'comportement: url (# par défaut # vml)'); {largeur: s, hauteur: s});} 360 / o.lines * i + 'deg', à gauche: ~~ dx}), ins (css (vml ('roundrect', {arcsize: o.corners}), {width: r, height: o.scale * o.width, gauche: o.scale * o.radius, top: -o.Scale * o.width >> 1, filtre: Filter}) vml ('fill', {couleur: getColor (o.color, i), opacité: o.opacity}), vml ('stroke', {opacité: 0}) // troupe transparent pour corriger le saignement de la couleur sur l'opacité))); 'PROCIDE: DIMMAGETRANSELTS = O.Shadow && o.lines || 0; = Createel (style ', {Type:' Text / CSS '}); && sonde.adj) initvml (); else usecsanimations = vendor (sonde, 'animation');} return spinner;}));spin.js
Deux changements:
(1) Lors de l'initialisation, s'il est affiché, ajoutez un style de fondu à la balise correspondante.
(2) Supprimer le style de fondu à chaque fois.
Une fois la modification apportée, l'interface de test est désormais disponible.
<html> <éadfr> <meta name = "Viewport" contenu = "width = device-width" /> <tight> charging2 </title> <link href = "~ / contenu / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <link href = "~ / contenu / spin <script src = "~ / contenu / jQuery-1.9.1.js"> </ script> <script src = "~ / contenu / bootstrap / js / bootstrap.js"> </ script> <script src = "~ / contenu / spin $ ("# btn_submit"). sur ("cliquez", fonction () {// var opts = {// lignes: 9, // nombre de pétales // longueur: 1, // la longueur de pétale // largeur: 10, // la largeur de pétale // rayon: 15, // rayon de pétale du centre // coins: // petal smoothness (0-1) // rota Direction: 1, // Rotation de la pétale Direction 1: dans le sens des aiguilles d'une montre, -1: dans le sens antihoraire // Couleur: '# 000', // Couleur de pétale // vitesse: 1, // Speed Rotation Petal // Trail: 60, // Shadow When Petal Rotates (pourcentage) // Oswir 'Spinner', // Spinner CSS Style Nom // Zindex: 2e9, // Spinner's Z-axis (par défaut est 2000000000) Spinner ({}). Spin (Target); L'ombre centrale: true, opacité: 1/8}; </ script> </ head> <body> <div style = "padding: 0px"> <div style = "height: 450px;"> <div> Conditions </ div> <div> <form id = "FormSearch"> <div> <div> <Button Type = "Button" id = "btn_submit"> <spann-hidden = "true"> </ spannem Tester de chargement </ Formulaire> </ Formul> </ Formul> Formul> </ div> </div> </ div> </ div> </ div> </ div> <div id = "foo"> </ div> </ body> </html> test_spin.cshtmlInstructions pour une utilisation: Si votre page n'utilise pas jQuery, reportez-vous au fichier spin.js, ce fichier ne nécessite pas de support jQuery; Si vous souhaitez utiliser jQuery, reportez-vous au fichier jQuery.spin.js. Le code ci-dessus n'utilise pas jQuery. Le composant doit définir une div vide, puis l'initialiser sur cette div. Les résultats obtenus sont les suivants:
Bien sûr, si vous n'êtes pas satisfait de cet effet, vous pouvez également définir la transparence de la couche de masque et le style de l'ensemble du masque. Il existe également divers paramètres de rotation qui peuvent être personnalisés lors de l'initialisation, et il existe des commentaires détaillés dans le code ci-dessus.
2. Style cool
1. JQUERY.SHCIRCLELOADER.JS
Inutile de dire que ce composant est également simple à utiliser, mais il n'est pas pris en charge pour les versions ci-dessous IE10. Voyons d'abord l'effet:
Quant à l'utilisation spécifique du code, le blogueur n'a pas l'intention d'y aller profondément, vous pouvez donc rechercher sur baidu ou github.
2. Composant fakeloader.js
Plus d'options, un meilleur effet d'aplatissement, une meilleure expérience avec les téléphones portables et les tablettes. Regardez les photos et vous le saurez. Adresse open source.
4. Plug-in de l'organigramme
J'ai dû faire un workflow il y a quelque temps et je devais montrer où allait le processus actuel. J'ai trouvé un plug-in de processus ystep. L'avantage de ce composant est qu'il est simple à utiliser et léger.
1. Affichage d'effet
Voyons l'effet en premier
Version blue réduite
2. Description du code source
Adresse open source.
3. Exemples de code
Tout d'abord, référencez le fichier requis
<link href = "~ / content / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <link href = "~ / contenu / ystep-master / css / ystep.css" rel = "Stylesheet" /> <script src = "~ / contenu / jQuery-1.9.1.js"> </ script> src = "~ / content / bootstrap / js / bootstrap.js"> </ script>
Ce composant nécessite le support de deux composants: jQuery et bootstrap.
Puis définissez un div vide
<div id = "div_ystep1"> </ div>
Enfin, initialisez le composant lorsque le bouton est cliqué
<script type = "text / javascript"> $ (function () {$ ("# btn_submit"). cliquez sur (fonction () {$ ("# div_ystep1"). LoadStep ({// ystep apparence taille // Valeur facultative: petite taille: "petite", // les étapes de couleurs: Green, Green, Bleu // Étape Nom Titre: "Démarrer", // Contenu de l'étape (lorsque la souris passe au nœud de cette étape, il sera invité) Contenu: "Process Start"}, {Title: "Approbation", Content: "Every Roles Start Approval"}, {Title: "Implementation", Content: "Exigences Begin Implementation"}, {Title: "End", Content: "Process End"}]}); $ ("# div_ystep1"). SetStep (3);}); </cript>S'il s'agit d'une étape dynamique, il peut être nécessaire de construire dynamiquement l'attribut des étapes. Ensuite, utilisez SetStep () pour définir l'étape que vous avez atteint.
Méthodes courantes:
// Passez à l'étape suivante $ (". Ystep1"). NextStep (); // passer à l'étape précédente $ (". Ystep1"). Prevstep (); // sautez à l'étape spécifiée $ (". Ystep1"). Setstep (2); // Obtenez l'étape actuelle $ (". Ystep1"). Getstep ();5. Composant d'invite de bouton Bootstrap-Confirmation
Le composant d'invite de bouton est un peu similaire à la fonction de confirmation dans JS, mais cette confirmation est un effet contextuel sur l'infiltration, donnant aux utilisateurs une détermination et un jugement d'annulation, et l'interface est plus conviviale. Avant d'introduire ce composant, vous pouvez d'abord jeter un œil à l'effet de la boîte d'invite dans Bootstrap:
Le composant Bootstrap-Confirmation est mis en œuvre en fonction de l'effet de cette boîte d'invite. Il existe de nombreux composants d'amont de l'amorçage sur GitHub, mais ils sont fondamentalement les mêmes. .
1. Affichage d'effet
L'effet le plus original
Titre personnalisé, texte du bouton
2. Description du code source
Adresse open source
3. Exemples de code
(1) citer les fichiers:
<link href = "~ / contenu / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <script src = "~ / contenu / jQuery-1.9.1.js"> </ script> <script src = "~ / content / bootstrap / js / bootstrap.js"> </cript>
Les styles nécessitent une prise en charge de bootstrap.css. JavaScript nécessite une prise en charge de jQuery et bootstrap.js.
(2) Tag de clic correspondant (peut être n'importe quelle balise)
<bouton type = "Button" id = "btn_submit1"> <span aria-hidden = "true"> </span> delete </futton>
(3) Initialisation JS
<script type = "text / javascript"> $ (function () {$ ('# btn_submit1'). Confirmation ({animation: true: placement: "inférieur", titre: "êtes-vous sûr de vouloir supprimer?", btnokLabel: 'ok' ', btncancelabel:' cale oncancel: function () {// alert ("cliquez sur Annuler");}})}); </cript>(4) Plus d'attributs, événements, méthodes
En plus des propriétés initialisées mentionnées ci-dessus, il existe certaines propriétés couramment utilisées. Par exemple:
BTNOKClass: Déterminez le style du bouton; btncancelClass: annulez le style du bouton; Singleton: si une seule boîte de détermination est autorisée; Popout: s'il faut masquer la case de détermination lorsque l'utilisateur clique sur un autre endroit;
Par exemple, vous pouvez définir BTNOKClass sur BTNOKClass: «BTN BTN-SM BTN-PRIMARY»,
6. Composants de classification et de filtrage des images muxitup
Il s'agit d'un composant de regroupement et de filtrage avec un effet très cool et une adresse open source. Le blogueur a vu une démo sur Internet et a pensé que c'était vraiment efficace. Sans plus tarder, l'image ci-dessus.
Que diriez-vous, l'effet est OK. Ce composant n'est pas utilisé dans le projet pour le moment, mais je pense qu'il est possible de l'avoir besoin à l'avenir, donc je l'ai collecté. Le code d'implémentation est copié en ligne. Je ne l'ai pas étudié en profondeur. Si vous êtes intéressé, vous pouvez jeter un œil. Le code HTML + JS est implémenté comme suit:
<html> <éadf> <meta name = "Viewport" contenu = "width = device-width" /> <tight> mixitup </ title> <link href = "~ / contenu / image / css / normalize.css" rel = "Stylesheet" /> <lin 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. Résumé
以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。
The above is the relevant knowledge of the Bootstrap component series welfare chapter (recommended) that the editor introduced to you. J'espère que cela vous sera utile. If you have any questions, please leave me a message and the editor will reply you in time. Thank you very much for your support to Wulin.com website!