Curseur de formulaire jQuery Mobile
contrôle de curseur jQuery Mobile
Les curseurs vous permettent de sélectionner une valeur parmi une plage de nombres :
Pour créer un curseur, utilisez <input type="range"> :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>滑块控件</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<label for="points">进度:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Utilisez les attributs suivants pour spécifier les limites :
-
max - spécifie la valeur maximale autorisée
-
min - spécifie la valeur minimale autorisée
-
step - spécifie les intervalles de chiffres légaux
-
valeur - spécifie la valeur par défaut
Astuce : Si vous souhaitez afficher la valeur de progression dans le bouton, vous pouvez ajouter Attribut data-show-value="true" :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>滑块控件</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<label for="points">进度:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100" data-show-value="true">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Conseils : Si vous souhaitez afficher la progression sur le bouton coulissant (semblable à une petite fenêtre contextuelle), vous pouvez utiliser Attribut data-popup-enabled="true" :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>滑块控件</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="points">进度:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100" data-popup-enabled="true">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Astuce : Si vous souhaitez mettre en évidence la valeur du curseur, ajoutez data-highlight="true":
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>滑块控件</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="points">进度:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100" data-popup-enabled="true">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
interrupteur à bascule
Les interrupteurs à bascule sont généralement utilisés pour les boutons marche/arrêt ou vrai/faux :
Nous pouvons utiliser l'élément <input type="checkbox"> et spécifier le rôle de données comme "flipswitch" pour créer un switch :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="switch">切换开关:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
<br>
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Par défaut, le texte du commutateur est « On » et « Off ». vous pouvez utiliser attributs data-on-text et data-off-text pour le modifier :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="switch">切换开关:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False">
<br>
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Astuce :Les cases à cocher peuvent utiliser l'attribut « coché » pour définir les options par défaut :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<label for="switch">切换开关:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked>
<br>
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Plus d'exemples
curseur de plage
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>区间滑块</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<div data-role="rangeslider">
<label for="price-min">价格:</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
<label for="price-max">价格:</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
<input type="submit" data-inline="true" value="Submit">
<p>区间滑块让用户选择指定区间的价格。</p>
</form>
</div>
</div>
</body>
</html>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Créez un curseur avec une valeur d'intervalle.
Style de curseur
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
/* Custom indentations are needed because the length of custom labels differs from
the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
text-indent: -4em;
}
.custom-size-flipswitch.ui-flipswitch .ui-flipswitch-off {
text-indent: 2em;
}
/* Custom widths are needed because the length of custom labels differs from
the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch {
width: 8.875em;
}
.custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active {
padding-left: 7em;
width: 1.875em;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="switch">切换开关:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-wrapper-class="custom-size-flipswitch">
<br>
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Définissez le style du commutateur coulissant.
