Recomendado: asp gera código básico de página estática htm Manual de referência oficial, Manual Técnico Autoritário Classificação do Tutorial de Livro Eletrônico A caixa pontilhada a seguir é o código específico do arquivo Mk.asp: --------------------------- -------------------------------------------------------- ------------------------ ---------------------------- ---------------------------
Recentemente, estou trabalhando em um projeto AJAX, que usa muitos bloqueios de tela simulados com uma camada de tela inteira, mas há uma dor de cabeça, ou seja, a caixa de listagem suspensa sempre será exibida na camada. , Eu escrevi esta aula de JS.
Visualização de efeito:
Código do programa:
| A seguir, o conteúdo citado: <html> <head> <meta http-equiv = conteúdo conteúdo = text /html; <title> JS div simula a seleção de elementos de formulário </title> <idioma do script = javascript> SelOptions = { Nome: SelOptions, // este é o nome da matriz Dados: New Array () } seloptions.data [0] = novo array (0, opção0) seloptions.data [1] = nova matriz (1, opção1) seloptions.data [2] = nova matriz (2, opção2) seloptions.data [3] = nova matriz (3, opção3) seloptions.data [4] = nova matriz (4, opção4) seloptions.data [5] = nova matriz (5, opção5) seloptions.data [6] = nova matriz (6, opção6) seloptions.data [7] = nova matriz (7, opção7) seloptions.data [8] = nova matriz (8, opção8) seloptions.data [9] = nova matriz (9, opção9) seloptions.data [10] = nova matriz (10, opção10) seloptions.data [11] = nova matriz (11, opção11) seloptions.data [12] = nova matriz (12, opção12) seloptions.data [13] = nova matriz (13, opção13) seloptions.data [14] = nova matriz (14, opção14) seloptions.data [15] = nova matriz (15, opção15) tmhselect = { // Função principal // Significado do parâmetro: contêiner, nome, dados [Array], item padrão, largura, ação (a função objetivo não pode ter parâmetros) Mostrar: function (OBJ, SelectName, DataObj, Selotion, Width, Action) { var dados = DATABJ.DATA; var _obj = document.getElementById (obj); if (! _ obj || typeof (_obj) == indefinido) {return false;} var s1 = document.createElement (div); if (isnan (largura) || largura ==) {width = 150;} else if (width <26) {width = 26;} s1.style.width = width; s1.onMouseLeave = function () {tmhselect.hidden (selectName)}; var str =; // julga se há algum dado if (data.length> 0) { // exibe a lista de opções de dados quando houver dados str = <tipo de entrada = 'hidden' name = 'selectName' id = 'selectName' value = 'tmhselect.relv (seloption, dados)'>; str = <div id = '_ a_ SelectName' style = 'Largura: largura px; altura: 18px; str = <div id = '_ v_ selectName' style = 'posição: relativa; float: esquerda; esquerda: 2px; largura: (largura-22) px; altura: 18px; tamanho da fonte: 12px; transbordamento: oculto; linha- Altura: 18px; str = <div style = 'posição: relativa; float: direita; direita: 0px; largura: 18px; altura: 18px; text-align: centro; font-family: webdings; font-size: 16px; transbordamento: oculto; fundo; fundo; -Color: #ccccc; cursor: ponteiro! importante; cursor: hand; str = </div>; str = <div id = '_ b_ selecione' estilo = 'Posição: Absoluto; X: Hidden; Overflow-y: Auto; Display: Nenhum; for (i = 0; i <data.length; i) { str = <div id = '_ s_ selectName' style = 'tmhselect.style (1, dados [i] [0], selotion)' onMouseOver =/tmhselect.css (2, this, 'dados [i] [0]' , 'SelectName')/ OnMouseOut =/ tmhselect.css (1, this, 'dados [i] [0]', 'selectName')/ onclick =/ tmhselect.Selected (this, 'Data [i] [0]' , DATABJ.Name, 'Action')/> Data [i] [1] </div>; } str = </div>; }outro{ // Uma forma vazia é exibida quando não há dados str = <entrada de entrada = 'Hidden' name = 'selectName' id = 'selectName' value = 'SeloPtion'>; str = <div id = '_ a_ SelectName' style = 'Largura: largura px; altura: 18px; str = <div id = '_ v_ selectName' style = 'posição: relativa; float: esquerda; esquerda: 2px; largura: (largura-22) px; altura: 18px; tamanho da fonte: 12px; transbordamento: oculto; linha- Altura: 18px; str = <div style = 'posição: relativa; float: direita; direita: 0px; largura: 18px; altura: 18px; text-align: centro; font-family: webdings; font-size: 16px; transbordamento: oculto; fundo; fundo; -Color: #ccccc; cursor: ponteiro! importante; cursor: hand; str = </div>; str = <div id = '_ b_ Selecionar' estilo = 'Posição: absoluto; Hidden; transbordamento-y: auto; exibir: nenhum; } s1.innerhtml = str; _Obj.appendChild (S1); }, // retorna o valor do item selecionado Valor: function (n) {retornar document.getElementById (n) .Value;}, // retorna o texto do item selecionado Texto: function (n) {return document.getElementById (_v_ n) .innerText;}, Selecionado: function (o, v, dn, ação) { var d = dn.data; var n = O.id.Replace (/(_ S _)/gi,) document.getElementById (n) .Value = V; document.getElementById (_v_n) .innerhtml = tmhselect.rest (d, v); tmhselect.ShowOptions (n) for (var i = 0; i <document.getElementById (_b_n) .childnodes.length; i) { document.getElementById (_b_n) .childnodes [i] .style.csStext = tmhselect.style (1) } o.style.csStext = tmhselect.style (2); if (ação! = && action! = null) { tente {avaliar (action)} catch (e) {} } }, relv: function (v, d) { para (i = 0; i <d.LengngEn; i) { if (d [i] [0] == v) { retornar v; } } if (v == null || v ==) { retornar d [0] [0]; } }, REST: function (d, m) { para (i = 0; i <d.LengngEn; i) { if (d [i] [0] == m) { retornar d [i] [1]; } } if (m == null || m ==) { retornar d [0] [1]; } }, Altura: função (l) {var h; if (l> 10 || l <1) h = 10 * 15; ShowOptions: function (n) { var o = document.getElementById (_b_n) if (o.style.display == Nenhum) o.style.display =; outro o.style.display = nenhum; _selectOptionselm = O; }, Hidden: function (n) { document.getElementById (_b_n) .style.display = nenhum; }, Estilo: função (m, v1, v2) { var cs =; if (v1 == v2 && v1! = && v1! = null) {m = 2;} switch (m) { Caso 1: CS = Altura: 15px; quebrar; Caso 2: CS = Altura: 15px; quebrar; } devolver cs; }, CSS: function (s, obj, v, n) { var v1 = document.getElementById (n) .Value; if (v == v1) { obj.style.csStext = tmhselect.style (2); retornar; }outro{ obj.style.csStext = tmhselect.style (s) } } } function test () { alerta (tmhselect.value ('teste')); } </script> </head> <Body> <div id = testDiv> </div> <r /> <Tipo de entrada = Nome do botão = Valor do botão = Visualizar texto onclick = alert (tmhselect.text ('test')) /> <Tipo de entrada = Nome do botão = Valor do botão = Visualizar Valor da opção OnClick = alert (tmhselect.Value ('Test')) /> <idioma do script = javascript> tmhselect.show (testdiv, teste, selopions ,, 160, teste ()); </script> </body> </html> |
Compartilhe: Os caracteres chineses Asp para Pinyin, suportar palavras especiais personalizadas Desta vez, atualizei o programa de blog que eu costumava usar e usei o nome do arquivo ao gerar arquivos estáticos para usar o pinyin do título do artigo. Só deve ser normal sob GB2312, e não há