JS Div จำลองการเลือกฟิลด์ฟิลด์ฟิลด์ฟิลด์การสอน

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-03-21 18:48:02

แนะนำ: ASP สร้างรหัสพื้นฐาน HTM แบบคงที่
คู่มือการอ้างอิงอย่างเป็นทางการคู่มือทางเทคนิคที่เชื่อถือได้ดาวน์โหลดการจำแนกหนังสือเล่มเล็ก ๆ แบบย่อการสอนหนังสือเล่มต่อไปนี้เป็นรหัสเฉพาะของไฟล์ mk.asp: ----------------------- ------------------------------------------------------ ------------------ ------------------------------------------------------------------------------------------------------------ ------------------ -----

เมื่อเร็ว ๆ นี้ฉันกำลังทำงานในโครงการ AJAX ซึ่งใช้ล็อคหน้าจอจำลองจำนวนมากที่มีเลเยอร์หน้าจอเต็มรูปแบบ แต่มีอาการปวดหัวนั่นคือกล่องรายการแบบหล่นลงจะแสดงบนเลเยอร์เสมอ ฉันเขียนคลาส JS นี้

ตัวอย่างเอฟเฟกต์:

รหัสโปรแกรม:

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

<html>

<head>

<title> js div จำลองการเลือกองค์ประกอบของฟอร์ม </title>

<ภาษาสคริปต์ = JavaScript>

