Data provinsi, kota, dan kabupaten perusahaan cukup mengerikan. Ini digunakan untuk menghasilkan ID dari sistem EHR yang cocok. Misalnya, Provinsi Fujian sesuai dengan ID 01211014AOP145, dan kota ini juga sesuai dengan ID, dan kemudian kabupaten dan kabupaten mengabaikannya. Kemudian saya menemukan banyak plug-in sumber daya online. Perasaan itu tidak berlaku, jadi saya memutuskan untuk menulis sendiri. Karena saya tidak tahu cara membuat antarmuka yang setengah ember air, yang format, gaya, dan pencocokan warna. Saya diam -diam mencari JD.com, Amazon, Taobao, Dangdang dan orang lain tentang bagaimana provinsi, kota, dan distrik dilakukan. Gambarnya adalah sebagai berikut:
Akhirnya, saya menggabungkannya ke gambar berikut:
Mari kita bicara tentang kode sumber tanpa banyak omong kosong:
<style type = "text/css"> #divProcity {position: absolute; Lebar: 350px; Max-Height: 220px; Tinggi: otomatis; Tampilan: Tidak Ada; Perbatasan: 1px Solid #D3D3D3; z-index: 100; meluap: otomatis; overflow-x: tersembunyi; } .headmenu {height: 34px; Latar belakang: #f6f6f6; Margin: 0; Padding: 0; } .headmenu li {float: left; Teks-Align: tengah; Lebar: 60px; Tinggi: 32px; List-style: tidak ada; Latar belakang: #f6f6f6; Line-Height: 32px; font-size: 13px; kursor: pointer; } .headmenu li.lidefault {latar belakang: #f60; Warna: #fff; Margin: 0; Padding: 0; } .lidiv1, .lidiv2 {height: auto; Min-Height: 30px; Border-Top: 2.5px Solid #F60; margin -top: -2px; } .lidiv3 {height: auto; Min-Height: 30px; Max-Height: 200px; Border-top: 2px solid #f60; margin -top: -2px; } .lidiv2, .lidiv3 {display: none; } .lidiv1 ul, .lidiv2 ul {padding: 2px; Margin: 0; jelas: keduanya; } .lidiv3 ul {padding: 2px; Margin: 0; jelas: keduanya; } .lidiv1 ul li, .lidiv2 ul li {float: left; Ukuran font: 14px; Lebar: 60px; Line-Height: 180%; List-style: tidak ada; Warna: #252525; margin: 0 4px; kursor: pointer; Teks-Align: tengah; } .lidiv3 ul li {float: left; font-size: 13px; Line-Height: 150%; Warna: #252525; margin: 1px 3px; List-style: tidak ada; kursor: pointer; Teks-Align: tengah; } .lidiv1 ul li: hover, .lidiv2 ul li: hover, .lidiv3 ul li: hover {color: #8b51cb; kursor: pointer; Dekorasi Teks: Tidak Ada; Padding: 0; Latar Belakang: #CCC; } .btn_img1 {width: 20px; Vertikal-Align: tengah; margin-kiri: -31px; Perbatasan: Tidak Ada; Garis Besar: Tidak Ada; Tinggi: 10px; kursor: pointer; Latar belakang: URL (gambar/img_1.png) No-Repeat Center Center; z-index: 10; } .btn_img2 {margin-left: -31px; margin-bottom: 2px; Lebar: 20px; Tinggi: 10px; Perbatasan: Tidak Ada; Garis Besar: Tidak Ada; Vertikal-Align: tengah; kursor: pointer; Latar belakang: URL (gambar/img_2.png) No-Repeat Center Center; z-index: 10; } </style>Tata letak halaman:
<head> <title>Scalability of provincial and municipal linkages</title> <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script> </head> <body> <label>Select whether to go abroad: </label> <input type="radio" name="radio1" value="1" />Domestic<input type="radio" name = "Radio1" value = "2" /> asing <br /> <br /> <label> kueri tautan provinsi dan kotamadya: < /label> <input type = "text" id = "txt_procity" onkeyup = "getoutcounty ()" readOnly = "readonly" runat = "server" /<"input =" "ID" BUXT "BUXT" BUXT "RUNeNLY" RUNAT = "Server" /<"IDPUITY =" "ID" "READONLY =" READONLY "RUNAT =" Server " OnClick = "ChangeImg ()"/> <r br/> <label> Tampilkan lokasi: </babel> <br/> <v id = "divrocity"> <ul> <li> provinsi </li> <li> Kota </li> [html] Salin Plain <li> Liu </li> </ul> <v div> <ul> <li> <li> Fuzu <li> </li> </ul> <v Div> <ul> <li> <li> Fuzo </Li> </li> </ul> <v div> <ul> <li> <li> Fuzu <li> </li> </ul> <v Div> <ul> <li> <li> Fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <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> <li> <li> <li> fuzhou </li> <li> <li> <li> <li> fuzhou </li> <li> <li> <li> <li> fuzhou </li> <li> <li> <li> <li> fuzhou </li> <li> <li> <li> <li> fuzhou </li> <li> <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> <li> </li> <li> Fuzhou </li> <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> <li> </li> <li> Fuzhou </li> <li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> </div> <piv> <p style = "Text-Align: Center; Color:#f60"> <Strong> Silakan pilih provinsi terlebih dahulu! </strong> </p> </div>
naskah:
<script type = "text/javascript"> $ (document) .ready (function () {$ ('#divrocity ul.headmenu li'). Klik (function () {var index = $ (this) .index (); // klik di luar negeri tidak valid if (index == 2) {return false;} $ (ini) .addClass ("lidefault"). = $ (ini) .val (); $ ('#btnimg'). attr ("name", "img1"); "ReadOnly");}}) // Fungsi kueri penuh getOutCounty () {// Border: 1px solid #d3d3d3; latar belakang: #f6f6f6; latar belakang warna alternatif: #f7f7f7; var txt = $ ("input [id*= txt_procity]"); if (txt.val (). trim () == "") {return false; } var height = txt.height (); var x = txt.offset (). Top; var y = txt.offset (). Kiri; $ ('#DivProcity'). CSS ({display: "block", kiri: y + "px", atas: x + tinggi + 8 + "px"}); $ ('#DivProcity ul.headmenu li'). Eq (2) .show (). CSS ("lebar", "70px"). AddClass ("lidefault"). Siblings (). Hide (); $ ('#DivProcity'). Anak -anak ('Div'). Eq (2) .show (). $ ('#btnimg'). attr ("class", "btn_img2"); $ ('#btnimg'). attr ("name", "img2"); // Tandai gambar sakelar // kode terkait kueri fuzzy var ss = "<ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> Prefektur fufuzhou </li> </ul>"; $ ('. lidiv3'). html (''); $ ('. lidiv3'). html (ss); } // Klik tombol kanan di rumah dan di luar negeri untuk memuat fungsi gantiMg () {var _selectValue = $ ("Input: diperiksa [Nama $ = Radio]"). Val (); if (_selectValue == "" || _SelectValue == tidak ditentukan) {alert ("Pilih apakah akan pergi ke luar negeri terlebih dahulu!"); mengembalikan false; } var txt = $ ("input [id*= txt_procity]"); var height = txt.height (); var x = txt.offset (). Top; var y = txt.offset (). Kiri; var name = $ ('#btnimg'). attr ("name"); if (name == "img1") {$ ('#btnimg'). attr ("class", "btn_img2"); $ ('#btnimg'). attr ("name", "img2"); $ ('#DivProcity'). CSS ({display: "block", kiri: y + "px", atas: x + tinggi + 8 + "px"}); // 1 Item Menu Panel Kontrol Domestik dan Luar Negeri ditampilkan jika (_SelectValue == 1) {$ ('#DivProcity ul.headmenu li'). EQ (2) .Hide (). SIBLINGS (). Show (); $ ('#DivProcity'). Anak -anak ('Div'). Eq (0) .show (). Siblings ('Div'). Hide (); } else {$ ('#DivProcity ul.headmenu li'). eq (2) .show (). css ("width", "70px"). addClass ("lidefault"). Siblings (). hide (); $ ('#DivProcity'). Anak -anak ('Div'). Eq (2) .show (). }} else {$ ('#btnimg'). attr ("class", "btn_img1"); $ ('#btnimg'). attr ("name", "img1"); $ ('#DivProcity'). CSS ("display", "none"); }} </script>Logikanya adalah memilih domestik atau asing terlebih dahulu. Segitiga adalah gambar, tidak digambar oleh kanvas H5. Ada banyak gambar seperti itu di internet.
1. Saya menggunakan tombol tipe input sebagai wadah gambar, tetapi saya bahkan tidak bisa mengeluarkannya dengan IMG (mungkin saya menyiram). Input memiliki tombol gaya default klik pada perbatasan biru di luar, hapus garis besar: tidak ada; Jangan menulisnya di luar seperti saya
2. Merasa seperti menulis dengan cara yang berorientasi pada proses, tekan segitiga untuk memuat semua informasi, beralih gambar, klik gambar dan tutup. Beberapa logika di dalamnya adalah berkembang dengan bebas. Jika Anda tidak ingin kode asing, hapus kode asing, dan tambahkan provinsi dan kota serupa untuk berkembang.
3. Pemuatan Data Dinamis Misalnya, nama kelas Div yang sesuai dari provinsi adalah LIDIV1, dan struktur kotaknya
<Div <ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fufuzhou </li> <li> fufuzhou </li> </ul> "; $ ('.Data Dynamic SS dapat diperoleh melalui AJAX dan dilintasi melalui latar belakang traversal.
var ss = <ul> <li id = "01211014aop145" onclick = "getli (this)"> provinsi fujian </li> </ul>
Misalnya, berikut ini adalah metode penulisan .NET (jangan keberatan jika Anda menulisnya rendah) dan meneruskannya ke front-end AJAX untuk menerima nilai yang dikembalikan, dan secara langsung ditambahkan ke $ ('. LIDIV3'). HTML (SS); Untuk mendapatkan data dinamis
if (ds! = null && ds.tables.count> 0 && ds.tables [0] .rows.count> 0) {strbuild.append ("<tabel id =/" sasaran/"class =/" gridtable/"cellspacing = '0'>"); //strbuild.appendFormat("<tr><div class =/"dialogTitle1/"> " + title3 +" </div> <tr> "); foreach (datarow dr di ds.tables [0] .rows) {strbuild.append ("<tr id = '" + dr ["value"] + "' onmouseover =/" this.bgcolor = '#faebd7'/"onMouseout =/" this.bgcolor = ''/"/" OnMouseOut =/"this.bgcolor = ''/"/"" "" strbuild.appendFormat ("<td> {0} </td>", dr ["name"]. ToString ()); strbuild.append ("</tr>"); } strbuild.append ("</boable>"); }Dapatkan data, klik Provinsi Fujian untuk menulis acara klik umum, dan latar belakang splicing onClick = "getli (ini)"
Tulis di ujung depan
fungsi getli (obj) {var id = $ (obj) .attr ("id"); var text = $ (obj) .text (); // Anda dapat menulis Ajax melalui ID provinsi untuk mendapatkan data kota}Kemudian, ID teks provinsi diperoleh, dan data kota dapat diperoleh melalui acara klik. ID dan teks yang dimuat yang sama. Penyambungan teks ke bagian atas kotak input adalah hasil akhir (ini belum ditulis, sangat sederhana, saya tidak ingin menulisnya ketika saya mengalami serangan kanker malas). Ngomong-ngomong, teks di atas telah diatur ke ready-only hanya. Ketika datang ke read-only, kita harus berbicara tentang perbedaan antara readitly dan dinonaktifkan. ReadOnly hanya valid untuk kotak input dan beberapa kotak input teks, dan gaya teks tidak akan diubah. Uji coba dasar yang dinonaktifkan dengan semua elemen, tetapi waspadai kompatibilitasnya. Atribut RUNAT diatur dalam kotak teks di atas untuk memfasilitasi latar belakang .NET untuk membaca data secara langsung.