JS-окно с поддержкой касания для имитации списка выбора и даты в стиле приложения

В мобильной версии веб-приложения при использовании выпадающих списков традиционное использование выпадающих списков очень неудобно, в общем, интерактивные функции интерфейсов, которые делаются лучше, не используют выпадающие списки напрямую, поэтому原生 выпадающие списки в приложениях являются списками выбора типа всплывающего окна, веб-приложения, конечно, должны быть сделаны так, чтобы обеспечить удобство использования. Недавно в разработке веб-приложения я встретил такую потребность, не только для выбора даты, но и для выбора списков данных, списков переменных и других требований к выпадающим спискам. Найдя в Интернете только одно较好的 mobiscroll, процесс загрузки был сложен, и казалось странным, что neither jQuery.mobile nor jeasyui.mobile не предоставляют такой компонент, не знаю почему? Хотя я не специализируюсь на разработке интерфейсов, но как почти универсальный разработчик я считаю, что это не так сложно разработать. После ночи, проведенной дома, и нескольких попыток я finalmente нашел почти идеальный метод! В последующем использовании он был постоянно улучшен, и теперь он предоставляется общественности.

Сначала посмотрим на效果图:

Из-за того, что скроллинг этого компонента осуществляется с использованием метода native scrolling div, при использовании на сенсорных экранах可实现惯性 скроллинг, также реализована возможность работы мыши, но эффект惯性 скроллинга не был реализован. Поскольку этот компонент в основном направлен на сенсорные экраны, то сенсорный экран уже идеален, я ленивый, чтобы добавлять эффекты мыши. Этот компонент уже инкапсулирован в плагин jQuery, без рамки, 100% ширины, использование очень удобно, например, после включения в попап будет выглядеть как на上图.

Способ использования кода:

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

Полный код использования всплывающего окна приведен ниже, эффект будет таким, как показано на рисунке выше:

<!-- ui-dialog -->
<div id="dialog" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'设置数值'">
<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')">确定</a>
</div>
</div>
<script type="text/javascript">
$(function () {
//对象型数据
var data = [];
for (var i = 0; i < 100; i++) {
var m = {};
m.id = i;
m.txt = "数据" + i;
data.push(m);
}
$("#dialog").dialog();
//链接打开对话框
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open").dialog('center');
//重新赋值
$("#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>

也可以这样使用：

//字符串数据
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();
});

　Если хотите добавить объемный эффект, просто добавьте стиль:

#cover_top_EasyScrollBox{
background: -ms-linear-gradient(top, #000000, #ccc); /* IE 10 */
background:-moz-linear-gradient(top,#000000,#ccc);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#000000), to(#ccc));/*谷歌*/
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);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ccc), to(#000000));/*谷歌*/
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+*/
}

Как упоминалось выше, редактор介绍了给大家 js разработка веб-страницы с сенсорным экраном, имитирующая приложение с плавающими окнами и выбором списка, надеюсь, это поможет вам. Если у вас есть какие-либо вопросы, пожалуйста, оставляйте комментарии, редактор будет отвечать вам в кратчайшие сроки. В этом также выражается благодарность всем, кто поддерживает сайт呐喊 учебника!

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета, сайт не обладает правами собственности, не underwent редактирование, и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите содержимое,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для жалоб, и предоставьте соответствующие доказательства. Если после проверки будет установлено, что содержимое нарушает авторские права, сайт немедленно удаляет涉嫌侵权的内容.