ข้อมูลจังหวัดเทศบาลและเคาน์ตีของ บริษัท ค่อนข้างแย่มาก มันถูกใช้เพื่อสร้าง ID จากระบบ EHR เพื่อให้ตรงกัน ตัวอย่างเช่นจังหวัดฟูเจี้ยนสอดคล้องกับ ID 01211014AOP145 และเมืองก็สอดคล้องกับ ID และจากนั้นเขตและมณฑลก็ไม่สนใจ จากนั้นฉันก็พบปลั๊กอินทรัพยากรออนไลน์ ความรู้สึกไม่สามารถใช้ได้ดังนั้นฉันจึงตัดสินใจเขียนด้วยตัวเอง เพราะฉันไม่ทราบวิธีการสร้างอินเทอร์เฟซที่เป็นครึ่งถังของน้ำรูปแบบสไตล์และการจับคู่สี ฉันค้นหา JD.com, Amazon, Taobao, Dangdang และคนอื่น ๆ อย่างเงียบ ๆ เกี่ยวกับวิธีการที่จังหวัดเมืองและอำเภอได้ดำเนินการอย่างไร ภาพมีดังนี้:
ในที่สุดฉันก็รวมเข้ากับรูปต่อไปนี้:
พูดคุยเกี่ยวกับซอร์สโค้ดโดยไม่มีเรื่องไร้สาระมาก:
<style type = "text/css"> #divprocity {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 350px; สูงสุด: 220px; ความสูง: อัตโนมัติ; แสดง: ไม่มี; เส้นขอบ: 1px Solid #D3D3D3; z-index: 100; ล้น: อัตโนมัติ; Overflow-X: ซ่อน; } .headmenu {ความสูง: 34px; ความเป็นมา: #F6F6F6; มาร์จิ้น: 0; Padding: 0; } .headmenu li {float: ซ้าย; TEXT-ALIGN: CENTER; ความกว้าง: 60px; ความสูง: 32px; รายการสไตล์: ไม่มี; ความเป็นมา: #F6F6F6; ความสูงของสาย: 32px; ขนาดตัวอักษร: 13px; เคอร์เซอร์: ตัวชี้; } .headmenu li.lidefault {พื้นหลัง: #f60; สี: #FFF; มาร์จิ้น: 0; Padding: 0; } .LIDIV1, .LIDIV2 {ความสูง: อัตโนมัติ; ต่ำสุด: 30px; ชายแดนด้านบน: 2.5px Solid #F60; ระยะขอบด้านบน: -2px; } .LIDIV3 {ความสูง: อัตโนมัติ; ต่ำสุด: 30px; สูงสุด-สูง: 200px; ชายแดนด้านบน: 2px Solid #F60; ระยะขอบด้านบน: -2px; } .LIDIV2, .LIDIV3 {แสดง: ไม่มี; } .Lidiv1 ul, .lidiv2 ul {padding: 2px; มาร์จิ้น: 0; ชัดเจน: ทั้งสอง; } .Lidiv3 ul {padding: 2px; มาร์จิ้น: 0; ชัดเจน: ทั้งสอง; } .Lidiv1 ul li, .lidiv2 ul li {float: ซ้าย; ขนาดตัวอักษร: 14px; ความกว้าง: 60px; ความสูงของสาย: 180%; รายการสไตล์: ไม่มี; สี: #252525; มาร์จิ้น: 0 4px; เคอร์เซอร์: ตัวชี้; TEXT-ALIGN: CENTER; } .Lidiv3 ul li {float: ซ้าย; ขนาดตัวอักษร: 13px; ความสูงของสาย: 150%; สี: #252525; มาร์จิ้น: 1px 3px; รายการสไตล์: ไม่มี; เคอร์เซอร์: ตัวชี้; TEXT-ALIGN: CENTER; } .Lidiv1 ul li: hover, .lidiv2 ul li: hover, .lidiv3 ul li: hover {color: #8b51cb; เคอร์เซอร์: ตัวชี้; การตกแต่งข้อความ: ไม่มี; Padding: 0; ความเป็นมา: #CCC; } .BTN_IMG1 {WIDTH: 20PX; แนวตั้ง-แนว: กลาง; ขอบซ้าย: -31px; ชายแดน: ไม่มี; โครงร่าง: ไม่มี; ความสูง: 10px; เคอร์เซอร์: ตัวชี้; ความเป็นมา: URL (รูปภาพ/img_1.png) ศูนย์กลางที่ไม่มีการทำซ้ำ z-index: 10; } .btn_img2 {margin-left: -31px; มาร์จิ้น-ก้น: 2px; ความกว้าง: 20px; ความสูง: 10px; ชายแดน: ไม่มี; โครงร่าง: ไม่มี; แนวตั้ง-แนว: กลาง; เคอร์เซอร์: ตัวชี้; ความเป็นมา: URL (รูปภาพ/img_2.png) ศูนย์กลางที่ไม่มีการทำซ้ำ z-index: 10; } </style>เค้าโครงหน้า:
<head> <title> ความสามารถในการปรับขนาดของการเชื่อมโยงจังหวัดและเทศบาล </title> <script type = "text/javascript" src = "สคริปต์/jQuery-1.9.1.min.js"> </สคริปต์> </head> name = "Radio1" value = "2" /> ต่างประเทศ <br /> <br /> <br /> <lable> การค้นหาจังหวัดและเทศบาล: < /label> <อินพุตประเภท = "ข้อความ" id = "txt_procity" onkeyup = "getOutCounty ()" readonly = "readOnly" runat = onclick = "ciftionimg ()"/> <br/> <lable> แสดงตำแหน่ง: </label> <br/> <div id = "divprocity"> <ul> <li> จังหวัด </li> <li> เมือง </li> [html] ดูสำเนาธรรมดา <li> ต่างประเทศ </li> Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou <li> Fuzhou Fuzhou </li> <li> Fujian </li> <li> anhui </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou <li> <li> Fuzhou <li> <li> fuzhou <li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </Li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </Li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> style = "text-sallign: center; color:#f60"> <strong> โปรดเลือกจังหวัดก่อน! </strong> </p> </div>
สคริปต์:
<script type = "text/javascript"> $ (เอกสาร) .ready (function () {$ ('#divprocity ul.headmenu li') คลิก (ฟังก์ชั่น () {var index = $ (นี้) .index (); $ (นี้) .AddClass ("LideFault"). พี่น้อง (). RemoveClass ("LideFault"); = $ (นี่) .val (); $ (#btnimg '). attr ("ชื่อ", "img1"); "อ่านอย่างเดียว");}}) // ฟังก์ชั่นการสืบค้นเต็มรูปแบบ getOutCounty () {// border: 1px solid #d3d3d3; พื้นหลัง: #f6f6f6; พื้นหลังสีทางเลือก: #f7f7f7; var txt = $ ("อินพุต [id*= txt_procity]"); if (txt.val (). trim () == "") {return false; } var height = txt.height (); var x = txt.offset (). ด้านบน; var y = txt.offset (). ซ้าย; $ ('#divprocity'). css ({display: "block", ซ้าย: y + "px", ด้านบน: x + ความสูง + 8 + "px"}); $ ('#divprocity ul.headmenu li') eq (2). show (). css ("width", "70px"). addclass ("lidefault") พี่น้อง (). ซ่อน (); $ ('#divprocity'). เด็ก ๆ ('div'). eq (2). show (). พี่น้อง ('div') ซ่อน (); $ ('#btnimg'). attr ("คลาส", "btn_img2"); $ ('#btnimg'). attr ("ชื่อ", "img2"); // แท็กภาพสวิตช์ // การสืบค้นฟัซซี่รหัสที่เกี่ยวข้อง var ss = "<ul> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> จังหวัด Fufuzhou </li></ul>"; $ ('. lidiv3'). html (''); $ ('. LIDIV3'). HTML (SS); } // คลิกปุ่มขวาบนบ้านและต่างประเทศเพื่อโหลดฟังก์ชั่นการเปลี่ยนแปลง () {var _selectValue = $ ("อินพุต: ตรวจสอบ [ชื่อ $ = RADION1]"). val (); if (_selectValue == "" || _selectValue == ไม่ได้กำหนด) {แจ้งเตือน ("โปรดเลือกว่าจะไปต่างประเทศก่อน!"); กลับเท็จ; } var txt = $ ("อินพุต [id*= txt_procity]"); var height = txt.height (); var x = txt.offset (). ด้านบน; var y = txt.offset (). ซ้าย; ชื่อ var = $ ('#btnimg'). attr ("ชื่อ"); if (name == "img1") {$ ('#btnimg'). attr ("คลาส", "btn_img2"); $ ('#btnimg'). attr ("ชื่อ", "img2"); $ ('#divprocity'). css ({display: "block", ซ้าย: y + "px", ด้านบน: x + ความสูง + 8 + "px"}); // 1 รายการเมนูแผงควบคุมต่างประเทศในประเทศและ 2 รายการแสดงถ้า (_selectValue == 1) {$ ('#divprocity ul.headmenu li'). eq (2) .hide (). พี่น้อง (). แสดง (); $ ('#divprocity'). เด็ก ๆ ('div'). eq (0). show (). พี่น้อง ('div') ซ่อน (); } else {$ ('#divprocity ul.headmenu li'). eq (2). show (). css ("ความกว้าง", "70px"). addclass ("lidefault"). พี่น้อง (). ซ่อน (); $ ('#divprocity'). เด็ก ๆ ('div'). eq (2). show (). พี่น้อง ('div') ซ่อน (); }} else {$ ('#btnimg'). attr ("คลาส", "btn_img1"); $ ('#btnimg'). attr ("ชื่อ", "img1"); $ ('#divprocity'). CSS ("แสดง", "ไม่มี"); }} </script>ตรรกะคือการเลือกในประเทศหรือต่างประเทศก่อน รูปสามเหลี่ยมเป็นภาพที่ไม่วาดโดย H5 Canvas มีรูปภาพมากมายบนอินเทอร์เน็ต
1. ฉันใช้ปุ่มประเภทอินพุตเป็นคอนเทนเนอร์รูปภาพ แต่ฉันไม่สามารถแม้แต่จะเอามันออกมาด้วย IMG (บางทีฉันกำลังรดน้ำ) อินพุตมีปุ่มสไตล์เริ่มต้นคลิกที่เส้นขอบสีน้ำเงินด้านนอกลบโครงร่าง: ไม่มี; อย่าเขียนมันออกมาเหมือนฉัน
2. รู้สึกเหมือนเขียนในลักษณะที่มุ่งเน้นกระบวนการกดสามเหลี่ยมเพื่อโหลดข้อมูลทั้งหมดสลับรูปภาพคลิกที่ภาพและปิด ตรรกะบางอย่างในนั้นคือการขยายอย่างอิสระ หากคุณไม่ต้องการรหัสต่างประเทศให้ลบรหัสต่างประเทศและเพิ่มจังหวัดและเมืองที่คล้ายกันเพื่อขยาย
3. การโหลดข้อมูลแบบไดนามิกเป็นตัวอย่างเช่นชื่อคลาส DIV ที่สอดคล้องกันของจังหวัดคือ LIDIV1 และโครงสร้างกล่องของมัน
<div <ul> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fufuzhou </li> <li> Fufuzhou </li> </ul> ";
ข้อมูลแบบไดนามิก SS สามารถรับได้ผ่าน AJAX และข้ามผ่านการสำรวจพื้นหลัง
var ss = <ul> <li id = "01211014aop145" onclick = "getli (นี่)"> จังหวัดฟูเจี้ยน </li></ul>
ตัวอย่างเช่นต่อไปนี้เป็นวิธีการเขียนของ. NET (ไม่รังเกียจถ้าคุณเขียนมันต่ำ) และส่งผ่านไปยัง Ajax front-end เพื่อรับค่าที่ส่งคืนและผนวกโดยตรงกับ $ ('LIDIV3') HTML (SS); เพื่อรับข้อมูลแบบไดนามิก
if (ds! = null && ds.tables.count> 0 && ds.tables [0] .rows.count> 0) {strbuild.append ("<table id =/" tableshow/"class =" gridtable/"cellspacing = '0'>"); //strbuild.appendformat("<<<<<<< <tr> <div class =/"dialogtitle1/"> " + title3 +" </div> <tr> "); foreach (datarow dr ใน ds.tables [0] .rows) {strbuild.append ("<tr id = '" + dr ["value"] + "' onmouseover =/" this.bgcolor = '#faebd7'/"onmouseout =/" this.bgcolor = ''/ strbuild.appendformat ("<td> {0} </td>", dr ["name"]. toString ()); strbuild.append ("</tr>"); } strbuild.append ("</bable>"); -รับข้อมูลคลิกจังหวัดฟูเจี้ยนเพื่อเขียนเหตุการณ์คลิกทั่วไปและพื้นหลัง splicing onclick = "getli (นี่)"
เขียนมันที่ปลายด้านหน้า
ฟังก์ชั่น getli (obj) {var id = $ (obj) .attr ("id"); var text = $ (obj) .Text (); // คุณสามารถเขียน AJAX ผ่าน ID จังหวัดเพื่อรับข้อมูลของเมือง}จากนั้นได้รับรหัสข้อความของจังหวัดและข้อมูลของเมืองสามารถรับได้ผ่านเหตุการณ์การคลิก ID และข้อความที่โหลดเดียวกัน ข้อความที่ประกบไปที่ด้านบนของกล่องอินพุตเป็นผลลัพธ์สุดท้าย (สิ่งนี้ยังไม่ได้เขียนมันง่ายมากฉันไม่ต้องการเขียนเมื่อฉันมีการโจมตีมะเร็งขี้เกียจ) โดยวิธีการที่ข้อความข้างต้นได้รับการตั้งค่าเป็นอ่านอย่างเดียวอย่างเดียว เมื่อพูดถึงการอ่านอย่างเดียวเราต้องพูดคุยเกี่ยวกับความแตกต่างระหว่างการอ่านอย่างเดียวและปิดการใช้งาน ReadEnly นั้นใช้ได้เฉพาะกับกล่องอินพุตและกล่องป้อนข้อความหลายกล่องและรูปแบบข้อความจะไม่เปลี่ยนแปลง ปิดใช้งานการทดลองขั้นพื้นฐานที่มีองค์ประกอบทั้งหมด แต่ระวังความเข้ากันได้ แอตทริบิวต์ runat ถูกตั้งค่าในกล่องข้อความด้านบนเพื่ออำนวยความสะดวกพื้นหลัง. NET เพื่ออ่านข้อมูลโดยตรง