Bootstarp crée des astuces de composants_javascript pliables
Cet article apprendra comment créer des composants pliables via Bootstarp. Le contenu spécifique est le suivant
.
Ce qui est requis
Vous devez référencer jquery.js et bootstrap-collapse.js - les deux fichiers JavaScript se trouvent dans le dossier docs/assets/js.
Vous pouvez créer des composants pliables sans écrire beaucoup de JavaScript ni appeler JavaScript.
Exemple
Le premier exemple montre comment créer un composant pliable sans appeler JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>collapsible example</title>
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Click me to exapand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>
Explication
Il y a trois points à noter ici. Tout d’abord, ajoutez data-toggle="collapse" au lien sur lequel vous souhaitez cliquer pour développer ou réduire le composant.
Deuxièmement, ajoutez un attribut href ou data-target au composant parent dont la valeur est l'identifiant du composant enfant.
Troisièmement, ajoutez un attribut data-parent pour créer un effet accordéon. La valeur de l'attribut data-parent est la même que la valeur de l'attribut id du div du conteneur principal (qui contient l'intégralité du composant accordéon). Si vous souhaitez créer un composant accordéon simple qui n'a pas besoin d'être aussi complexe qu'un accordéon, vous n'avez pas besoin d'ajouter cette propriété.
Exemple
Le deuxième exemple montre comment créer un composant pliable simple.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>collapsible via JavaScript example</title> <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe. </div> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
Appel via JavaScript
Vous pouvez utiliser le code ci-dessous pour déclencher le repli via JavaScript.
$(".collapse").collapse() Options, méthodes et événements
Voici quelques options, méthodes et événements disponibles via le plugin JavaScript pliable Bootstrap. Les détails sont les suivants :
Options
parent : le type de valeur est Sélecteur. La valeur par défaut est fausse. Lorsque l'élément parent est affiché, tous les éléments réductibles sous l'élément parent sont fermés.
bascule : la valeur est de type booléen. La valeur par défaut est vraie. Lorsqu'il est appelé, basculez tous les éléments pliables.
bascule : la valeur est de type booléen. La valeur par défaut est vraie. Lorsqu'il est appelé, basculez tous les éléments pliables.
Méthode
.collapse(options) : Déclenchez le contenu pliable. Accepte un objet option facultatif.
.collapse('toggle') : afficher ou masquer un élément de page pliable.
.collapse('show') : affiche un élément de page pliable.
.collapse(hide) : masquer un élément de page pliable.
Événement
show : cet événement est déclenché immédiatement après l'appel de la méthode d'instance show.
affiché : cet événement est déclenché lorsque l'élément de page pliable est affiché (et que l'effet de transition CSS a été exécuté).
hide : cet événement est déclenché immédiatement après l'appel de la méthode d'instance hide.
caché : cet événement est déclenché lorsque l'élément de page pliable est masqué à l'utilisateur (et que l'effet de transition CSS est terminé).
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment installer le composant DirectPlay de l'ancienne version de Windows 10
Dec 28, 2023 pm 03:43 PM
De nombreux utilisateurs rencontrent toujours des problèmes lorsqu'ils jouent à certains jeux sur Win10, tels que le gel de l'écran et les écrans flous. À l'heure actuelle, nous pouvons résoudre le problème en activant la fonction de lecture directe, et la méthode de fonctionnement de la fonction est également très simple. Comment installer Directplay, l'ancien composant de Win10 1. Entrez "Panneau de configuration" dans la zone de recherche et ouvrez-le 2. Sélectionnez de grandes icônes comme méthode d'affichage 3. Recherchez "Programmes et fonctionnalités" 4. Cliquez sur la gauche pour activer ou désactiver les fonctions Win 5. Sélectionnez l'ancienne version ici Cochez simplement la case
Coque de téléphone Google Pixel 9 Pro Fold exposée : écran extérieur de 6,4 pouces, écran intérieur de 8,02 pouces
Jun 25, 2024 pm 02:35 PM
Selon l'actualité du 25 juin, la source ytechb a publié hier (24 juin) un article de blog, partageant un rendu de la coque du téléphone portable Google Pixel 9 Pro Fold, montrant une fois de plus le design de l'arrière de cet écran pliable. Selon des informations précédentes, Google lancera la série de téléphones mobiles Pixel 9 en octobre de cette année. En plus des trois téléphones de la série Pixel 9, Pixel Fold sera également inclus dans la série Pixel 9 et sera officiellement nommé Pixel 9. Pliage professionnel. L'étui de téléphone exposé cette fois-ci provient du fabricant d'accessoires Torro. Les magasins en ligne de la société au Royaume-Uni et aux États-Unis ont répertorié l'étui de téléphone et divulgué la conception et la taille d'affichage du téléphone. La page présente un grand nombre de rendus de coques de téléphone Pixel 9 Pro Fold
Le téléphone pliable W25 de Samsung, d'une valeur de 10 000 yuans, dévoilé : une caméra frontale sous l'écran de 5 mégapixels et un corps plus fin
Aug 23, 2024 pm 12:43 PM
Selon les informations du 23 août, Samsung est sur le point de lancer un nouveau téléphone mobile pliable W25, qui devrait être dévoilé fin septembre. Il apportera des améliorations correspondantes à la caméra frontale sous l'écran et à l'épaisseur du corps. Selon certaines informations, le Samsung W25, nom de code Q6A, sera équipé d'un appareil photo sous-écran de 5 mégapixels, ce qui constitue une amélioration par rapport à l'appareil photo de 4 mégapixels de la série Galaxy Z Fold. De plus, la caméra frontale à écran externe et la caméra ultra grand angle du W25 devraient respectivement mesurer 10 millions et 12 millions de pixels. En termes de conception, le W25 a une épaisseur d'environ 10 mm à l'état plié, soit environ 2 mm de moins que le Galaxy Z Fold 6 standard. En termes d'écran, le W25 dispose d'un écran externe de 6,5 pouces et d'un écran interne de 8 pouces, tandis que le Galaxy Z Fold6 dispose d'un écran externe de 6,3 pouces et d'un écran interne de 8 pouces.
Comment implémenter le composant de calendrier à l'aide de Vue ?
Jun 25, 2023 pm 01:28 PM
Vue est un framework front-end très populaire. Il fournit de nombreux outils et fonctions, tels que la création de composants, la liaison de données, la gestion d'événements, etc., qui peuvent aider les développeurs à créer des applications Web efficaces, flexibles et faciles à entretenir. Dans cet article, je vais vous présenter comment implémenter un composant de calendrier à l'aide de Vue. 1. Analyse des exigences Tout d'abord, nous devons analyser les exigences de ce composant de calendrier. Un calendrier de base doit avoir les fonctions suivantes : afficher la page du calendrier du mois en cours ; prendre en charge le passage au mois précédent ou au mois suivant en cliquant sur un certain jour ;
Le modèle Samsung Galaxy Z Flip 6 révélé pour la première fois : des cadres plus étroits, des plis toujours présents
Jun 22, 2024 am 03:28 AM
Selon l'actualité du 21 juin, des médias étrangers ont récemment publié des photos de modèles du Samsung Galaxy Z Flip 6 sur Internet. D'après l'image, on peut comprendre que les bordures du Samsung Galaxy Z Flip 6 seront encore plus étroites, ce qui signifie que la largeur du téléphone peut être réduite à l'état plié, et qu'il offrira également une prise en main et une portabilité plus confortables. . De plus, par rapport à la génération précédente du ZFlip5, le modèle du Galaxy ZFlip6 est plus carré et le module caméra à l'arrière est plus proéminent. Il devrait utiliser un nouveau capteur de caméra. Cependant, vu de face, les plis du téléphone sont encore relativement évidents. Toutefois, étant donné que le modèle divulgué est un modèle de téléphone, il peut y avoir quelques différences entre celui-ci et le téléphone réel, il s'agit donc uniquement d'une référence. En termes de configuration de performances, Galaxy
Le plus gros défaut des téléphones mobiles à écran pliable : aucun scénario d'application de base
Mar 16, 2024 am 09:04 AM
Ce dont nous discutons aujourd'hui n'est pas de savoir à quoi ressemble un certain produit, mais de revenir au sujet du « écran pliable » lui-même et d'explorer la « rationalité » des téléphones mobiles à écran pliable. Tout d’abord, examinons les performances du marché des téléphones mobiles à écran pliable. Selon le dernier rapport de données d’IDC, le marché chinois des téléphones mobiles à écran pliable expédiera environ 7,007 millions d’unités en 2023, soit une augmentation de 114,5 % sur un an. Parmi eux, le marché chinois des téléphones mobiles à écran pliable a expédié environ 2,771 millions d'unités au quatrième trimestre 2023, soit une augmentation d'une année sur l'autre de 149,6 %. Les données semblent bonnes et la croissance est également très forte. Cependant, comparées aux quelque 270 millions de smartphones expédiés sur le marché chinois en 2023, ces données ne suffisent vraiment pas. En général
IDC estime que les livraisons mondiales de smartphones en 2024 s'élèveront à 1,2 milliard d'unités : 25 millions d'unités à écran pliable, soit une augmentation d'une année sur l'autre de 37 %
Feb 24, 2024 pm 02:20 PM
Selon des informations du 24 février, IDC a récemment publié un rapport d'étude de marché, prévoyant que les expéditions mondiales de smartphones atteindront 1,2 milliard d'unités en 2024, soit une augmentation de 2,8 % sur un an, et maintiendront ensuite une faible croissance à un chiffre d'ici 2028. . IDC estime que les expéditions globales en 2024 seront toujours inférieures aux niveaux d’avant la pandémie, mais le marché mondial des smartphones a atteint un point bas et commence à montrer une tendance à la hausse en matière de reprise. IDC estime que les deux facteurs clés à l'origine de la reprise globale du marché sont le cycle de renouvellement des équipements et la croissance de la demande sur les marchés émergents. Il existe également deux principaux facteurs moteurs. IDC estime que les livraisons de téléphones mobiles à écran pliable atteindront 25 millions d'unités en 2024, soit une augmentation de 37 % sur un an. L'autre est que l'intelligence artificielle (IA) est rapidement devenue une partie intégrante de ce phénomène. la discussion sur les smartphones, déclenchant
HTML, CSS et jQuery : techniques pour obtenir des effets de pliage et d'agrandissement d'images
Oct 24, 2023 am 11:05 AM
HTML, CSS et jQuery : Introduction aux techniques d'implémentation d'effets spéciaux de pliage et d'agrandissement d'images Dans la conception et le développement de sites Web, nous devons souvent implémenter des effets spéciaux dynamiques pour augmenter l'attractivité et l'interactivité de la page. Parmi eux, l’effet de pliage et de dépliage de l’image est une technique courante mais intéressante. Grâce à cet effet spécial, nous pouvons plier ou agrandir l'image sous l'action de l'utilisateur pour afficher plus de contenu ou de détails. Cet article expliquera comment utiliser HTML, CSS et jQuery pour obtenir cet effet, avec des exemples de code spécifiques. réaliser des pensées
