bootstrapSwitch est un très beau contrôle de commutation, et son introduction sur le site officiel est également très détaillée. Commençons rapidement par bootstrapSwitch à travers plusieurs démos.
Si vous souhaitez en savoir plus sur le bootstrap, vous pouvez cliquer sur : Tutoriel bootstrap
Tout d'abord, citez le correspondant js et css, cochez la case dans le div avec la classe "switch", puis initialisez
$('#mySwitch input').bootstrapSwitch();
dans js pour utiliser bootstrapSwitch.
Parmi eux, la saisie a deux attributs data-on-text et data-off-text, qui sont le texte affiché lors de la commutation, ici, ils sont respectivement définis sur OUI et NON. Le code est le suivant :
this is a bootstrap-switch test
Vous pouvez également utiliser js pour définir ces deux attributs. Après avoir sélectionné l'élément d'entrée, modifiez les attributs via la méthode <🎜. >. Le code est le suivant : bootstrapSwitch({attribute:value})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this is a bootstrap-switch test</title>
<script src="jquery-2.2.4.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-switch.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-switch.css"/>
<script type="text/javascript">
$(function(){
$('#mySwitch input').bootstrapSwitch({
onText:'On',
offText:'Off'
});
})
</script>
</head>
<body>
<br>
<div id="mySwitch">
<input type="checkbox" checked data-on-text="YES" data-off-text="NO"/>
</div>
</body>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
utilisation de l'instruction switch
Comment utiliser le commutateur Java
Le rôle de la fonction float() en python
Comment utiliser les macros Excel
Quels types d'architecture système existe-t-il ?
point de symbole spécial
Comment récupérer l'historique des discussions WeChat supprimé
Utilisation de réécriturecond
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
