نموذج اختيار قائمة منسدلة للنوافذ الإفلاتية والنوافذ التاريخية لموقع الويب التفاعلي باستخدام JS

عند استخدام قائمة التسلسل في تطبيق الويب على الهاتف المحمول، لا يوجد تجربة استخدامه جيدة باستخدام قائمة التسلسل التقليدية، لا تستخدم عادة واجهات التفاعل التي تعمل بشكل أفضل بشكل مباشر قائمة التسلسل، لذا تكون قوائم التسلسل الأصلية للتطبيقات المدمجة قائمة اختيار نافذة قائمة، من حيث تجربة الاستخدام، يجب أن تكون تطبيقات الويب أيضًا مثل ذلك، واجهت هذا الطلب في وقت تطوير تطبيق الويب مؤخرًا، ليس فقط ميزة مختار التاريخ، ولكن أيضًا قائمة البيانات، قائمة المتغيرات، ومتطلبات قائمة التسلسل الأخرى، بعد البحث والبحث عبر الإنترنت، لم أجد سوى mobiscroll جيد، ولكن كان التحميل معقدًا، وكان شعوري الغريب هو أن jquery.mobile و jeasyui.mobile لم يقدموا هذا العنصر، لا أعرف لماذا؟ على الرغم من أنني لست مبرمجًا أمامي، ولكن شعوري الشامل أن هذا ليس صعبًا للبرمجة، بعد قضاء ليلة في المنزل ومحاولة عدة طرق، تم العثور على طريقة تقريبًا مثالية! في الاستخدام اللاحق، تم تحسينه بشكل مستمر، والآن يتم تقديمه للجميع من المبرمجين.

دعنا نبدأ بالنظر في الصورة التوضيحية:

بسبب أن تمرير هذا العنصر يتم باستخدام طريقة التمرير الأصلية لـ 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();
// Link to open the 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+*/
}

ما تم ذكره أعلاه هو من قبل المحرر الذي قدمه للجميع عن ملفات التطبيقات الإفتراضية لتحسين تجربة المستخدم على الشاشة اللمس مثل تطبيقات الهاتف المحمول، آمل أن يكون مفيدًا لكم، إذا كان لديكم أي أسئلة، فمرحبًا بترك تعليقاتكم، وسأقوم بالرد على أسئلتكم في أقرب وقت ممكن، وأشكركم أيضًا على دعمكم لموقع呐喊 التعليمات!

بيان: محتوى هذا المقال تم جمعه من الإنترنت، يحق لصاحب الحقوق أن يكون له حقوق ملكية، ويتم جمع المحتوى من قبل المستخدمين عبر الإنترنت بشكل تلقائي، ولا يملك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فمرحبًا بمراسلتنا عبر البريد الإلكتروني: notice#oldtoolbag.com (يرجى استبدال # ب @ عند إرسال البريد الإلكتروني). يرجى تقديم الدليل على الانتهاك، وسنقوم بإزالة المحتوى المزعوم فورًا إذا تم التحقق منه.