Selector de lista deslizante tipo pop-up de aplicación para la versión web de JavaScript táctil/Selector de fecha

En la versión de aplicación web para móviles al usar la lista desplegable, la experiencia al usar la lista desplegable tradicional es muy mala, generalmente, las interfaces de interacción que se hacen un poco mejor no utilizan directamente la lista desplegable, por lo que las listas desplegables nativas de la aplicación nativa son listas de selección emergentes, desde el punto de vista de la experiencia de uso, la aplicación web también debería estar hecha de esa manera. Hace poco tiempo, mientras desarrollaba la versión web de la aplicación, me encontré con esta necesidad, no solo el selector de fechas, también se necesitan listas de selección de datos, listas de variables, etc., busqué y busqué en línea y solo encontré un mobiscroll bastante bueno, aunque es un poco complicado descargarlo, siento que es un poco raro que jquery.mobile, jeasyui.mobile no proporcionen este control, ¿por qué? Aunque no soy un especialista en desarrollo frontend, siento que no es difícil desarrollar, pasé una noche en casa probando varios métodos y finalmente encontré un método prácticamente perfecto. En el uso posterior, se ha mejorado constantemente, ahora se ofrece públicamente a todos los programadores.

Veamos primero el efecto gráfico:

Dado que el desplazamiento de este control se realiza mediante el método de desplazamiento nativo de div, al usarlo en pantallas táctiles, se puede lograr el efecto de desplazamiento con inercia, también se ha implementado la operación con el ratón, aunque no se ha implementado el efecto de desplazamiento con inercia. Dado que este control está principalmente orientado a pantallas táctiles, por lo que, perfectamente en pantallas táctiles es suficiente, también soy demasiado perezoso para arreglar los efectos del ratón. Este control ya está encapsulado como un plugin de jquery, sin borde,100% de ancho, muy fácil de usar, por ejemplo, después de insertar en el cuadro de diálogo, el efecto es como se muestra en la imagen superior.

El método de uso del código es el siguiente:

$("#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);
}
});

El código completo para el uso del cuadro de diálogo es el siguiente, y el efecto es como se muestra en la imagen superior:

¡-- ui-dialog -->
<div id="dialog" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'Configuración de valores'">
<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')">Aceptar</a>
</div>
</div>
<script type="text/javascript">
$(function () {
//datos de objeto
var data = [];
for (var i = 0; i < 100; i++) {
var m = {};
m.id = i;
m.txt = "datos" + i;
data.push(m);
}
$("#dialog").dialog();
// Enlace para abrir el cuadro de diálogo
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open").dialog('center');
//reasignación
$("#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>

También se puede usar así:

//datos de cadena
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 desea un efecto tridimensional, simplemente agregue estilos:

#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+*/
}

Lo que se menciona anteriormente es el selector de lista deslizante de tipo popup de imitación de app de desarrollo táctil que el editor les ha presentado a todos/Selector de fechas, espero que sea útil para todos, si tienen alguna pregunta, déjenme un mensaje, el editor responderá a tiempo, y también muy agradecido con el apoyo de todos a la página web de tutorial de alarido!

Aviso: Este contenido se ha obtenido de la red, pertenece al propietario original, el contenido se ha subido por los usuarios de Internet de manera voluntaria, este sitio web no posee los derechos de propiedad, no se ha realizado un procesamiento editorial humano y no asume la responsabilidad legal correspondiente. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w proporcionando la evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.3Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha subido por los usuarios de Internet de manera voluntaria, este sitio web no posee los derechos de propiedad, no se ha realizado un procesamiento editorial humano y no asume la responsabilidad legal correspondiente. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w proporcionando la evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.