Estou muito ocupado com o trabalho recentemente e estou revisando um sistema. O fundo do projeto foi desenvolvido pelo MVC1.0, mas a parte front-end foi modificada várias versões, e os designers anteriores são muito poderosos e estão projetando e o desenvolvimento do front-end. Já é muito elegante e de ponta, e usa o sempre popular kit de ferramentas de bootstrap, e há muitos que o definem como uma estrutura CSS front-end da Web. Para ser sincero, eu só sabia antes que foi produzido pelo Twitter e a interface era melhor. Mas não foi usado em projetos reais. Meus novos colegas da empresa fizeram isso antes e planejavam usá -lo no projeto oficial do site da empresa. Porque eu não sei, o líder não está interessado nisso, por isso é inútil. Ela disse que cooperar com menos para trabalhar em projetos pode melhorar a eficiência do desenvolvimento e pode tornar o sistema mais bonito e bonito, mas também suporta o design adaptativo melhor.
O requisito do projeto é substituir a tag de seleção nativa HTML pelo efeito da caixa suspensa mostrada na figura abaixo. Eu geralmente vejo esse tipo de demanda. Se eu quiser alterar as tags HTML nativas, não gosto. Embora eu também saiba que as mesmas funções que o Select podem ser alcançadas através das tags da interface do usuário e do LI e do código JavaScript, nunca tentei escrevê -las antes. Se houver algum problema com a compatibilidade do bug e do navegador, vou me comunicar com o PM. Não devo alterar essa seleção? Vou usar a seleção nativa. PM disse que é para reduzir a interferência do usuário e permitir que os usuários não prestem muita atenção a essa opção. Eu acho que isso é o mesmo. Primeiro de tudo, não parece tão exagerado quanto o selecionado. Em segundo lugar, a seta suspensa é um pouco pequena, para que o usuário não clique em muito deliberadamente. De fato, clicar nesse texto também abrirá a lista suspensa abaixo.
Imagem (tag de seleção nativa HTML) (renderização final)
(Tag de seleção nativa de HTML)
A função original de Select é clicar na seta suspensa à direita para abrir a lista suspensa e dar ao usuário uma seleção. Quando o usuário seleciona uma opção, o valor na caixa de texto deve ser alterado para o conteúdo da opção correspondente e o valor do valor da opção pode ser obtido. Outra função muito importante é que a opção possui uma propriedade selecionada. Se uma opção selecionou = "selecionada", a caixa suspensa selecionará a opção atual por padrão.
O Bootstrap fornece suspensão do botão para fazer menus bonitos, e não é uma função escolher. Quando pesquisei e o vi, pensei que o Bootstrap poderia fornecer um componente selecionado semelhante ao estilo suspenso de botões. Mas eu sou ilusório. Sem esse componente, o componente deve ser implementado. Na verdade, tive experiência em escrever tags selecionadas com UL e LI, por isso não é muito difícil escrever isso.
<div style = "margin-top: 30px;"> <a style = "font-size: 14px;" type="button" id="dropdownMenu1" data-toggle="dropdown">Text 1<span></span></a><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation" value=><a role="menuitem" tabindex="1" href="#">Text 1</a></li><li role="presentation"><a Role = "menuitem" tabindex = "2" href = "#"> texto 2 </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "3" href = "#"> texto 3 </a> </li> </ul> </div>
Este é o código básico de suspensão do botão. Como aplicará o próprio estilo CSS, precisamos alterar o estilo no bootstrap.min.css posteriormente, por isso precisamos colocar alguns estilos nesta página.
<! Doctype html> <html> <head> <title> modelo de bootstrap 101 </title> <meta name = "viewport" content = "width = width, escala inicial = 1.0" charset = "utf-8"> <!-bootstrap-> <link href = "css/boots/boots" type = "Texto/css">. src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/replge.js/1.3.0/replge.minmin.js"> </script> <! [endif]-> </head> <body> <p> Original Selecione Tag </p> <select> <opção = "1"> text> <//option> </> <p> 3 </pption> </leclect> <div id = "suspenso1" "" style = "margin-top: 30px;"> <div> <a style = "font-size: 14px;" type = "button" id = "suspenso Menu1" Data-toggle = "Dropdown"> <! 1 </span> </span> </span> </a> <ul role = "menu" aria-labelledby = "suspensoMenu1"> <li role = "Apresentação" value = "1"> <a role = "meniatem" tabindex = "1" href = "javascript: void (" ""> text 1 </aa> Role = "Menuitem" tabindex = "2" href = "javascript: void (0);"> texto 2 </a> </li> <li role = "Apresentação" value = "3"> <a role = "Menuitem" Tabindex = "3" href = "Javascript: void (0); Plugins javascript do bootstrap)-> <script src = "js/jQuery-1.10.2.js"> </script> <!-inclua todos os plugins compilados (abaixo) ou inclua arquivos individuais conforme necessário-> <script src = "js/bootstrap.min.js"> </script> < CustomDropdown (ele) {this.Dropdown = ele; this.placeholder = this.dropdown.find (". -1; this.initevents ();} customDropdown.prototype = {initevents: function () {var obj = this; // Este método não pode ser escrito porque o evento de clique é capturado pela própria bootstrap; a lista suspensa obj.options.on ("clique", function () {var opt = $ (this); obj.text = opt.find ("a"). text (); obj.val = opt.attr ("value"); obj.index = ot.index (); obj.clowerdger.Text (obj.Text); obj.tex); this.Text;}, getValue: function () {return this.val;}, getIndex: function () {return this.index;}} $ (document) .ready (function () {var mydropdown = new CustomDropdown ($ ("#suspenso1");});Um plano de fundo aparecerá durante o processo de clique. Visualizar elementos através do Chrome é o efeito de escrever box-shodow. Mas depois que eu corrigi, ainda apareceu. Vamos continuar pesquisando amanhã.
Adicione 1 linha de sobreposição de estilo, bootstrap.css dentro do próprio estilo.
<style type = "text/css">. btn-group.open .Dropdown-Toggle {-Webkit-box-shadow: Nenhum; Shadow Box: Nenhum;} </SYLEY>NOTA: Durante o processo de instanciação, passamos em um objeto de um seletor de jQuery; portanto, se uma página tiver muitos suspensos personalizados, a categoria será usada. Então você precisa modificar o código durante o processo de instanciação!
Endereço da demonstração: http://liminjun.sinaapp.com/demo/customselect/index.html
Bootstrap CDN http://www.bootstrapcdn.com/ Embora o Baidu também o tenha, a versão é um pouco antiga e não será atualizada.
Site oficial do Bootstrap http://getbootstrap.com/componnts/#btn-dropdowns