ใช้จาวาสคริปต์เพื่อทำให้การเลือกสวยงาม

ข้อกำหนดด้านการทำงาน

1. การโทรควรจะสะดวก หลังจากเสร็จแล้ว ควรมีลักษณะดังนี้:

function loadSelect(selectobj){
//ส่งผ่านวัตถุที่เลือกเพื่อตกแต่งสไตล์ของมัน
-
2. อย่าเปลี่ยนไอเท็มฟอร์มดั้งเดิม และอย่าทำลายโค้ดหน้าฟอร์ม:

<form name="f" onsubmit="getResult();">
<ชุดสนาม>
<legend>การลงทะเบียนผู้ใช้</legend>
<div>
<label for="username">บัญชี</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="pwd">รหัสผ่าน</label>
<input type="password" name="pwd" id="pwd" />
</div>
<div>
<label for="province">จังหวัด</label>
<select id="จังหวัด" name="จังหวัด">
<option value="10">เจียงซี</option>
<option value="11">ฝูเจี้ยน</option>
<option value="12">กวางตุ้ง</option>
<option value="13">เจ้อเจียง</option>
</เลือก>
</div>
</ฟิลด์เซต>
<ประเภทอินพุต = "ส่ง" ค่า = "ส่ง" ชื่อ = "btnSub" />
</แบบฟอร์ม>

ในการนำแนวคิดไปใช้

: ซ่อนการเลือกในแบบฟอร์ม
ทำไม ง่ายมาก เพราะผู้ชายคนนี้หัวแข็งเกินไปและไม่สามารถได้สิ่งที่คุณต้องการโดยใช้ CSS ดังนั้นฆ่ามันซะ
ขั้นตอนที่ 2: ใช้สคริปต์เพื่อค้นหาตำแหน่งที่แน่นอนของแท็ก select บนหน้าเว็บ
เราใช้แท็ก DIV เพื่อสร้างแท็กปลอมและดูดีกว่าในตำแหน่งนั้นเพื่อทำหน้าที่เป็นตัวแทนของเขา
ขั้นตอนที่ 3: ใช้สคริปต์เพื่ออ่านค่าในแท็กเลือก
แม้ว่าจะถูกซ่อนไว้ แต่เรายังคงสามารถใช้ตัวเลือกต่างๆ ในนั้นได้ ดังนั้นเราจึงสามารถนำไปใช้ได้ทั้งหมด
ขั้นตอนที่ 4: เมื่อผู้ใช้คลิกที่อวาตาร์ของแท็กที่เลือก ซึ่งก็คือ div เราใช้ 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.offsetซ้าย;
-
กลับ {
ด้านบน :t,
ซ้าย: ล,
ความกว้าง : ก,
ความสูง : ชม
-
-
ขั้นตอนที่หนึ่ง: บันทึกตำแหน่งที่แน่นอนของสิ่งที่เลือก หลังจากนั้นไม่นาน ก็มีตัวสำรองเข้ามา และผมรู้ว่าผมควรยืนอยู่จุดไหน

var offset=ออฟเซ็ต(obj);
//อธิบายที่นี่ว่า Offset เป็นฟังก์ชันที่ใช้ในการรับตำแหน่งสัมบูรณ์ของวัตถุ เขียนนอกฟังก์ชัน loadSelect() มีคุณลักษณะสี่ประการ: บน/ซ้าย/กว้าง/สูง
ขั้นตอนที่ 2: ซ่อนส่วนที่เลือก

obj.style.display = "ไม่มี";
ขั้นตอนที่ 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) ไม่ทำซ้ำทางขวา 4px";
iDiv.style.border="1px ทึบ #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) ไม่ทำซ้ำทางขวา 4px";
-
iDiv.onmouseout=function(){//mouse เคลื่อนออกไป
iDiv.style.Background="url(icon_select.gif) ไม่ทำซ้ำทางขวา 4px";
-
ขั้นตอนที่ 6: เพิ่มเหตุการณ์การคลิกเมาส์

iDiv.onclick=function(){//คลิกเมาส์
ถ้า (document.getElementById("selectchild" + obj.name)){
//ตรวจสอบว่า div ถูกสร้างขึ้นหรือไม่
ถ้า (childCreate){
//ตรวจสอบว่าเมนูแบบเลื่อนลงปัจจุบันเปิดอยู่หรือไม่ หากเปิดอยู่ ให้ปิด ถ้าปิดก็เปิดเลย
document.getElementById("selectchild"+ obj.name).style.display="none";
เด็กสร้าง = false;
}อื่น{
document.getElementById("selectchild" + obj.name).style.display="";
เด็กสร้าง=จริง;
-
}อื่น{
//เริ่มแรกให้วาง div ไว้ใต้ 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.พื้นหลัง="#f7f7f7";
cDiv.style.border="1px สีเงินทึบ";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="ไม่มี";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
เด็กสร้าง=จริง;
สำหรับ (var i=0;i<obj.options.length;i++){
//เพิ่มตัวเลือกในแท็ก select ดั้งเดิมไปที่ 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.ผนวกเด็ก(lLi);
-
var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
สำหรับ (var j=0;j<obj.options.length;j++){
//เพิ่มเหตุการณ์เมาส์สำหรับแท็ก li
liObj[j].onmouseover=function(){
นี้.style.พื้นหลัง = "สีเทา";
this.style.color="สีขาว";
-
liObj[j].onmouseout=function(){
นี้.style.พื้นหลัง = "สีขาว";
this.style.color="สีดำ";
-
liObj[j].onclick=function(){
//ทำสองสิ่ง อย่างแรกคือบันทึกการเลือกของผู้ใช้ลงในแท็กการเลือกดั้งเดิม มิฉะนั้น ไม่ว่าจะสวยงามแค่ไหน ก็จะไม่ได้รับค่าของการเลือกหลังจากส่งแบบฟอร์มแล้ว
obj.options.ความยาว=0;
obj.options[0]=ตัวเลือกใหม่(this.innerHTML,this.id);
//ในขณะเดียวกัน เราก็ปิดเมนูแบบเลื่อนลง
document.getElementById("selectchild" + obj.name).style.display="none";
เด็กสร้าง = false;
iDiv.innerHTML=this.innerHTML;
-
-
-
-
อันสุดท้ายซับซ้อนกว่าเล็กน้อย ให้ฉันอธิบายอีกครั้ง ก่อนที่เราจะทำตามขั้นตอนนี้ ลักษณะของสิ่งที่เลือกได้ถูกเปิดเผยแล้ว ขั้นตอนต่อไปคือการเพิ่ม div เพื่อเลียนแบบตัวเลือกแบบเลื่อนลงที่ปรากฏขึ้นหลังจากการเลือก ถูกคลิก เราสามารถแยกตัวเลือกของแท็ก select ผ่านทาง javascript และเขียนดังนี้:

<div>
<ul>
<li>ชื่อตัวเลือก</li>
<li>ชื่อตัวเลือก</li>
<li>ชื่อตัวเลือก</li>
</ul>
</div>
โดยพื้นฐานแล้วมันเป็น ยังมีตำหนิอยู่บ้างถ้ามีเวลาก็เอามารวมกันได้เลย!