JS-Touchscreen-Webversion der Auswahlliste nach App-Pop-up-Scrollfunktion/Datumauswahler

Bei der Verwendung von Dropdown-Listen auf mobilen Webseiten ist das Erlebnis der traditionellen Dropdown-Listen sehr schlecht, und in der Regel werden für bessere Interaktionsfunktionen keine Dropdown-Listen direkt verwendet, daher sind die Dropdown-Listen der nativen Apps in der Regel Pop-up-Listenauswahl, und natürlich sollte eine webbasierte App aus Erfahrungserfahrung auch so gemacht werden. Vor kurzem habe ich bei der Entwicklung einer webbasierten App diese Art von Bedarf getroffen, nicht nur Datumswähler, sondern auch Dropdown-Listen für Datenlisten, Variablenlisten usw. wurden benötigt. Ich habe überall gesucht und nur ein sehr gutes mobiscroll gefunden, aber der Download ist sehr lästig, und es ist seltsam, dass jQuery.mobile und jeasyui.mobile keine solchen Steuerelemente bereitstellen, weiß ich nicht warum? Obwohl ich nicht spezialisiert auf Frontend-Entwicklung bin, denke ich, dass es für mich als Allround-Talent nicht schwer zu entwickeln sein sollte. Ich habe zu Hause eine Nacht durchgehalten und mehrere Methoden versucht, bis ich schließlich eine fast perfekte Methode gefunden habe! Im Laufe der Nutzung wurde es ständig verbessert und jetzt öffentlich für alle Programmierer bereitgestellt.

Schauen wir uns zunächst das Ergebnisbild an:

Da der Scrollbereich dieses Steuerelements mit dem nativen Scrollmethoden von div arbeitet, gibt es beim Benutzen auf dem Touchscreen eine Inertia-Scrolling-Wirkung, und es wurde auch die Möglichkeit der Mausbedienung implementiert, jedoch wurde keine Inertia-Scrolling-Wirkung implementiert. Da dieses Steuerelement hauptsächlich für den Touchscreen entwickelt wurde, ist die Bedienung auf dem Touchscreen perfekt, und ich habe mich nicht darum gekümmert, Effekte für die Maus zu entwickeln. Dieses Steuerelement ist als jQuery-Plugin verpackt, ohne Rahmen,100% Breite, sehr einfach zu verwenden, zum Beispiel nach dem Einbau in das Pop-up ist das Ergebnis wie das Bild oben.

Verwendung des Codes wie folgt:

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

Der vollständige Code für die Verwendung des Pop-ups ist wie folgt, das Ergebnis ist wie das Bild oben zu sehen:

!-- ui-dialog -->
<div id="dialog" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'Einstellungen Wert'">
<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')">Bestätigen</a>
</div>
</div>
<script type="text/javascript">
$(function () {
//Objektdaten
var data = [];
for (var i = 0; i < 100; i++) {
var m = {};
m.id = i;
m.txt = "Daten" + i;
data.push(m);
{}
$("#dialog").dialog();
// Link zum Öffnen des Dialogs
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open").dialog('center');
//Neu zuweisen
$("#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>

Es kann auch so verwendet werden:

//Zeichenkette Daten
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();
});

　Wenn Sie ein wenig dreidimensionales Effekt haben möchten, fügen Sie einfach den Stil hinzu:

#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 js development touch screen web page version of the imitation app pop-up type scrolling list selector introduced by the editor to everyone/Date selector, I hope 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. Here, I also thank everyone for their support of the Nianyao tutorial website!

Declaration: The content of this article is from the Internet, 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 manually, nor bear relevant legal responsibility. If you find any suspected copyright content, please send an email to: notice#w3Please send an email to notice#w.com (replace # with @ when sending emails) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.