seloptions = {

ชื่อ: Seloptions, // นี่คือชื่อของอาร์เรย์

ข้อมูล: อาร์เรย์ใหม่ ()

seloptions.data [0] = อาร์เรย์ใหม่ (0, ตัวเลือก 0)

seloptions.data [1] = อาร์เรย์ใหม่ (1, ตัวเลือก 1)

seloptions.data [2] = อาร์เรย์ใหม่ (2, Option2)

seloptions.data [3] = อาร์เรย์ใหม่ (3, ตัวเลือก 3)

seloptions.data [4] = อาร์เรย์ใหม่ (4, ตัวเลือก 4)

seloptions.data [5] = อาร์เรย์ใหม่ (5, ตัวเลือก 5)

seloptions.data [6] = อาร์เรย์ใหม่ (6, ตัวเลือก 6)

seloptions.data [7] = อาร์เรย์ใหม่ (7, ตัวเลือก 7)

seloptions.data [8] = อาร์เรย์ใหม่ (8, ตัวเลือก 8)

seloptions.data [9] = อาร์เรย์ใหม่ (9, ตัวเลือก 9)

seloptions.data [10] = อาร์เรย์ใหม่ (10, ตัวเลือก 10)

seloptions.data [11] = อาร์เรย์ใหม่ (11, ตัวเลือก 11)

seloptions.data [12] = อาร์เรย์ใหม่ (12, ตัวเลือก 12)

seloptions.data [13] = อาร์เรย์ใหม่ (13, ตัวเลือก 13)

seloptions.data [14] = อาร์เรย์ใหม่ (14, ตัวเลือก 14)

seloptions.data [15] = อาร์เรย์ใหม่ (15, ตัวเลือก 15)

tmhselect = {

// ฟังก์ชันหลัก

// พารามิเตอร์ความหมาย: คอนเทนเนอร์ชื่อข้อมูล [อาร์เรย์] รายการเริ่มต้นความกว้างการกระทำ (ฟังก์ชันวัตถุประสงค์ไม่สามารถมีพารามิเตอร์ได้)

แสดง: function (obj, selectname, dataobj, seloption, ความกว้าง, การกระทำ) {

var data = dataobj.data;

var _obj = document.getElementById (obj);

if (! _ obj || typeof (_obj) == undefined) {return false;}

var s1 = document.createelement (div);

if (iSnan (ความกว้าง) || width ==) {width = 150;} อื่นถ้า (ความกว้าง <26) {width = 26;}

s1.style.width = ความกว้าง;

s1.onmouseleave = function () {tmhselect.hidden (selectName)};

var str =;

// ตัดสินว่ามีข้อมูลใด ๆ

if (data.length> 0) {

// แสดงรายการตัวเลือกข้อมูลเมื่อมีข้อมูล

str = <อินพุต type = 'hidden' name = 'selectName' id = 'selectName' value = 'tmhselect.relv (seloption, data)'>;

str = <div id = '_ a_ selectname' style = 'width: width px; ความสูง: 18px;

str = <div id = '_ v_ selectName' style = 'ตำแหน่ง: สัมพัทธ์; ลอย: ซ้าย; ซ้าย: 2px; ความกว้าง: (ความกว้าง -22) px; ความสูง: 18px; ตัวอักษรขนาด: 12px; ล้น: ซ่อน; ความสูง: 18px; 'onclick =/tmhselect.ShowOptions (' selectName ');/> tmhselect.rest

str = <div style = 'ตำแหน่ง: สัมพัทธ์; ลอย: ขวา; ขวา: 0px; ความกว้าง: 18px; ความสูง: 18px; text-allign: center; font-family: webdings; font-size: 16px; ล้น -Color: #CCCCCC; เคอร์เซอร์: ตัวชี้! สำคัญ; เคอร์เซอร์: มือ;

str = </div>;

str = <div id = '_ b_ selectname' style = 'ตำแหน่ง: Absolute; X: Hidden; Overflow-y: auto; display: none;

สำหรับ (i = 0; i <data.length; i) {

str = <div id = '_ s_ selectname' style = 'tmhselect.style (1, ข้อมูล [i] [0], seloption)' onmouseover =/tmhselect.css (2, 'ข้อมูล [i] [0]' , 'selectName')/ onMouseOut =/ tmhSelect.css (1, สิ่งนี้, 'data [i] [0]', 'selectName')/ onClick =/ tmhselect.Selected (นี้ 'ข้อมูล [i] [0]' , dataobj.name, 'action')/> data [i] [1] </div>;

str = </div>;

}อื่น{

// รูปแบบว่างจะปรากฏขึ้นเมื่อไม่มีข้อมูล

str = <อินพุต type = 'hidden' name = 'selectName' id = 'selectName' value = 'seloption'>;

str = <div id = '_ a_ selectname' style = 'width: width px; ความสูง: 18px;

str = </div>;

str = <div id = '_ b_ selectname' style = 'ตำแหน่ง: Absolute; Hidden; Overflow-y: auto; display: none;

s1.innerhtml = str;

_obj.AppendChild (S1);

// ส่งคืนค่าของรายการที่เลือก

ค่า: ฟังก์ชัน (n) {return document.getElementById (n) .Value;},

// ส่งคืนข้อความของรายการที่เลือก

ข้อความ: ฟังก์ชัน (n) {return document.getElementById (_v_ n) .innerText;},},

เลือก: ฟังก์ชัน (o, v, dn, action) {

var d = dn.data;

var n = o.id.replace (/(_ s _)/gi,)

document.getElementById (n) .Value = V;

document.getElementById (_v_n) .innerhtml = tmhselect.restr (d, v);

tmhselect.ShowOptions (n)

สำหรับ (var i = 0; i <document.getElementById (_b_n) .childnodes.length; i) {

document.getElementById (_b_n) .childnodes [i] .style.csstext = tmhselect.style (1)

o.style.csstext = tmhselect.style (2);

if (action! = && action! = null) {

ลอง {eval (action)} catch (e) {}

Relv: ฟังก์ชั่น (v, d) {

สำหรับ (i = 0; i <d.length; i) {

if (d [i] [0] == V) {

กลับ V;

if (v == null || v ==) {

return d [0] [0];

rest: ฟังก์ชั่น (d, m) {

สำหรับ (i = 0; i <d.length; i) {

ถ้า (d [i] [0] == m) {

return d [i] [1];

if (m == null || m ==) {

return d [0] [1];

ความสูง: ฟังก์ชั่น (l) {var h; if (l> 10 || l <1) h = 10 * 15;

Showoptions: ฟังก์ชั่น (n) {

var o = document.getElementById (_b_n)

if (O.style.display == ไม่มี)

o.style.display =;

อื่น

o.style.display = ไม่มี;

_selectoptionselm = o;

ซ่อน: ฟังก์ชั่น (n) {

document.getElementById (_b_n) .style.display = ไม่มี;

สไตล์: ฟังก์ชั่น (m, v1, v2) {

var cs =;

if (v1 == v2 && v1! = && v1! = null) {m = 2;}

สวิตช์ (m) {

กรณีที่ 1:

CS = ความสูง: 15px;

หยุดพัก;

กรณีที่ 2:

CS = ความสูง: 15px;

หยุดพัก;

คืน CS;

CSS: ฟังก์ชั่น (s, obj, v, n) {

var v1 = document.getElementById (n) .Value;

ถ้า (v == v1) {

obj.style.csstext = tmhselect.style (2);

กลับ;

}อื่น{

obj.style.csstext = tmhselect.style (s)

ฟังก์ชั่นทดสอบ () {

การแจ้งเตือน (tmhselect.value ('ทดสอบ'));

</script>

</head>

<body>

<ประเภทอินพุต = ปุ่มชื่อ = ค่าปุ่ม = ดูข้อความ onClick = การแจ้งเตือน (tmhselect.text ('ทดสอบ')) />

<ประเภทอินพุต = ปุ่มชื่อ = ค่าปุ่ม = ดูค่าตัวเลือก onClick = การแจ้งเตือน (tmhselect.value ('ทดสอบ')) />

<ภาษาสคริปต์ = JavaScript>

tmhselect.show (testdiv, ทดสอบ, seloptions ,, 160, การทดสอบ ());

</script>

</body>

</html>

แบ่งปัน: อักขระภาษาจีน ASP ไปยังพินอินสนับสนุนคำพิเศษที่กำหนดเอง
ครั้งนี้ฉันอัปเดตโปรแกรมบล็อกที่ฉันใช้และใช้ชื่อไฟล์เมื่อสร้างไฟล์แบบคงที่เพื่อใช้พินอินของชื่อบทความนี้เกี่ยวข้องกับวิธีการแปลงข้อความเป็นพินอิน ควรเป็นเรื่องปกติภายใต้ GB2312 และไม่มี