Sélecteur de liste déroulante en version web de toucher JS, imitant le type de fenêtre contextuelle d'app/Sélecteur de date

Sur les sites web des applications mobiles, l'utilisation de la liste déroulante est très mauvaise, l'expérience utilisateur de la liste déroulante traditionnelle est très mauvaise, généralement, les interfaces de fonctionnalités interactives bien conçues ne utilisent pas directement la liste déroulante, donc les listes déroulantes natives des applications mobiles sont des listes déroulantes contextuelles. Bien sûr, les applications web devraient également être conçues de cette manière en termes d'expérience utilisateur. Il y a quelques temps, j'ai rencontré ce type de besoin lors du développement de l'application web, non seulement pour le sélecteur de date, mais aussi pour les listes de données, les listes de variables, etc. Après avoir cherché ici et là, j'ai trouvé un seul produit mobiscroll de bonne qualité, mais il est assez difficile à télécharger, et il est curieux que jQuery.mobile et jeasyui.mobile ne fournissent pas ce contrôle, je ne sais pas pourquoi ? Bien que je ne sois pas spécialisé dans le développement front-end, je pense que ce n'est pas difficile à développer, je l'ai essayé pendant une nuit à la maison et j'ai trouvé une méthode presque parfaite ! J'ai continué à l'améliorer par la suite, et maintenant je le publie pour les développeurs de tout le monde.

Regardons d'abord l'effet visuel :

Comme ce contrôle utilise la méthode de défilement native de div, il peut avoir un effet de défilement en inertie sur l'écran tactile, et il est également possible de manipuler avec la souris, bien que l'effet de défilement en inertie ne soit pas réalisé. Comme ce contrôle est principalement conçu pour l'écran tactile, il est donc parfait pour l'écran tactile, et je n'ai pas envie de développer des effets spéciaux pour la version souris. Ce contrôle est encapsulé en plugin jQuery, sans bordure,100% de largeur, très facile à utiliser, par exemple, après l'intégration dans la fenêtre contextuelle, l'effet est comme那张 image.

Voici la méthode d'utilisation du code :

$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '"4',
data: data1,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value);
}
});

Voici le code complet pour utiliser la fenêtre contextuelle, l'effet est comme那张图片：

<!-- ui-dialog -->
<div id="dialog" class="easyui-dialog" style="marge:20px 6px;largeur:80%;" données-options="inline:true,modal:true,closed:true,title:'Paramètres de valeur'">
<div id="scrollbox"></div>
<div class="dialog-button">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dialog').dialog('close')">Confirmer</a>
</div>
</div>
<script type="text/javascript">
$(function () {
//données en objet
var data = [];
for (var i = 0; i < 100; i++) {
var m = {};
m.id = i;
m.txt = "données" + i;
data.push(m);
}
$("#dialog").dialog();
// Lien pour ouvrir le dialogue
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open").dialog('center');
//reassigner
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '"4',
data: data,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value.id);
}
});
event.preventDefault();
});
});
</script>

Il peut également être utilisé ainsi :

//données en chaîne
var data1 = [];
for (var i = 0; i < 100; i++) {
data1.push(i);
}
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '"4',
data: data1,
onSelected: function (index, value) {
$("#Text1").val(value);
}
});
$("#dialog-link1").click(function (event) {
$("#dialog").dialog("open").dialog('center');
event.preventDefault();
});

　Si vous souhaitez un effet tridimensionnel, ajoutez directement le style :

#cover_top_EasyScrollBox{
background: -ms-linear-gradient(top, #000000, #ccc); /* IE 10 */
background:-moz-linear-gradient(top,#000000,#ccc);/*Firefox*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#000000), to(#ccc));/*Google*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ccc)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #000000, #ccc); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #000000, #ccc); /*Opera 11.10+*/
}
#cover_bottom_EasyScrollBox{
background: -ms-linear-gradient(top, #ccc, #000000); /* IE 10 */
background:-moz-linear-gradient(top,#ccc,#0000ff);/*Firefox*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ccc), to(#000000));/*Google*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#000000)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #ccc, #000000); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #ccc, #000000); /*Opera 11.10+*/
}

Ce que j'ai décrit ci-dessus est le sélecteur de liste déroulante en glissant de type popup d'imitation d'app mobile que j'ai présenté aux amis/Sélecteur de date, j'espère que cela pourra aider tout le monde, si vous avez des questions, n'hésitez pas à me laisser un message, je répondrai à temps à vos questions, et je remercie également très chaleureusement tout le monde pour le soutien au site Web de tutoriel d'alarme !

Déclaration : le contenu de cet article est issu du réseau, la propriété intellectuelle appartient aux auteurs, le contenu est自发贡献自行上传 par les utilisateurs d'Internet, ce site Web ne possède pas de propriété, n'a pas été traité par l'éditeur humain, ni assume la responsabilité juridique pertinente. Si vous trouvez du contenu suspect de violation des droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#w3Déclaration : le contenu de cet article est issu du réseau, la propriété intellectuelle appartient aux auteurs, le contenu est自发贡献自行上传 par les utilisateurs d'Internet, ce site Web ne possède pas de propriété, n'a pas été traité par l'éditeur humain, ni assume la responsabilité juridique pertinente. Si vous trouvez du contenu suspect de violation des droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#w