استخدم جافا سكريبت لتجميل التحديد

المتطلبات الوظيفية

1. يجب أن يكون الاستدعاء مناسبًا بعد الانتهاء، ويجب أن يبدو كما يلي:

function LoadSelect(selectobj){.
// قم بتمرير كائن محدد لتجميل أسلوبه
}
2. لا تقم بتغيير عناصر النموذج الأصلية، ولا تدمر رمز صفحة النموذج:

<form name="f" onsubmit="getResult();">
<مجموعة الحقول>
<legend>تسجيل المستخدم</legend>
<ديف>
<label for="username">الحساب</label>
<نوع الإدخال = "نص" معرف = "اسم المستخدم" اسم = "اسم المستخدم" />
</div>
<ديف>
<label for="pwd">كلمة المرور</label>
<نوع الإدخال = "كلمة المرور" name = "pwd" id = "pwd" />
</div>
<ديف>
<label for="province">المقاطعة</label>
<حدد معرف = "المقاطعة" اسم = "المقاطعة">
<option value="10">جيانغشي</option>
<option value="11">فوجيان</option>
<option value="12">قوانغدونغ</option>
<option value="13">تشجيانغ</option>
</حدد>
</div>
</فيلدسيت>
<نوع الإدخال = "إرسال" القيمة = "إرسال" الاسم = "btnSub" />
</النموذج>

لتنفيذ الفكرة

: إخفاء التحديد في النموذج.
لماذا؟ الأمر بسيط، لأن هذا الرجل عنيد جدًا ولا يمكنه الحصول على ما تريده باستخدام CSS. لذا اقتلها.
الخطوة 2: استخدم برنامجًا نصيًا للعثور على الموضع المطلق لعلامة التحديد على صفحة الويب.
نحن نستخدم علامات DIV لإنشاء علامة مزيفة وذات مظهر أفضل في هذا الموضع لتكون بمثابة بديل له.
الخطوة 3: استخدم برنامجًا نصيًا لقراءة القيمة في علامة التحديد.
على الرغم من أنه مخفي، إلا أنه لا يزال بإمكاننا استخدام الخيارات الموجودة فيه، حتى نتمكن من أخذها جميعًا.
الخطوة 4: عندما ينقر المستخدم على الصورة الرمزية لعلامة التحديد، وهي div. نستخدم div آخر ليطفو أسفل القسم السابق، وهذا هو البديل للخيارات.
هذا كل شيء تقريبًا، فلننفذه خطوة بخطوة!

التحضير

1. فكر في الطريقة التي تريد بها تجميل التحديد وقم بإعداد الصور المقابلة. لقد قمت بإعداد صورتين صغيرتين، وهما السهم المنسدل 1 والسهم المنسدل 2. 1 هو النمط الافتراضي و2 هو النمط عند تحريك الماوس.
2. اكتب صفحة إرسال نموذج مشترك، مثل تلك الموجودة أدناه. لاحظ أنني قمت بتحديد نمط CSS الأساسي للاختيار، وأضفت الكود لاستدعاء ملف js في الرأس، وأضفت البرنامج النصي لاستدعاء الوظيفة في النص.

اكتب جافا سكريبت

<script type="text/javascript" src="select.js"></script>
قم بإنشاء ملف js جديد واحفظه باسم Select.js وسنكمل بقية العمل في ملف js هذا.

اسم الوظيفة: LoadSelect(obj);
المعلمات: حدد

الوظائف المتعلقة بالكائن:

// احصل على الموضع المطلق للملصق
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;

بينما (e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
يعود {
أعلى: ر،
اليسار: ل،
العرض: ث،
الارتفاع : ح
}
}
الخطوة الأولى: سجل الموضع المطلق للتحديد. بعد فترة، جاء البديل وعرفت أين يجب أن أقف.

فار الإزاحة=Offset(obj);
// اشرح هنا أن الإزاحة هي دالة تُستخدم للحصول على الموضع المطلق للكائن. مكتوب خارج وظيفة LoadSelect(). لها أربع سمات: أعلى/يسار/عرض/ارتفاع.
الخطوة 2: إخفاء التحديد.

