Die Daten der Provinz-, Gemeinde- und Landkreisdaten des Unternehmens sind ziemlich schrecklich. Es wird verwendet, um IDs aus dem nachgiebigen EHR -System zu generieren. Beispielsweise entspricht die Provinz Fujian ID 01211014AOP145, und die Stadt entspricht ebenfalls einer ID, und dann ignorieren die Bezirke und Landkreise. Dann fand ich eine Reihe von Ressourcen-Plug-Ins online. Das Gefühl war nicht anwendbar, also habe ich mich entschlossen, selbst einen zu schreiben. Weil ich nicht weiß, wie ich die Schnittstelle zu einem halben Eimer Wasser erstellen kann, das Format, Stil und Farbanpassung ist. Ich suchte schweigend nach JD.com, Amazon, Taobao, Dangdang und anderen Menschen darüber, wie die Provinzen, Städte und Distrikte gemacht wurden. Das Bild lautet wie folgt:
Schließlich habe ich es in die folgende Abbildung kombiniert:
Lassen Sie uns ohne viel Unsinn über den Quellcode sprechen:
<style type = "text/css"> #divProcity {Position: absolut; Breite: 350px; MAX-Hoch: 220px; Höhe: Auto; Anzeige: Keine; Grenze: 1PX Solid #D3D3D3; Z-Index: 100; Überlauf: Auto; Überlauf-X: versteckt; } .headMenu {Höhe: 34px; Hintergrund: #f6f6f6; Rand: 0; Polsterung: 0; } .headmenu li {float: links; Text-Align: Mitte; Breite: 60px; Höhe: 32px; Listenstil: Keine; Hintergrund: #f6f6f6; Zeilenhöhe: 32px; Schriftgröße: 13px; Cursor: Zeiger; } .headMenu li.lidefault {Hintergrund: #f60; Farbe: #fff; Rand: 0; Polsterung: 0; } .lidiv1, .lidiv2 {Höhe: auto; min-hohe: 30px; Randtop: 2,5px fest #f60; Rand: -2px; } .lidiv3 {Höhe: Auto; min-hohe: 30px; Max-Höhe: 200px; Grenze: 2px fester #f60; Rand: -2px; } .lidiv2, .lidiv3 {display: keine; } .lidiv1 ul, .lidiv2 ul {padding: 2px; Rand: 0; klar: beides; } .lidiv3 ul {padding: 2px; Rand: 0; klar: beides; } .lidiv1 ul li, .lidiv2 ul li {float: links; Schriftgröße: 14px; Breite: 60px; Linienhöhe: 180%; Listenstil: Keine; Farbe: #252525; Rand: 0 4px; Cursor: Zeiger; Text-Align: Mitte; } .lidiv3 ul li {float: links; Schriftgröße: 13px; Linienhöhe: 150%; Farbe: #252525; Rand: 1px 3px; Listenstil: Keine; Cursor: Zeiger; Text-Align: Mitte; } .lidiv1 ul li: hover, .lidiv2 ul li: hover,. Cursor: Zeiger; Textdekoration: Keine; Polsterung: 0; Hintergrund: #CCC; } .btn_img1 {width: 20px; vertikaler Align: Mitte; Rand-Links: -31px; Grenze: Keine; Umriss: Keine; Höhe: 10px; Cursor: Zeiger; Hintergrund: URL (Bilder/img_1.png) No-Repeat Center; Z-Index: 10; } .BTN_IMG2 {Margin-Links: -31px; Randboden: 2px; Breite: 20px; Höhe: 10px; Grenze: Keine; Umriss: Keine; vertikaler Align: Mitte; Cursor: Zeiger; Hintergrund: URL (Bilder/img_2.png) No-Repeat Center; Z-Index: 10; } </style>Seitenlayout:
<Head> <title> Skalierbarkeit von Provinz- und Gemeindeverknüpfungen </title> <script type = "text/javaScript" src = "scripts/jQuery-1.9.1.min.js"> </head> </head> <Body> <Label>, ob ins Ausland gehen soll: </label> <Eingabe-Typ = "Radio". name="radio1" value="2" />Foreign<br /><br /> <label>Query provincial and municipal linkages: </label> <input type="text" id="txt_proCity" onkeyup="GetOutCounty()" readonly="readonly" runat="server" /> <input type="button" id="btnImg" name="img1" onclick="changeImg()" /><br /> <label>Show location: </label><br /> <div id="divProCity"> <ul> <li>Province</li> <li>City</li> [html] view plain copy<li>Foreign</li> </ul> <div> <ul> <li>Fuzhou Fuzhou</li> <li>Fuzhou Fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> <li> <li> <li> fuzhou fuzhou </li> <li> fujian </li> <li> anhui </li> <li> fuzhou </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>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> </div> <div> <p style = "text-align: center; color:#f60"> <strong> Bitte wählen Sie zuerst die Provinz! </strong> </p> </div>
Skript:
<script type = "text/javaScript"> $ (document) .ready (function () {$ ('#divprocity ul.headmenu li'). click (function () {var index = $ (this) .Index (); // Klicken Sie im Ausland ungültig, wenn (INDEX == 2) {false;} return;}} return;} $ (this) .AddClass ("lideFault"). = $ (this) .val (); $ ('#btnimg'). Attr ("Name", "img1"); "Readonly"); 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 (). $ ('#divprocity'). $ ('#Divprocity ul.headmenu li'). EQ (2) .show (). CSS ("Breite", "70px"). $ ('#Divprocity'). Kinder ('div'). EQ (2) .show (). Geschwister ('div'). hide (); $ ('#btnimg'). attr ("Klasse", "btn_img2"); $ ('#btnimg'). Attr ("Name", "img2"); // markieren Sie das Switch -Bild // Fuzzy Query -zugeordneter Code var ss = "<ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> $ ('. lidiv3'). html (''); $ ('. LIDIV3'). HTML (SS); } // Klicken Sie im In- und Ausland auf die rechte Schaltfläche, um die Funktion änderung () {var _selectValue = $ ("Eingabe: Checked [Name $ = radio1]"). Val () zu laden; if (_SelectValue == "" || _SelectValue == undefined) {alert ("Bitte wählen Sie, ob Sie zuerst ins Ausland gehen sollen!"); false zurückgeben; } var txt = $ ("input [id*= txt_procity]"); var height = txt.height (); var x = txt.offset (). top; var y = txt.offset (). var name = $ ('#btnimg'). attr ("name"); if (name == "img1") {$ ('#btnimg'). attr ("Klasse", "btn_img2"); $ ('#btnimg'). Attr ("Name", "img2"); $ ('#divprocity'). // 1 Inländische und 2 Menüpunkte für fremde Kontrollpanel anzeigen if (_SelectValue == 1) {$ ('#Divprocity ul.headmenu li'). Gl (2) .hide (). Geschwister (). Show (); $ ('#Divprocity'). Kinder ('div'). EQ (0) .show (). Geschwister ('div'). hide (); } else {$ ('#divprocity ul.headmenu li'). EQ (2) .show (). CSS ("width", "70px"). $ ('#Divprocity'). Kinder ('div'). EQ (2) .show (). Geschwister ('div'). hide (); }} else {$ ('#btnimg'). attr ("class", "btn_img1"); $ ('#btnimg'). Attr ("Name", "img1"); $ ('#Divprocity'). CSS ("Display", "None"); }} </script>Die Logik besteht darin, zuerst inländische oder fremde auszuwählen. Das Dreieck ist ein Bild, das nicht von H5 -Leinwand gezeichnet wird. Es gibt viele solcher Bilder im Internet.
1. Ich benutze den Eingabetyp -Taste als Bildbehälter, aber ich kann ihn nicht einmal mit IMG herausholen (vielleicht bewässere ich). Die Eingabe -Schaltfläche für Standardstil. Klicken Sie auf den blauen Rand draußen und entfernen Sie den Umriss: Keine; Schreiben Sie es nicht wie ich aus der Linie
2. Lust auf die prozessorientierte Art und Weise, drücken Sie das Dreieck, um alle Informationen zu laden, das Bild zu wechseln, auf das Bild zu klicken und zu schließen. Einige Logik darin besteht darin, sich frei zu erweitern. Wenn Sie keine fremden Codes möchten, ausländische Codes löschen und ähnliche Provinzen und Städte hinzufügen, um zu expandieren.
3. Die dynamische Belastung von Daten ist beispielsweise der entsprechende Name der Div -Klasse der Provinz Lidiv1 und seine Boxstruktur
<div <ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fufuzhou </li> <li> fufuzhou </li> </ul> ";
Dynamische Daten SS können durch Ajax erhalten und durch Hintergrundquellen durchquert werden.
var
Beispielsweise ist Folgendes die Schreibmethode von .NET (nichts dagegen, wenn Sie es niedrig schreiben) und an den Front-End-Ajax weitergeben, um den zurückgegebenen Wert zu erhalten, und direkt an $ ('. LIDIV3'). HTML (SS) anhängen; Dynamische Daten zu erhalten
if (ds! //strbuild.AppendFormat("<TR><DIV class =/"DialogTitle1/"> " + title3 +" </div> <tr> "); foreach (datarow dr in ds.tables [0] .rows) {strbuild.Append ("<tr id = '" + dr ["value"] + "' onmouseover =/" this.bgcolor = '#faebd7'/"onmouseout =/" this.bgcolor = '/"aufclick =/": " strbuild.appendformat ("<td> {0} </td>", dr ["name"]. toString ()); Strbuild.Append ("</tr>"); } Strbuild.Append ("</table>"); }Holen Sie sich die Daten, klicken Sie auf die Provinz Fujian, um ein allgemeines Klick -Ereignis zu schreiben, und das Hintergrund spleißen auf. "Getli (this)" "
Schreiben Sie es am vorderen Ende
Funktion getli (obj) {var id = $ (obj) .attr ("id"); var text = $ (obj) .Text (); // Sie können Ajax über die Provinz -ID schreiben, um die Daten der Stadt zu erhalten.}Anschließend wird die Text -ID der Provinz erhalten, und die Daten der Stadt können über das Click -Ereignis erhalten werden. Die gleiche geladene ID und Text. Der Textspleißen an der Oberseite des Eingangsfelds ist das Endergebnis (dies wurde noch nicht geschrieben, es ist sehr einfach, ich möchte es nicht schreiben, wenn ich faule Krebsangriffe habe). Übrigens wurde der obige Text auf schreibgeschützte Readonly festgelegt. Wenn es um schreibgeschützte ist, müssen wir über den Unterschied zwischen Readonly und Behinderten sprechen. Readonly gilt nur für Eingabefelder und mehrere Texteingangsfelder, und der Textstil wird nicht geändert. Deaktivierte grundlegende Studie mit allen Elementen, ist sich jedoch seiner Kompatibilität bewusst. Das Runat -Attribut wird im Textfeld oben festgelegt, um den .NET -Hintergrund zum direkten Lesen von Daten zu erleichtern.