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) // rotation: 0, // potal botation // 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) modèle 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 le pas 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>muxitup以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的朋友节省寻找组件的时间。
The above shared several commonly used components in the project, which attracted the attention of many friends. The following is still to continue because I feel that there are still several very simple and practical components, and I really don’t want to enjoy them alone. Il n'y a aucun moyen. Who makes the blogger love sharing so much?~
7. Manifeste des composants d'entrée multi-valeurs
En ce qui concerne l'entrée multi-valeurs des zones de texte, elle a toujours été une exigence commune. Aujourd'hui, le blogueur recommande un composant d'entrée multi-valeurs utile pour tout le monde. Ne me remerciez pas, appelez-moi "écharpe rouge"!
1、效果展示
Boîte d'entrée multi-valeurs locale
Boîte d'entrée multi-valeurs à distance
2. Description du code source
感谢开源社区，感谢那些喜欢分享的可爱的人儿，开源地址。
3. Exemples de code
(1) entrée multi-valeurs locale
Tout d'abord, vous devez faire référence aux fichiers suivants
<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>
Les fichiers JS et CSS de Bootstrap ne sont pas nécessaires. Cet article est pour le bien du bon style, il est donc référencé. Le composant manifeste ne s'appuie pas sur bootstrap, mais dépend de jQuery. De plus, il doit également se référer à trois fichiers: jQuery.manifest.css, jquery.ui.widget.js et jquery.marcopolo.js.
Ensuite, il y a l'initialisation de HTML et JS
<input type='text' autocomplete="off" id="txt_man" /> <script type="text/javascript"> $(function () { $('#txt_man').manifest(); });</script>Grâce à des étapes simples comme ci-dessus, l'effet ci-dessus peut être produit. N'est-ce pas très simple? Jetons un coup d'œil à certains de ses usages
//常用属性：得到文本框里面所有项的集合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) entrée multi-valeurs à distance
La voie à l'entrée de recherche à distance nous oblige à fournir une adresse URL, à obtenir les données, puis à revenir au navigateur. Pour plus de simplicité, cet article utilise directement l'URL sur le site Web du code source pour afficher l'effet.
Tout d'abord, vous devez référencer le fichier JS
<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>
Par rapport à ce qui précède, il y a une référence supplémentaire au fichier jQuery.marcopolo.js.
Ensuite, il y a l'initialisation de HTML et 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 }); }); </cript>Quant à la signification de chaque paramètre, il devrait être facile de comprendre si vous en avez besoin. Le blogueur a brièvement surveillé la valeur de retour de cette méthode de recherche distante
如果有打算自己用这个远程的方法，可以参考这个数据格式去实现。
8. Composant de recherche de zone de texte bootstrap-type
En fait, de nombreux composants ont cette fonction concernant la fonction de la recherche de zone de texte. Par exemple, il existe un composant assorti automatique dans l'interface utilisateur jQuery que le blogueur utilisait pour réaliser l'achèvement automatique. Les composants de recherche automatiques des zones de texte bootstrap émergent en ligne. La raison pour laquelle j'ai choisi ce composant aujourd'hui est parce que je pense qu'il est similaire au style de bootstrap, et les composants sont plus petits, simples et pratiques.
1、效果展示
Recherche statique locale (la source de données est locale)
Recherche à distance (la source de données est récupérée à distance via la demande AJAX)
2. Description du code source
Adresse de code source
3. Exemples de code
Le premier fichier qui doit être référencé: contient principalement un fichier CSS et un fichier JS. Besoin du support de jQuery et 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-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"></script>
Puis l'initialisation du composant
<input type = 'text' id = "txt_man" />
Source de données localement
<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" }); }); </cript>La source de données est obtenue via la demande AJAX
<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" }); }); </cript>Méthode de test correspondant à l'arrière-plan
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) ; }Propriétés communes:
• Affichage: le nom du champ affiché
• Val: la valeur réelle
• Éléments: le nombre de résultats de recherche affichés par défaut. La valeur par défaut est 8
• Source: source de données locale, formatée sous forme de tableau.
• ajax: l'objet demandé par ajax peut être directement une URL de chaîne ou un objet d'objet. S'il s'agit d'un objet d'objet, je ne parlerai pas d'URL. La propriété TriggerLength indique que l'entrée de plusieurs caractères déclenche la recherche.
Événements couramment utilisés:
• ItemSelected: déclenché lorsque la valeur de recherche est sélectionnée.
<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) { } }); }); </cript>L'élément de paramètre représente l'objet sélectionné, le paramètre VAL représente la valeur réelle de l'élément sélectionné et le texte représente la valeur affichée de l'élément sélectionné.
9. Composant de pas de bootstrap
En ce qui concerne le composant Bootstrap Step, l'article précédent a introduit un widget Ystep. Il peut jouer un certain rôle dans la visualisation de la progression de la tâche, mais pour certaines entreprises complexes, il est un peu impuissant de gérer l'activité correspondante conformément aux étapes actuelles. Aujourd'hui, le blogueur présentera un composant Step qui a un très bon effet. Avec ce composant, les programmeurs n'ont plus à se soucier de la conception des étapes complexe.
1、效果展示
Avoir un aperçu du style
Suivez les étapes de "étape précédente" et "étape suivante"
Plus d'étapes
2. Description du code source
Ce composant a été trouvé par le blogueur en ligne. J'ai vu que de nombreux styles et usages proviennent de bootstrap. La seule chose à laquelle je dois me référer est un fichier JS et CSS. La source de code source n'a pas encore été trouvée. Si quelqu'un connaît la source de code source, vous pouvez le dire au blogueur. De plus, afin de respecter les résultats du travail de l'auteur, le blogueur doit respecter l'originalité!
3. Exemples de code
Les fichiers qui doivent être référencés
<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 et Brush.js doivent être référencés, et les composants ont besoin du support de jQuery et Bootstrap.
Ensuite, il y a l'initialisation du composant.
(1) flèche
<ul> <li> <a>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li></ul>
S'il s'agit d'une étape statique, vous n'avez besoin que du code HTML ci-dessus pour voir l'effet de l'étape de flèche dans l'image ci-dessus. Le style actif représente ici le style que l'étape a passé.
(2) carré
<ul> <li> <a>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li></ul>
(3) forme circulaire
<ul> <li> <a>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li></ul>
(4) Bar de progression
<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) étape précédente, étape suivante
L'étape «étape précédente» et la «prochaine étape» de l'image ci-dessus sont définies par vous-même dans le composant modal bootstrap, ou sont le code publié pour votre référence.
<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>
Bien sûr, vous devez également enregistrer un événement de clic pour deux boutons
$("#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") } } }) })La logique peut être incomplète et des tests sont nécessaires s'ils sont utilisés formellement.
10. Composant de charge de bouton ladda-bootstrap
En ce qui concerne le chargement des boutons, le blogueur a longtemps voulu trouver un composant approprié à optimiser. S'il n'est pas traité, il y a certainement une possibilité d'opérations répétées. Jetons un coup d'œil à une si petite chose aujourd'hui.
1、效果展示
Première rencontre
Couleur personnalisée, taille, barre de progression
2. Description du code source
Adresse de code source
3. Exemples de code
Les fichiers qui doivent être référencés
<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-bootstrap-master / ladda-bootstrap-master / dist / ladda.min.js"> </ script>
Initialisation des composants: Initialiser 4 boutons
<Button Data-Style = "Expand-left"> <span> Expand-left </span> </ bouton> <Button Data-Style = "Extend-droite"> <spander> Expand-droite </span> </span> </ bouton-style Data-Style = "Zoom-Out-Oep () { $('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; }); });Doute de code: cela ne devrait pas être difficile à comprendre. Le code impliqué dans l'initialisation du composant var l = ladda.create (this); l.start (); Ici, cela représente l'objet du bouton actuellement cliqué (notez qu'il s'agit d'un objet Dom au lieu d'un objet jQuery), puis appelez l.stop (); Une fois la demande terminée, fermez la charge.
(1) Toutes les options de style données sont les suivantes. Si vous êtes intéressé, vous pouvez l'essayer et voir quels sont les effets:
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) Si vous devez ajuster la taille du bouton, le composant dispose d'une propriété de taille de données intégrée. Toutes les options de taille de données sont les suivantes:
data-size = "xs"
data-size = "s"
data-size = "l"
(3) Si vous avez besoin de définir la couleur du bouton, utilisez le spinner de données
Data-Spinner-Color = "# FF0000"
(4) Paramètres de la barre de progression du bouton
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); } }); });La progression de l'exécution actuelle est principalement définie via l'instance de la phrase.SetProgress (Progress);, et la valeur de progression se situe entre 0 et 1. Bien sûr, ce qui précède est juste du code pour tester l'effet de progression. Dans le projet officiel, nous devons calculer la situation actuelle de l'exécution de la demande pour renvoyer dynamiquement les progrès.
11. Commutateur Composant Bootstrap-Switch
Sur la page d'accueil du site Web de bootstrap chinois, vous pouvez trouver un tel composant
1、效果展示
Effet initial
Divers attributs et événements
2. Description du code source
Bootstrap-Switch Code source Adresse: https://github.com/nostalgiaz/bootstrap-switch
Documentation et démo de Bootstrap-Switch: http://www.bootstrap-switch.org/examples.html
3. Exemples de code
Les fichiers qui doivent être référencés
<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>
Les composants dépendent de jQuery et de bootstrap
Ensuite, il y a l'initialisation de HTML et JS
<input type="checkbox" checked /> $(function () { $('input[type=checkbox]').bootstrapSwitch({ size: "large" });})L'attribut de taille n'est pas nécessaire. Si vous utilisez le style par défaut, les paramètres ne peuvent pas être passés.
Propriétés couramment utilisées
• Taille: Taille de commutation. Les valeurs facultatives sont «mini», «petites», «normales», «grandes»
• Oncolor: la couleur du bouton ON dans l'interrupteur. Les valeurs facultatives incluent «primaire», «info», «succès», «avertissement», «danger», «par défaut»
• Offcolor: la couleur de l'interrupteur dans la couleur du bouton OFF. Valeurs facultatives «primaire», «info», «succès», «avertissement», «danger», «par défaut»
• OnText: le texte du bouton ON dans le commutateur, la valeur par défaut est "ON".
• OffText: le texte du commutateur est "OFF" par défaut.
• OnInit: événements qui initialisent le composant.
• onSwitchchange: événements lorsque le commutateur change.
Des événements et méthodes communs peuvent être utilisés pour afficher directement les documents et le fonctionnaire fournit une description très détaillée.
12. Scoring Component Bootstrap-Star Rating
Tout le monde devrait connaître les notes sur les notes sur les 10e et 10e Taobao. J'ai trouvé accidentellement un composant de notation de style bootstrap. Je l'ai trouvé intéressant. Il peut être utile pour le commerce électronique, la communauté et les systèmes de forum à l'avenir, donc je le partagerai.
1、效果展示
2. Description du code source
Téléchargement du code source
3. Exemples de code
Ce composant nécessite une prise en charge des styles jQuery et bootstrap
<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 = "~ / contenu / bootstrap-star rating-master / bootstrap-star-rating-master / js / locales / zh.js"> </ script>
Directement via le composant initial HTML
<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 = "nombre" 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" DataS = "8"> <fut id = "INPUT-21D" Value = "Type =" Number " min = 0 max = 5 étapes = 0,5 data-size = "sm"> <input id = "input-21e" value = "0" type = "nombre" min = 0 max = 5 Step = 0.5 data-size = "xs"> <input id = "input-21f" value = "0" type = "nombre" min = 0 max = 5 Step = 0.5 Data-size = "md"> <fut id = "intrut-2ba" 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>Le composant est initialisé via class = "Rating". Voici quelques paramètres qui devraient être faciles à comprendre:
• Valeur: représente le score par défaut lorsque l'initialisation des composants
• Min: score minimum
• Max: score maximum
• Étape: l'échelle minimale ajoutée à chaque fois
• Taille de données: la taille des étoiles
• Stars de données: le nombre d'étoiles
Vous pouvez obtenir le score actuel en utilisant $ ("# input-21a"). Val ().
十三、总结
通过这篇文章给大家分享了下bootstrap的十二款组件，博主相信这些里面肯定有些你能够用上，可能有些并不常用，但留着以后或许能用上呢！至此，bootstrap组件的总结暂时告一段落，后面将会分享下ko的一些封装。如果你觉得本文能够帮到你，可以推荐下，博主一定继续努力！