Dans l'article précédent, j'ai introduit plusieurs composants utiles dans la série de composants bootstrap (recommandée). Ensuite, cet article présente plusieurs composants utiles dans la série de composants bootstrap (recommandée 2). Les amis intéressés apprendront ensemble!
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. Affichage d'effet
Boîte d'entrée multi-valeurs locale
Boîte d'entrée multi-valeurs à distance
2. Description du code source
Merci à la communauté open source et à ces gens mignons qui aiment partager. Adresse open 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 = "~ / contenu / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <link href = "~ / contenu / jQuery-manifest-master / src / jQuery.manifest.css" rel = "Stylesheet" /> <script src = "~ / contenu / jQuery-1.9.1. src = "~ / content / bootstrap / js / bootstrap.js"> </ script> <script src = "~ / contenu / jQuery-manifest-master / build / partis / jQuery.ui.widget.js"> </ script> <script src = "~ / contenu / jQuery-Manifest-master / build / jQuery.
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' AutoChatlelete = "OFF" ID = "TXT_MAN" /> <Script Type = "Text / JavaScript"> $ (fonction () {$ ('# 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
// Propriétés communes: obtenez la collection de tous les éléments dans la zone de texte var valeurs = $ ('# txt_man'). Manifest ('Values'); // Méthode commune 1: supprimer le dernier élément $ ('# txt_man'). Manifest ('supprimer', ': dernier'); // Méthode commune 2: ajouter un nouvel élément dans la zone de texte de l'élément. Le format du deuxième paramètre est déterminé par le format des données JSON $ ('# txt_man'). Manifest ('add', {id: "1", nom: "ABC"}); // Méthode commune 3: Obtenez la liste des données communes à distance $ ('# txt_man'). $ ('# txt_man'). sur ('ManifestAdd', fonction (événement, données, $ item, initial) {// alert ("L'élément nouvellement ajouté est:" + data);}); // Événement commun 2: supprimer l'événement de l'article $ ('# txt_man'). Sur ('Manifestremove', fonction (événement, données, $ item) {}); // Événement commun 3: événement commun $ ('# txt_man'). sur ('ManifestSelect', fonction (événement, données, $ 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 = "~ / contenu / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <link href = "~ / contenu / jQuery-manifest-master / src / jQuery.manifest.css" rel = "Stylesheet" /> <script src = "~ / contenu / jQuery-1.9.1. src = "~ / contenu / bootstrap / js / bootstrap.js"> </ script> <script src = "~ / contenu / jQuery-manifest-master / build / partis / 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 = "~ / contenu / jQuery-manifest-master / busy.gif" /> </v> </div> </ form> <script type = "Text / Javascript"> $ (function () {$ ('# # txt_man2'). (données, $ item, $ mpitem) {return data.name;}, formatValue: function (data, $ valeur, $ item, $ mpitem) {return data.id;}, marcopolo: {data: {client_id: 'No2mtqvbqanw3q3sg23ofvmegyowizdt4e1qhrpzo0bfcn4x', client_secret: 'lg2wrkks1sxz2fmkdg01ldw1kdekkktulmxm0xevrn0llhb', intention: 'global', limite: 5, V: '20150601'}, formatdata: fonction (data) {return data.Response.venues;}, formatitem: function (data, $ item) {return data.name;}, minchars: 3, param: 'query'}, requis: true});}); </ / script>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
Si un ami du parc a l'intention d'utiliser cette méthode distante par lui-même, vous pouvez vous référer à ce format de données pour les implémenter.
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. Affichage d'effet
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
Description du 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 = "~ / contenu / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <link href = "~ / contenu / twitter-bootstrap-type-master / twitter-bootstrap-type-mater-master / démo / css / brefy.css" rel = "Stylesheet" /> <script src = "~ / contenu / jQuery-1.9.1.js"> </ script> <script src = "~ / contenu / bootstrap / js / bootstrap.js"> </ script> <script src = "~ / contenu / twitter-bootstrap-typeahead-master / twitter-bootstrap-type-master / js / bootsstrap-typeahead.> </ scaster-master / js / bootsstrap-typeahead.> </ 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, valeur: 'Columbus'}, {key: 7, valeur: 'dallas'}, {key: 8, valeur: 'Vancouver'}, {key: 9, valeur: 'Seattle'}, {key: 10, valeur: 'los angeles'}], affichage: "valeur", val: "key"});});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, méthode: 'post', triggerLength: 1, chargementClass: null, affichage: null, prédispatch: null, preprocess "valeur", val: "key"});}); </script>Méthode de test correspondant à l'arrière-plan
public JSonResult TypeaheadData () {var lstres = new List <Bject> (); for (var i = 0; i <20; i ++) lstres.add (new {key = i, value = Guid.newGuid ().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, méthode: 'post', triggerLength: 1, chargementclass: null, affichage: null, prédispatch: nul "clé", 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. Affichage d'effet
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 = "~ / contenu / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <link href = "~ / contenu / bootstrap-step / css / bs-isfun.css" rel = "Stylesheet" /> <script src = "~ / contenu / jquery-1. src = "~ / content / bootstrap / js / bootstrap.js"> </ script> <script src = "~ / contenu / 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> </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> </sponte> <h4> Configuration de l'option </h4> <ul> <a> <a> étape 1 <pan> </panne 2 <span> </span> </a> </li> <li> <a> Étape 3 <span> </span> </a> </li> <li> <a> Étape 4 <span> </span> </a> </li> </li> </li> </li> </div> <div> <div data-ride = "Carousel" Data-Interval = "FACT role = "listbox"> <div> <p> Étape 1 </p> <div> Configurez le rôle </ div> <div> <input type = "Text" /> </ div> <v> <Button Type = "Button"> Enregistrer </ Button> </ Div> <div> <p> Step 2 </p> <v> Configurez l'utilisateur </ div> <v> <port type = "Text" /> </v> Type = "Button"> Enregistrer </ Button> </ Div> <div> <p> Étape 3 </p> </div> <div> <p> Étape 4 </p> </ div> <v> <p> Étape 5 </p> </ div> <v> <p> Étape 6 </p> </ div> </ div> </ div> <v> <Button type = "Button"> Précédent </ Button> Type = "Button"> Suivant </ Button> </div> </div> </div>
Bien sûr, vous devez également enregistrer un événement de clic pour deux boutons
$ ("# MyModalNext .Modal-Footer Button"). Chaque (fonction () {$ (this) .click (function () {if ($ (this) .hasclass ("mn-next")) {$ ("# myModalnext .Carel"). Carousel ('Next'); $ ("# # myModalnext .Step. li.active "). next (). addClass (" active ");} else {$ (" # myModalNext .Carel "). Carousel ('prev'); if ($ (" # mymodalnext .step li "). Longueur> 1) {$ ($ ($ ($ (" # myModalnext. li.active "). longueur - 1]). RemoveClass (" actif ")}}})})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. Affichage d'effet
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 = "~ / contenu / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <link href = "~ / content / ladda-bootstrap-master / ladda-bootstrap-master / dist / ladda-themesless.min.css" rel = "stylesheet" /> <script src = "~ / contenu / jQuery-1.9.1.js"> </ script> <script src = "~ / contenu / bootstrap / js / bootstrap.js"> </ script> <script src = "~ / contenu / ladda-bootstrap-master / ladda-bootstrap-master / dist / spin 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 () {$ ('bouton'). Cliquez sur (fonction (e) {e.PreventDefault (); var l = ladda.create (this); l.start (); l.setprogress (0 - 1); $. Post ("/ home2 / typeaheaddata", {}, function (data, statu) {console.log (statu); {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-droite"
data-style = "Expand-up"
data-style = "Expand-down"
data-style = "zoom-in"
data-style = "zoom-out"
data-style = "Slide-left"
Data-Style = "Slide-droite"
data-style = "Slide-up"
data-style = "diapositive"
data-style = "contrat"
(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 ('bouton', {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);}}, 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. Affichage d'effet
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 = "~ / contenu / bootstrap-switch-master / bootstrap-switch-master / dist / css / bootstrap3 / bootstrap-switch.css" rel = "Styleet" /> <script src = "~ / contenu / jQuery-1.9.1.js"> </ script> <script src = "~ / contenu / bootstrap / js / bootstrap.js"> </ script> <script src = "~ / contenu / bootstrap-switch-master / bootstrap-switch-master / dist / js / bootstrap-switch.js"> </ script> script>
Les composants dépendent de jQuery et de bootstrap
Ensuite, il y a l'initialisation de HTML et JS
<input type = "checkbox" coché /> $ (function () {$ ('input [type = checkbox]'). bootstrapSwitch ({size: "grand"});})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. Affichage d'effet
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 = "~ / contenu / bootstrap / css / bootstrap.css" rel = "Stylesheet" /> <link href = "~ / contenu / bootstrap-star rating-master / bootstrap-star rating-master / css / star rating.css" rel = "stylesheet" /> <script src = "~ / contenu / jQuery-1.9.1.js"> </ script> <script src = "~ / contenu / bootstrap-star rating-master / bootstrap-star rating-master / js / star-tem.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 = "nombre" min = "0" max = "5" Step = "0,5" data-size = "xl" data-symbol = "" data-default-caption = "{rating} coets" data-star-captions = "{}"> <entrée id = "input-21a" value = "0" type = "numéro" min = 0 max = 5 étape = 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 = 5Data-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-Contonion 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 ().
Ce qui précède est quelques composants utiles de la série de composants bootstrap que l'éditeur vous a introduit (recommandation 2). J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!