JS Touch Screen Web Version仿app Pop-up Type Scroll List Selector/Date Selector

On mobile web version app, when using the dropdown list, the traditional dropdown list is very bad to use, and generally, the interaction function interface that is slightly better will not directly use the dropdown list, so the native dropdown list of the app is popup list selection. Of course, the web app should also be made like that from the user experience perspective. A few months ago, when developing the web version of the app, I encountered this kind of need. Not only date pickers, but also data lists, variable list selection, and other dropdown list type needs. After searching online, I only found one relatively good mobiscroll, but it is quite麻烦 to download, and it feels quite strange that jQuery.mobile and jeasyui.mobile do not provide such controls. I don't know why? Although I am not a professional front-end developer, I think it is not difficult to develop as a versatile person. I tried several methods at home for a night and finally found a nearly perfect method! It has been continuously improved in later use, and now it is publicly provided to all programmers.

Let's take a look at the effect diagram:

Since the scrolling of this control uses the native div scrolling method, when used on a touch screen, it can have an inertia scrolling effect, and it also implements mouse operation, but does not implement the inertia scrolling effect. Since this control is mainly aimed at touch screens, so, touch screens are perfect, and I'm too lazy to make the mouse version of the effect. This control has been encapsulated into a jQuery plugin, without borders,100% width, very convenient to use, for example, after being套入弹窗后 is the effect shown in the figure above.

The usage method of the code is as follows:

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

The complete usage code for the popup window is as follows, and the effect is as shown in the figure above:

<!-- ui-dialog -->
<div id="dialog" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'Set Value'">
<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')">Confirm</a>
</div>
</div>
<script type="text/javascript">
$(function () {
//Object data
var data = [];
for (var i = 0; i < 100; i++) {
var m = {};
m.id = i;
m.txt = "Data" + i;
data.push(m);
}
$("#dialog").dialog();
// Link to open the dialog
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open").dialog('center');
//Reassign value
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
 2,
value: '4',
data: data,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value.id);
}
});
event.preventDefault();
});
});
</script>

It can also be used like this:

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

　If you want a bit of a 3D effect, you can simply add the 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+*/
}

The above-mentioned is the touch screen web page version of the仿app pop-up type scroll list selector for js development introduced by the editor to everyone/Date selector, hoping it will be helpful to everyone. If you have any questions, please leave me a message, and the editor will reply to everyone in time. At the same time, I would also like to express my heartfelt thanks to everyone for their support of the Naihua Tutorial website!

Statement: The content of this article is from the network, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit the content manually, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report any violations, and provide relevant evidence. Once verified, this website will immediately delete the content suspected of infringement.