Os dados provinciais, municipais e municipais da empresa são terríveis. É usado para gerar IDs a partir do sistema EHR para corresponder. Por exemplo, a província de Fujian corresponde a ID 01211014AOP145, e a cidade também corresponde a um ID e, em seguida, os distritos e condados o ignoram. Então eu encontrei um monte de plug-ins de recursos online. O sentimento não era aplicável, então decidi escrever um. Porque não sei como fazer a interface que é meio balde de água, que formato, estilo e correspondência de cores. Eu silenciosamente procurei por JD.com, Amazon, Taobao, Dangdang e outras pessoas sobre como as províncias, cidades e distritos foram feitos. A imagem é a seguinte:
Finalmente, combinei -o na figura a seguir:
Vamos falar sobre o código -fonte sem muita bobagem:
<style type = "text/css"> #divprocity {position: absoluta; Largura: 350px; Max-Hight: 220px; Altura: Auto; Exibir: Nenhum; borda: 1px sólido #d3d3d3; Index z: 100; Overflow: Auto; Overflow-x: Hidden; } .HeadMenu {Hight: 34px; Antecedentes: #f6f6f6; margem: 0; preenchimento: 0; } .HeadMenu li {float: esquerda; Alinhamento de texto: centro; Largura: 60px; Altura: 32px; estilo de lista: nenhum; Antecedentes: #f6f6f6; altura da linha: 32px; Size da fonte: 13px; Cursor: Ponteiro; } .HeadMenu li.lidefault {background: #f60; Cor: #FFF; margem: 0; preenchimento: 0; } .lidiv1, .lidiv2 {altura: auto; Min-altura: 30px; Top de borda: 2,5px Solid #F60; Margin -top: -2px; } .lidiv3 {altura: auto; Min-altura: 30px; Max-Hight: 200px; Top de borda: 2px sólido #f60; Margin -top: -2px; } .lidiv2, .lidiv3 {display: Nenhum; } .lidiv1 ul, .lidiv2 ul {preenchimento: 2px; margem: 0; claro: ambos; } .lidiv3 ul {preenchimento: 2px; margem: 0; claro: ambos; } .lidiv1 ul li, .lidiv2 ul li {float: esquerda; Size da fonte: 14px; Largura: 60px; altura de linha: 180%; estilo de lista: nenhum; Cor: #252525; margem: 0 4px; Cursor: Ponteiro; Alinhamento de texto: centro; } .lidiv3 ul li {float: esquerda; Size da fonte: 13px; altura da linha: 150%; Cor: #252525; margem: 1px 3px; estilo de lista: nenhum; Cursor: Ponteiro; Alinhamento de texto: centro; } .lidiv1 ul li: pairar, .lidiv2 ul li: pairar, .lidiv3 ul li: pairar {color: #8b51cb; Cursor: Ponteiro; Decoração de texto: Nenhum; preenchimento: 0; Antecedentes: #ccc; } .btn_img1 {width: 20px; Alinhamento vertical: meio; margem-esquerda: -31px; fronteira: nenhuma; Esboço: Nenhum; Altura: 10px; Cursor: Ponteiro; Antecedentes: URL (imagens/img_1.png) no centro de repetição; Z-Index: 10; } .btn_img2 {margin-left: -31px; Margin-Bottom: 2px; Largura: 20px; Altura: 10px; fronteira: nenhuma; Esboço: Nenhum; Alinhamento vertical: meio; Cursor: Ponteiro; Antecedentes: URL (imagens/img_2.png) no centro de repetição; Z-Index: 10; } </style>Layout da página:
<Head> <title> Escalabilidade dos vínculos provinciais e municipais </ititle> <script type = "text/javascript" src = "scripts/jQuery-1.9.1.min.js"> </script> </head> <body> <body> selecione se deve ir para o exterior: </elbel> <input> "Radio" Radio "= <body> <body> selecione para o exterior: </cret> <input>" Radio "" = "Radio) <body> <body> selecione para o exterior: Nome = "Radio1" Value = "2" /> Estrangeiro <BR /> <BR /> <Boel> Consulta Linkes provinciais e municipais: </celt> <input type = "text" id = "txt_procity" onkeyup = "getoutCounty ()" readOnly "" ROLAT = "" servidor " /" inbuttCounty "") ONCLICK = "ChangeImg ()"/> <BR/> <Beel> Mostrar localização: </crety> <r/> <div id = "divprocity"> <ul> <li> Província </li> <li> City </li> [html] Ver cópia simples <li> </li> </li> </li> <li> fuzh FUzh FUZ FUZ FUZ FUZ FUZ FUZ FUZ FUZ FUH Fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou <li>>> fuzuzhou <li-li> <li> fUzhou Fuzhou <li> FUZHOUM <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> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzou </li> <li> fuzhou </lio> <li> <li> fuzou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzou </li> <li> fuzhou </lio> <li> <li> fuzou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> </fuzhou </li> <li> fuzou </li> style = "Texto-alinhamento: centro; cor:#f60"> <strong> Por favor, selecione a província primeiro! </strong> </p> </div>
Script:
<script type = "text/javascript"> $ (document) .ready (function () {$ ('#divprocity ul.headmenu li'). clique (function () {var index = $ (this) .index (); // clique no exterior inválido if (index == 2) {return;} $ (this) .Addclass (Lidefault "). Irmãos (). $ (this) .val (); (Nome "," img1 "); "ReadOnly"); var txt = $ ("entrada [id*= txt_procity]"); if (txt.val (). TRIM () == "") {return false; } var de altura = txt.Height (); var x = txt.offset (). top; var y = txt.offset (). esquerda; $ ('#divprocity'). CSS ({display: "Block", esquerda: y + "px", topo: x + altura + 8 + "px"}); $ ('#divprocity ul.headmenu li'). Eq (2) .show (). css ("largura", "70px"). addclass ("lidefault"). irmãos (). hide (); $ ('#Divprocity'). Filhos ('div'). Eq (2) .Show (). Irmãos ('div'). Hide (); $ ('#btnimg'). Att ("classe", "btn_img2"); $ ('#btnimg'). Att ("nome", "img2"); // tag A imagem do comutador // código relacionado à consulta difusa var ss = "<ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> Fufuzhou Prefeitura </li> </ul>"; $ ('. lidiv3'). html (''); $ ('. lidiv3'). html (ss); } // Clique no botão direito na casa e no exterior para carregar a função alteração () {var _selectValue = $ ("entrada: verificado [nome $ = radio1]"). Val (); if (_selectValue == "" || _selectValue == indefinido) {alert ("Selecione se deve ir para o exterior primeiro!"); retornar falso; } var txt = $ ("entrada [id*= txt_procity]"); var altura = txt.Height (); var x = txt.offset (). top; var y = txt.offset (). esquerda; var name = $ ('#btnimg'). att ("nome"); if (nome == "img1") {$ ('#btnimg'). att ("classe", "btn_img2"); $ ('#btnimg'). Att ("nome", "img2"); $ ('#divprocity'). CSS ({display: "Block", esquerda: y + "px", topo: x + altura + 8 + "px"}); // 1 itens domésticos do menu do painel de controle doméstico e 2 Exibir if (_selectValue == 1) {$ ('#Divprocity ul.headMenu li'). Eq (2) .hide (). Irmãos (). Show (); $ ('#Divprocity'). Filhos ('div'). Eq (0) .Show (). Irmãos ('div'). Hide (); } else {$ ('#divprocity ul.headmenu li'). eq (2) .show (). css ("largura", "70px"). addclass ("lidefault"). irmãos (). hide (); $ ('#Divprocity'). Filhos ('div'). Eq (2) .Show (). Irmãos ('div'). Hide (); }} else {$ ('#btnimg'). att ("classe", "btn_img1"); $ ('#btnimg'). att ("nome", "img1"); $ ('#Divprocity'). CSS ("Display", "Nenhum"); }} </script>A lógica é escolher primeiro ou estrangeiro. O triângulo é uma imagem, não desenhada pela tela H5. Existem muitas dessas fotos na internet.
1. Uso o botão do tipo de entrada como o recipiente de imagem, mas não consigo nem mesmo divulgá -lo com o IMG (talvez eu esteja regando). A entrada possui botão de estilo padrão Clique na borda azul do lado de fora, remova o contorno: nenhum; Não escreva fora da linha como eu
2. Sinta como escrever da maneira orientada ao processo, pressione o triângulo para carregar todas as informações, alternar a imagem, clique na imagem e feche-a. Alguma lógica é expandir livremente. Se você não deseja códigos estrangeiros, exclua códigos estrangeiros e adicione províncias e cidades semelhantes para expandir.
3. O carregamento dinâmico de dados é, por exemplo, o nome da classe Div correspondente da província é Lidiv1, e sua estrutura de caixa
<div <ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fufuzhou </li> <li> fufuzhou </li> </ul> ";
Os dados dinâmicos SS podem ser obtidos através do AJAX e percorridos através da travessia de fundo.
var ss = <ul> <li id = "01211014aop145" onclick = "getli (this)"> província de fujiano </li> </ul>
Por exemplo, o seguinte é o método de escrita do .NET (não se importe se você o escrever baixo) e o passa para o Ajax front-end para receber o valor retornado e anexar diretamente a $ ('. Lidiv3'). Html (ss); Para obter dados dinâmicos
if (ds! = null && ds.tables.count> 0 && ds.tables [0] .Rows.Count> 0) {strbuild.append ("<tabela id =/" comprimido/"class =/" gridtable/"cellspacing = '0'>"); //strbuild.appendFormat("<TR><DIV CLASS =/"dialogtitle1/"> " + title3 +" </div> <tr> "); foreach (Dataarow dr em ds.tables [0] .Rows) {strbuild.append ("<tr id = '" + dr ["value"] + "' onMouseOver =/" this.bgcolor = '#faebd7'/"onmouseout =/" this.bgcolor = ''/"OnClick"/" strbuild.appendFormat ("<td> {0} </td>", dr ["nome"]. tostring ()); strbuild.append ("</tr>"); } strbuild.Append ("</ table>"); }Obtenha os dados, clique em Fujian Província para escrever um evento geral de cliques e a emenda em segundo plano onclick = "getli (this)"
Escreva no front -end
função getli (obj) {var id = $ (obj) .attr ("id"); var text = $ (obj) .text (); // Você pode escrever Ajax através do ID da província para obter os dados da cidade}Em seguida, o ID de texto da província é obtido e os dados da cidade podem ser obtidos através do evento de cliques. O mesmo ID e texto carregados. A emenda de texto no topo da caixa de entrada é o resultado final (isso ainda não foi escrito, é muito simples, não quero escrever quando tenho ataques de câncer preguiçosos). A propósito, o texto acima foi definido para leitura somente leitura. Quando se trata de somente leitura, temos que falar sobre a diferença entre leitura e desativado. O Readonly é válido apenas para caixas de entrada e várias caixas de entrada de texto, e o estilo de texto não será alterado. Ensaio básico desativado com todos os elementos, mas esteja ciente de sua compatibilidade. O atributo Runat está definido na caixa de texto acima para facilitar o plano de fundo do .NET para ler diretamente os dados.