Les données provinciales, municipales et du comté de l'entreprise sont assez terribles. Il est utilisé pour générer des ID à partir du système DSE à correspondre. Par exemple, la province du Fujian correspond à l'ID 01211014AOP145, et la ville correspond également à un ID, puis les districts et les comtés l'ignorent. Ensuite, j'ai trouvé un tas de plug-ins de ressources en ligne. Le sentiment n'était pas applicable, alors j'ai décidé d'en écrire un moi-même. Parce que je ne sais pas comment faire l'interface qui est un demi-seau d'eau, quel format, style et correspondance des couleurs. J'ai recherché silencieusement JD.com, Amazon, Taobao, Dangdang et d'autres personnes sur la façon dont les provinces, les villes et les districts ont été réalisés. L'image est la suivante:
Enfin, je l'ai combiné dans la figure suivante:
Parlons du code source sans trop non-sens:
<style type = "text / css"> #divprocity {position: absolu; Largeur: 350px; max-height: 220px; Hauteur: Auto; Affichage: aucun; Border: 1px solide # d3d3d3; Z-Index: 100; débordement: auto; Overflow-X: Hidden; } .headMenu {hauteur: 34px; Contexte: # f6f6f6; marge: 0; rembourrage: 0; } .headmenu li {float: gauche; Texte-aligne: Centre; Largeur: 60px; hauteur: 32px; Style de liste: aucun; Contexte: # f6f6f6; hauteur de ligne: 32px; taille de police: 13px; curseur: pointeur; } .headmenu li.lidefault {background: # f60; Couleur: #FFF; marge: 0; rembourrage: 0; } .lidiv1, .lidiv2 {hauteur: auto; Min-Height: 30px; Border-top: 2,5px solide # f60; marge: -2px; } .lidiv3 {hauteur: auto; Min-Height: 30px; max-height: 200px; Border-top: 2px solide # f60; marge: -2px; } .lidiv2, .lidiv3 {affichage: aucun; } .lidiv1 ul, .lidiv2 ul {padding: 2px; marge: 0; Clear: les deux; } .lidiv3 ul {padding: 2px; marge: 0; Clear: les deux; } .lidiv1 ul li, .lidiv2 ul li {float: gauche; taille de police: 14px; Largeur: 60px; hauteur de ligne: 180%; Style de liste: aucun; Couleur: # 252525; marge: 0 4px; curseur: pointeur; Texte-aligne: Centre; } .lidiv3 ul li {float: gauche; taille de police: 13px; hauteur de ligne: 150%; Couleur: # 252525; marge: 1px 3px; Style de liste: aucun; curseur: pointeur; Texte-aligne: Centre; } .lidiv1 ul li: hover, .lidiv2 ul li: hover, .lidiv3 ul li: hover {couleur: # 8b51cb; curseur: pointeur; Décoration du texte: aucune; rembourrage: 0; Contexte: #ccc; } .btn_img1 {width: 20px; Adigne vertical: milieu; marge-gauche: -31px; Border: aucun; Aperçu: aucun; hauteur: 10px; curseur: pointeur; Contexte: URL (images / img_1.png) Centre de centre sans répétition; Z-Index: 10; } .btn_img2 {margin-left: -31px; marge-fond: 2px; Largeur: 20px; hauteur: 10px; Border: aucun; Aperçu: aucun; Adigne vertical: milieu; curseur: pointeur; Contexte: URL (images / img_2.png) Centre central sans répétition; Z-Index: 10; } </ style>Disposition de la page:
<A-Head> <Title> Évolutivité des liens provinciaux et municipaux </ title> <Script Type = "Text / JavaScript" Src = "Scripts / jQuery-1.9.1.1.min.js"> </ script> </ head> <body> <label> Sélectionnez s'il faut aller à l'étranger: </ label> <entrée type = "radio" name = "radio1" value = "1" 1 "/> domestique = TYPE =" Radio = "Name =" Radio1 "Value =" 1 "/> Domestic = Type =" Radio = "Name =" Radio1 "Value =" 1 "/> Domestic = Domestique name = "radio1" value = "2" /> étranger <r /> <br /> <bouline> requête des liens provinciaux et municipaux: </ label> <entrée type = "text" id = "txt_procity" onkeyup = "getOutCounty ()" readonly = "readonly" runat = "server" /> <entrée = "bouton" id = "btnimg" name = "iMg1" iMg1 " onclick = "ChangeImg ()" /> <br /> <bablow> Afficher l'emplacement: </ label> <br /> <div id = "Divprocity"> <ul> <li> Province </li> <li> City </li> [html] Copie ordinaire <li> Afforeux </li> </ul> <iv> <ul> <li> Fuzhou Fuzhou </li> <li> Fuzho 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> FUZHOU <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> <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> Veuillez sélectionner la province d'abord! </strong> </p> </div>
scénario:
<script type = "text / javascript"> $ (document) .ready (function () {$ ('# divprocity ul.headMenu li'). cliquez (function () {var index = $ (this) .index (); // cliquez à l'étranger invalide si (index == 2) {return false;} $. = $ (this) .val (); $ ('# btnimg'). att (name "," img1 "); "ReadOnly");}}) // Fonction de requête complète GetOutCounty () {// Border: 1Px solide # d3d3d3; arrière-plan: # f6f6f6; fond de couleur 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 (). Left; $ ('# DivProcity'). CSS ({affichage: "Block", gauche: y + "px", top: x + hauteur + 8 + "px"}); $ ('# Divprocity ul.headMenu li'). Eq (2) .show (). CSS ("Width", "70px"). AddClass ("lidefault"). Sibllings (). Hide (); $ ('# Divprocity'). Enfants ('div'). Eq (2) .show (). Sœurs ('div'). Hide (); $ ('# btnimg'). attr ("class", "btn_img2"); $ ('# btnimg'). attr ("name", "img2"); // Tag The Switch Image // Fuzzy Query Code associé var ss = "<ul> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fufuzhou Prefecture </li> </ul>"; $ ('. lidiv3'). html (''); $ ('. lidiv3'). html (ss); } // Cliquez sur le bouton droit de la maison et de l'étranger pour charger la fonction modique () {var _SelectValue = $ ("Input: checked [name $ = radio1]"). Val (); if (_SelectValue == "" || _SelectValue == Undefined) {alert ("Veuillez sélectionner s'il faut aller à l'étranger en premier!"); retourne false; } var txt = $ ("input [id * = txt_procity]"); var height = txt.height (); var x = txt.offset (). top; var y = txt.offset (). Left; var name = $ ('# btnimg'). attr ("name"); if (name == "img1") {$ ('# btnimg'). att ("class", "btn_img2"); $ ('# btnimg'). attr ("name", "img2"); $ ('# DivProcity'). CSS ({affichage: "Block", gauche: y + "px", top: x + hauteur + 8 + "px"}); // 1 Éléments de menu du panneau de configuration domestiques et 2 Affichage des panneaux If (_SelectValue == 1) {$ ('# Divprocity ul.headMenu li'). Eq (2) .Hide (). Siles (). Show (); $ ('# Divprocity'). Enfants ('div'). Eq (0) .show (). SILLINGS ('div'). Hide (); } else {$ ('# divprocity ul.headmenu li'). eq (2) .show (). css ("width", "70px"). addClass ("lidefault"). silets (). hide (); $ ('# Divprocity'). Enfants ('div'). Eq (2) .show (). Sœurs ('div'). Hide (); }} else {$ ('# btnimg'). att ("class", "btn_img1"); $ ('# btnimg'). attr ("name", "img1"); $ ('# divprocity'). CSS ("affichage", "aucun"); }} </ script>La logique est de choisir d'abord national ou étranger. Le triangle est une image, non dessinée par la toile H5. Il existe de nombreuses photos de ce type sur Internet.
1. J'utilise le bouton de type d'entrée comme conteneur d'image, mais je ne peux même pas le sortir avec IMG (peut-être que j'arroser). L'entrée a le bouton de style par défaut cliquez sur la bordure bleue à l'extérieur, supprimez le contour: aucun; Ne l'écrivez pas en ligne comme moi
2. Ayez envie d'écrire de manière orientée vers le processus, appuyez sur le triangle pour charger toutes les informations, changez l'image, cliquez sur l'image et fermez-la. Une certaine logique est de se développer librement. Si vous ne voulez pas de codes étrangers, supprimez les codes étrangers et ajoutez des provinces et des villes similaires pour se développer.
3. Le chargement dynamique des données est par exemple, le nom de classe Div correspondant de la province est lidiv1 et sa structure de boîte
<div <ul> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> fufuzhou </li> <li> fufuzhou </li> </ul> "; $ ('. lidiv3'). html (''); // clear $ ('. lidiv3').Les données dynamiques SS peuvent être obtenues via AJAX et traversées par la traversée de fond.
var ss = <ul> <li id = "01211014aop145" onclick = "getli (this)"> province du Fujian </li> </ul>
Par exemple, ce qui suit est la méthode d'écriture de .NET (ne vous dérangez pas si vous l'écrivez bas) et la transmettez à l'Ajax frontal pour recevoir la valeur retournée, et ajoutez directement à $ ('. Lidiv3'). Html (ss); Pour obtenir des données dynamiques
if (ds! = null && ds.tables.Count> 0 && ds.tables [0] .Rows.Count> 0) {strBuild.APPEND ("<Table Id = /" T: "class = /" gridTable / "CellSpacing = '0'>"); //strbuild.appendFormat("<tr><Div class = / "dialogTitle1 /"> "+ title3 +" </div> <tr> "); foreach (datarow dr dans ds.tables [0] .Rows) {strBuild.append ("<tr id = '" + dr ["valeur"] + "' onMouseOver = /" this.bgcolor = '# faebd7' / "onMouseout = /" this.bgColor = '' / "onClick = /" ClickOnworkWorkplace (this) / "); strBuild.ApendFormat ("<Td> {0} </td>", dr ["name"]. toString ()); strBuild.append ("</tr>"); } strBuild.APPEND ("</pally>"); }Obtenez les données, cliquez sur la province du Fujian pour écrire un événement de clic général et l'arrière-plan épissant onclick = "getli (this)"
Écrivez-le sur le front
fonction getli (obj) {var id = $ (obj) .attr ("id"); var text = $ (obj) .text (); // Vous pouvez écrire Ajax via l'ID de la province pour obtenir les données de la ville}Ensuite, l'ID texte de la province est obtenu et les données de la ville peuvent être obtenues via l'événement de clic. Le même ID et le même texte chargés. Le texte épissant en haut de la boîte d'entrée est le résultat final (cela n'a pas encore été écrit, c'est très simple, je ne veux pas l'écrire lorsque j'ai des attaques de cancer paresseuses). Soit dit en passant, le texte ci-dessus a été défini en lecture seule. En ce qui concerne la lecture seule, nous devons parler de la différence entre Readonly et Disabled. ReadOnly n'est valide que pour les boîtes d'entrée et plusieurs boîtes de saisie de texte, et le style de texte ne sera pas modifié. Essai de base handicapé avec tous les éléments, mais soyez conscient de sa compatibilité. L'attribut Runat est défini dans la zone de texte ci-dessus pour faciliter l'arrière-plan .NET pour lire directement les données.