Seletor de lista de rolagem de popup tipo aplicativo em página web de toque JavaScript/Seletor de data

No aplicativo móvel da web, ao usar a lista suspensa, a experiência do usuário da lista suspensa tradicional é muito ruim, geralmente, as interfaces de função de interação bem feitas não usam diretamente a lista suspensa, então, as listas suspensas nativas do aplicativo são lista de seleção de pop-up, claro que o aplicativo da web也应该 ser feito assim, recentemente, ao desenvolver o aplicativo da web, encontrei essa necessidade, não apenas o seletor de data, mas também as necessidades de lista de dados, lista de variáveis e outras necessidades de lista suspensa, procurei e procurei na internet e encontrei apenas um bom mobiscroll, mas é um pouco complicado baixar, parece um pouco estranho que o jquery.mobile e o jeasyui.mobile não forneçam esse controle, não sei por quê? Embora eu não seja especialista em desenvolvimento frontend, acho que não é difícil desenvolver, fiquei em casa uma noite e testei várias maneiras, finalmente encontrei um método quase perfeito! No uso posterior,不断完善，agora é fornecido publicamente para os programadores.

Vamos ver o efeito da imagem:

Devido ao fato de que a rolagem deste controle é feita usando o método de rolagem nativo do div, ao usar na tela tátil, pode haver efeito de rolagem com inércia, também foi implementado que o mouse pode operar, mas não foi implementado o efeito de rolagem com inércia. Como este controle é principalmente voltado para a tela tátil, então, a perfeição na tela tátil já é suficiente, e eu também não quero me preocupar com os efeitos especiais do mouse. Este controle já foi encapsulado em plug-in jQuery, sem borda,100% de largura, muito fácil de usar, por exemplo, após ser inserido no pop-up, o efeito é como a imagem acima.

O método de uso do código é o seguinte:

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

O código completo para uso do pop-up é o seguinte, o efeito é como a imagem acima:

<!-- ui-dialog -->
<div id="dialog" class="easyui-dialog" estilo="padding:20px 6px;largura:80%;" dados-options="inline:true,modal:true,closed:true,title:'Definir 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')">Confirmar</a>
</div>
</div>
<script type="text/javascript">
$(function () {
//dados em objeto
var data = [];
for (var i = 0; i < 100; i++) {
var m = {};
m.id = i;
m.txt = "dados" + i;
data.push(m);
}
$("#dialog").dialog();
// Link para abrir o diálogo
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open").dialog('center');
//reatribuição
$("#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>

Também pode ser usado assim:

//dados de string
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();
});

　Se quiser um efeito tridimensional, adicione estilos diretamente:

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

O que foi mencionado acima é o seletor de lista de rolagem de popup de simulação de app touch da edição do JavaScript do editor apresentado a você./Seletor de data, espero que ajude a todos, se você tiver alguma dúvida, fique à vontade para deixar um comentário, o editor responderá a todos a tempo. Aqui também agradeço muito o apoio ao site de tutorial de gritos!

Declaração: o conteúdo deste artigo é proveniente da Internet, pertence ao respectivo proprietário, foi contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por questões legais relacionadas. Se você encontrar conteúdo suspeito de direitos autorais, bem-vindo a enviar e-mail para: notice#w para denunciar, fornecendo provas relevantes. Uma vez confirmado, o site imediatamente eliminará o conteúdo suspeito de violação de direitos autorais.3Declaro: o conteúdo deste artigo é proveniente da Internet, pertence ao respectivo proprietário, foi contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por questões legais relacionadas. Se você encontrar conteúdo suspeito de direitos autorais, bem-vindo a enviar e-mail para: notice#w para denunciar, fornecendo provas relevantes. Uma vez confirmado, o site imediatamente eliminará o conteúdo suspeito de violação de direitos autorais.