Los datos provinciales, municipales y del condado de la compañía son bastante terribles. Se utiliza para generar ID del sistema EHR para que coincida. Por ejemplo, la provincia de Fujian corresponde a ID 01211014AOP145, y la ciudad también corresponde a una identificación, y luego los distritos y los condados lo ignoran. Luego encontré un montón de complementos de recursos en línea. El sentimiento no era aplicable, así que decidí escribir uno yo mismo. Porque no sé cómo hacer la interfaz que es medio cubo de agua, que formatea, estilo y coincidencia de color. En silencio busqué a JD.com, Amazon, Taobao, Dangdang y otras personas sobre cómo se hicieron las provincias, ciudades y distritos. La imagen es la siguiente:
Finalmente, lo combiné en la siguiente figura:
Hablemos del código fuente sin muchas tonterías:
<style type = "text/css"> #divprocity {posición: absoluto; Ancho: 350px; Max-Alta: 220px; Altura: Auto; Pantalla: ninguno; borde: 1px sólido #d3d3d3; Índice Z: 100; desbordamiento: auto; desbordamiento-x: oculto; } .headmenu {altura: 34px; Antecedentes: #f6f6f6; margen: 0; relleno: 0; } .headmenu li {float: izquierda; Text-Align: Center; Ancho: 60px; Altura: 32px; Estilo de lista: Ninguno; Antecedentes: #f6f6f6; Línea de altura: 32px; tamaño de fuente: 13px; cursor: puntero; } .headmenu li.lidefault {fondo: #f60; Color: #fff; margen: 0; relleno: 0; } .lidiv1, .lidiv2 {altura: auto; Min-aguja: 30px; Top de borde: 2.5px Solid #F60; margen -top: -2px; } .lidiv3 {altura: auto; Min-aguja: 30px; MAX-HEGHT: 200px; Top de borde: 2px Solid #F60; margen -top: -2px; } .lidiv2, .lidiv3 {display: none; } .lidiv1 ul, .lidiv2 ul {Padding: 2px; margen: 0; claro: ambos; } .lidiv3 ul {Padding: 2px; margen: 0; claro: ambos; } .lidiv1 ul li, .lidiv2 ul li {float: izquierda; tamaño de fuente: 14px; Ancho: 60px; Alganche de línea: 180%; Estilo de lista: Ninguno; Color: #252525; margen: 0 4px; cursor: puntero; Text-Align: Center; } .lidiv3 ul li {float: izquierda; tamaño de fuente: 13px; Alganche de línea: 150%; Color: #252525; margen: 1px 3px; Estilo de lista: Ninguno; cursor: puntero; Text-Align: Center; } .lidiv1 ul li: hover, .lidiv2 ul li: hover, .lidiv3 ul li: hover {color: #8b51cb; cursor: puntero; Decoración de texto: ninguna; relleno: 0; Antecedentes: #ccc; } .btn_img1 {ancho: 20px; Align vertical: medio; margen-izquierda: -31px; borde: ninguno; Esquema: ninguno; Altura: 10px; cursor: puntero; Antecedentes: URL (Images/IMG_1.PNG) Centro central sin repetición; Índice Z: 10; } .btn_img2 {margen-izquierda: -31px; Botón de margen: 2px; Ancho: 20px; Altura: 10px; borde: ninguno; Esquema: ninguno; Align vertical: medio; cursor: puntero; Fondo: URL (Images/IMG_2.PNG) No Repeat Center Center; Índice Z: 10; } </style>Diseño de la página:
<EvIn> <title> Escalabilidad de los enlaces provinciales y municipales </title> <script type = "text/javascript" src = "scripts/jQuery-1.9.1.min.js"> </script> </head> <body> <label> seleccione si ir al extranjero: </etiqueta etiqueta <put type = "radio" name = "Radio1" Valor = "1" "/> nacional <pying Radio 4" Nombre "n. valor = "2" /> extranjero <Br /> <Br /> <label> Enlaces provinciales y municipales de consulta: < /etiqueta> <input type = "text" id = "txt_procity" onkeyup = "getcounty ()" readonly = "readonly" runat = "servidor" /> <input type = "bootle" id = "btnimg" name = "img1" "" oneCLick (") /><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>Fuzhou Fuzhou</li> <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> </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> 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> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> <li> Fuzhou </li> </div> <div> <p style = "Text-Align: Center; Color:#F60"> <strong> ¡Seleccione primero la provincia! </strong> </p> </div>guion:
<script type = "text/javaScript"> $ (documento) .Ready (function () {$ ('#Divprocity ul.headmenu li'). Click (function () {var index = $ (this) .index (); // Haga clic en el extranjero Inválido if (index == 2) {return False;}; $ (this) .AddClass ("LideFault"). $ (this) .val (); $ ('#btnimg'). attr ("nombre", "img1"); "Readonly"); var txt = $ ("input [id*= txt_procity]"); if (txt.val (). Trim () == "") {return false; } var altura = txt.height (); var x = txt.offset (). Top; var y = txt.offset (). izquierda; $ ('#Divprocity'). CSS ({Display: "Bloque", Izquierda: Y + "Px", Top: X + Height + 8 + "Px"}); $ ('#Divprocity ul.headmenu li'). Eq (2) .show (). CSS ("Ancho", "70px"). AddClass ("Lidefault"). Siblings (). Hid (); $ ('#Divprocity'). Children ('div'). Eq (2) .show (). Siblings ('div'). Hide (); $ ('#btnimg'). attr ("clase", "btn_img2"); $ ('#btnimg'). attr ("nombre", "img2"); // etiqueta la imagen del interruptor // código de consulta difusa var ss = "<ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fufuzhou prefectura </li> </ul>"; $ ('. lidiv3'). html (''); $ ('. lidiv3'). html (ss); } // Haga clic en el botón derecho en el inicio y en el extranjero para cargar la función ChangeImg () {var _SelectValue = $ ("Entrada: Checked [Nombre $ = Radio1]"). Val (); if (_SelectValue == "" || _SelectValue == Undefined) {alerta ("Por favor, seleccione si debe ir al extranjero primero!"); devolver falso; } var txt = $ ("input [id*= txt_procity]"); var altura = txt.height (); var x = txt.offset (). Top; var y = txt.offset (). izquierda; var name = $ ('#btnimg'). attr ("nombre"); if (name == "img1") {$ ('#btnimg'). attr ("class", "btn_img2"); $ ('#btnimg'). attr ("nombre", "img2"); $ ('#Divprocity'). CSS ({Display: "Bloque", Izquierda: Y + "Px", Top: X + Height + 8 + "Px"}); // 1 elementos del menú del panel de control nacional y 2 del panel de control Exhibición if (_SelectValue == 1) {$ ('#Divprocity UL.Headmenu Li'). Eq (2) .Hide (). Siblings (). Show (); $ ('#Divprocity'). Children ('Div'). Eq (0) .show (). Siblings ('div'). Hide (); } else {$ ('#Divprocity ul.headmenu li'). eq (2) .show (). css ("ancho", "70px"). addClass ("lidefault"). siblings (). hide (); $ ('#Divprocity'). Children ('div'). Eq (2) .show (). Siblings ('div'). Hide (); }} else {$ ('#btnimg'). attr ("class", "btn_img1"); $ ('#btnimg'). attr ("nombre", "img1"); $ ('#Divprocity'). CSS ("Display", "Ninguno"); }} </script>La lógica es elegir primero doméstico o extranjero. El triángulo es una imagen, no dibujada por el lienzo H5. Hay muchas de esas imágenes en Internet.
1. Utilizo el botón de tipo de entrada como contenedor de imágenes, pero ni siquiera puedo sacarlo con IMG (tal vez estoy riando). La entrada tiene un botón de estilo predeterminado clic en el borde azul exterior, elimine el contorno: ninguno; No lo escribas fuera de línea como yo
2. Siéntete a escribir de manera orientada al proceso, presione el triángulo para cargar toda la información, cambiar la imagen, hacer clic en la imagen y cerrarla. Alguna lógica en ella es expandirse libremente. Si no desea códigos extranjeros, elimine los códigos extranjeros y agregue provincias y ciudades similares para expandirse.
3. La carga dinámica de datos es, por ejemplo, el nombre de clase DIV correspondiente de la provincia es LIDIV1 y su estructura de caja
<div <ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fufuzhou </li> <li> fufuzhou </li> </ul> "; $ ('. lidiv3'). html (''); // clear $ ('. Lidiv3'). html (ss);Los datos dinámicos SS se pueden obtener a través de AJAX y atravesar a través de un recorrido de fondo.
var ss = <ul> <li id = "01211014aop145" onClick = "getli (this)"> Provincia de Fujian </li> </ul>
Por ejemplo, el siguiente es el método de escritura de .NET (no le importe si lo escribe bajo) y lo pase al front-end ajax para recibir el valor devuelto, y agregar directamente a $ ('. Lidiv3'). Html (ss); Para obtener datos dinámicos
if (ds! = null && ds.tables.count> 0 && ds.tables [0] .rows.count> 0) {strBuild.append ("<table id =/" conflicto/"class =/" Gridtable/"Cellspacing = '0'>"); //strbuild.appendformat("<tr><Div class =/"Dialogtitle1/"> " + Title3 +" </div> <tr> "); foreach (datarow dr en ds.tables [0] .rows) {strBuild.append ("<tr id = '" + dr ["valor"] + "' onMouseOver =/" this.bgcolor = '#faebd7'/"onMouseOut =/" this.bgcolor = '' '/"onclick =/" clickonworkplace (this)/">"); "); strBuild.AppEdFormat ("<TD> {0} </td>", dr ["name"]. toString ()); strBuild.append ("</tr>"); } strBuild.Append ("</table>"); }Obtenga los datos, haga clic en la provincia de Fujian para escribir un evento general de clic y el empalme de fondo onClick = "getLi (esto)"
Escríbelo en la parte delantera
función getLi (obj) {var id = $ (obj) .attr ("id"); var text = $ (obj) .Text (); // Puede escribir AJAX a través de la ID de provincia para obtener los datos de la ciudad}Luego, se obtiene la identificación de texto de la provincia y los datos de la ciudad se pueden obtener a través del evento de clic. La misma identificación y texto cargados. El empalme de texto a la parte superior del cuadro de entrada es el resultado final (esto aún no se ha escrito, es muy simple, no quiero escribirlo cuando tengo ataques de cáncer perezoso). Por cierto, el texto anterior se ha establecido en lectura de solo lectura. Cuando se trata de solo lectura, tenemos que hablar sobre la diferencia entre Readonly y discapacitado. Readonly solo es válido para cuadros de entrada y múltiples cuadros de entrada de texto, y el estilo de texto no se cambiará. prueba básica deshabilitada con todos los elementos, pero tenga en cuenta su compatibilidad. El atributo runat se establece en el cuadro de texto anterior para facilitar el fondo de .NET para leer los datos directamente.