obj.style.display="none";
الخطوة 3: استخدم div افتراضي لاستبدال Select

var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.name;
iDiv.style.position = "مطلق";
iDiv.style.width=offset.width + "px";
iDiv.style.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.background="url(icon_select.gif) بدون تكرار لليمين 4 بكسل";
iDiv.style.border="1px Solid #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
الخطوة 4: أعطها القيمة غير المحددة للتحديد الأصلي.

iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;
الخطوة 5: إضافة نمط تمرير الماوس إلى الصورة الرمزية.

iDiv.onmouseover=function(){// تحركات الماوس
iDiv.style.background="url(icon_select_focus.gif) بدون تكرار لليمين 4 بكسل";
}
iDiv.onmouseout=function(){// يتحرك الماوس بعيدًا
iDiv.style.background="url(icon_select.gif) بدون تكرار لليمين 4 بكسل";
}
الخطوة 6: إضافة أحداث النقر بالماوس الرئيسية.

iDiv.onclick=function(){// انقر بالماوس
إذا (document.getElementById("selectchild" + obj.name)){
// تحديد ما إذا كان قد تم إنشاء القسم أم لا
إذا (إنشاء الطفل) {
// تحديد ما إذا كانت القائمة المنسدلة الحالية مفتوحة أم لا. إذا كان مغلقا، افتحه.
document.getElementById("selectchild"+ obj.name).style.display="none";
ChildCreate=false;
}آخر{
document.getElementById("selectchild" + obj.name).style.display="";
ChildCreate=true;
}
}آخر{
// في البداية، ضع div أسفل القسم السابق كبديل للخيارات.

var cDiv = document.createElement("div");
cDiv.id="selectchild" + obj.name;
cDiv.style.position = "مطلق";
cDiv.style.width=offset.width + "px";
cDiv.style.height=obj.options.length *20 + "px";
cDiv.style.top=(offset.top+offset.height+2) + "px";
cDiv.style.left=offset.left + "px";
cDiv.style.background="#f7f7f7";
cDiv.style.border="1px الفضة الصلبة";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="none";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
ChildCreate=true;
for (var i=0;i<obj.options.length;i++){
// أضف الخيارات الموجودة في علامة التحديد الأصلية إلى li
var lLi=document.createElement("li");
lLi.id=obj.options[i].value;
lLi.style.textIndent="4px";
lLi.style.height="20px";
lLi.style.lineHeight="20px";
lLi.innerHTML=obj.options[i].innerHTML;
uUl.appendChild(lLi);
}
var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
for (var j=0;j<obj.options.length;j++){
// أضف حدث الماوس لعلامة li
liObj[j].onmouseover=function(){
this.style.background="gray";
this.style.color="white";
}
liObj[j].onmouseout=function(){
this.style.background="white";
this.style.color="black";
}
liObj[j].onclick=function(){
// افعل شيئين. الأول هو حفظ اختيار المستخدم في علامة التحديد الأصلية. وإلا، بغض النظر عن مدى جمالها، فلن يتم الحصول على قيمة التحديد بعد إرسال النموذج.
obj.options.length=0;
obj.options[0]=new Option(this.innerHTML,this.id);
// في نفس الوقت، نغلق القائمة المنسدلة.
document.getElementById("selectchild" + obj.name).style.display="none";
ChildCreate=false;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
الخطوة الأخيرة أكثر تعقيدًا بعض الشيء، دعوني أشرح ذلك مرة أخرى قبل أن نقوم بهذه الخطوة، لقد تم بالفعل الكشف عن مظهر التحديد. الخطوة التالية هي إضافة div لتقليد خيار القائمة المنسدلة الذي يظهر بعد التحديد تم النقر عليه. يمكننا استخراج خيارات علامة التحديد من خلال جافا سكريبت وكتابتها على النحو التالي:

<div>
<ul>
<li>اسم الخيار</li>
<li>اسم الخيار</li>
<li>اسم الخيار</li>
</ul>
</div>
هذا هو الأساس. لا تزال هناك بعض العيوب، إذا كان لديك الوقت، يمكنك إضافتها معًا!