No artigo anterior, introduzi vários componentes úteis na série de componentes de bootstrap (recomendada). Em seguida, este artigo apresenta vários componentes úteis na série de componentes de bootstrap (recomendada 2). Amigos interessados vão aprender juntos!
7. Manifesto de componente de entrada de vários valores
Em relação à entrada de vários valores das caixas de texto, sempre foi um requisito comum. Hoje, o blogueiro recomenda um componente de entrada de vários valores úteis para todos. Não me agradeça, por favor me chame de "Red Scondf"!
1. Exibição de efeito
Caixa de entrada multi-valia local
Caixa de entrada de vários valores remotos
2. Descrição do código -fonte
Graças à comunidade de código aberto e às pessoas fofas que gostam de compartilhar. Endereço de código aberto.
3. Exemplos de código
(1) entrada local de vários valores
Primeiro, você precisa fazer referência aos seguintes arquivos
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/jQuery-manifest-mestre/src/jQuery.manifest.css" rel = "stylesery"/> <cript src = " src = "~/content/bootstrap/js/bootstrap.js"> </sCript> <script src = "~/content/jQuery-manifest-mestre/build/partes/jQuery.ui.widget.js"> </script> <script src = "~//contentherymaniFernif-se
Os arquivos JS e CSS do bootstrap não são necessários. Este artigo é por causa do bom estilo, por isso é referenciado. O componente manifesto não depende do bootstrap, mas depende do jQuery. Além disso, ele também precisa se referir a três arquivos: jquery.manifest.css, jquery.ui.widget.js e jquery.marcopolo.js.
Depois, há a inicialização de HTML e JS
<input type = 'text' autocomplete = "off" id = "txt_man"/> <script type = "text/javascript"> $ (function () {$ ('#txt_man'). manifest ();}); </script>Através de etapas simples, como acima, o efeito acima pode ser produzido. Não é muito simples? Vamos dar uma olhada em alguns de seus usos
// Propriedades comuns: obtenha a coleta de todos os itens na caixa de texto var valores = $ ('#txt_man'). Manifest ('valores'); // Método comum 1: remova o último item $ ('#txt_man'). O formato do segundo parâmetro é determinado pelo formato dos dados JSON $ ('#txt_man'). $ ('#TXT_MAN'). $ ('#txt_man'). on ('manifestelect', função (evento, dados, $ item) {});(2) entrada remota de vários valores
A maneira de a entrada de pesquisa remota exige que forneçamos um endereço de URL, obtenha os dados e retornemos ao navegador. Por simplicidade, este artigo usa diretamente o URL no site do código -fonte para exibir o efeito.
Primeiro, você precisa fazer referência ao arquivo JS
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/jQuery-manifest-mestre/src/jQuery.manifest.css" rel = "stylesery"/> <cript src = " src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jQuery-manifest-mestre/build/partes/jquery.ui.widget.js"> </script> <script src = "~/content/jQuery-manifest-mestres/build/peças/jquery.marcopolo.js"> </script> <script src = "~/content/jquery-manifest-master/build/jqueryy.manifest.js"> </script>
Comparado com o acima, há uma referência adicional ao arquivo jQuery.Marcopolo.js.
Depois, há a inicialização de HTML e JS
<form ação = "https://api.foursquare.com/v2/venues/search?callback=?" Method = "get"> <div> <div> <input type = 'text' id = "txt_man2"/> <img src = "~/content/jQuery-manifest-mestre/ocupado.gif"/> </div> </div> </form> <script type = "text/javscript"> (function) () {$ (dados, $ item, $ mpitem) {return data.name;}, formatValue: function (dados, $ value, $ item, $ mpitem) {return data.id;}, marcopolo: {dados: {client_id: 'NO2MTQVBQANW3Q3SG23OFVMEGYOWIZDT4E1QHRPZO0BFCN4X', Client_Secret: 'lg2wrkks1sxz2fmkdg01ldw1kdtekktulmxm0xevwrn0llHbg01ldw1kdtektulmxm0xevwrn0llHb', '20150601'}, formatData: function (data) {return data.Response.venues;}, formatItem: function (dados, $ item) {return data.name;}, minchars: 3, param: 'consulta'}, requerido: true});}); </script>Quanto ao significado de cada parâmetro, deve ser fácil entender se você precisar. O blogueiro monitorou brevemente o valor de retorno deste método de pesquisa remota
Se um amigo do parque pretende usar esse método remoto sozinho, você pode consultar esse formato de dados para implementá -lo.
8. Caixa de texto Pesquisar componente de bootstrap-typeahead
De fato, muitos componentes têm essa função em relação à função da pesquisa de caixa de texto. Por exemplo, existe um componente de preenchimento automático na interface do usuário do jQuery que o blogueiro costumava usar para alcançar a conclusão automática. Os componentes automáticos de pesquisa das caixas de texto de bootstrap estão surgindo online. A razão pela qual escolhi esse componente hoje é porque acho que é semelhante ao estilo do Bootstrap, e os componentes são menores, simples e práticos.
1. Exibição de efeito
Pesquisa estática local (a fonte de dados é local)
Pesquisa remota (a fonte de dados é recuperada remotamente através da solicitação de Ajax)
2. Descrição do código -fonte
Descrição do código -fonte
3. Exemplos de código
O primeiro arquivo que precisa ser referenciado: contém principalmente um arquivo CSS e um JS. Precisa de suporte do JQuery e Bootstrap.
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/twitter-bootstrap-typeaheehead-mestre/twitter-bootstrap-typeaheaHaster/Demo/CSS/Pretify.csShesht" Rel =peaHead "Stylester/CSS/Pretify.csSh" src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-mestre/js/bootstrap-typeahead.js"> </script>
Então a inicialização do componente
<entrada de entrada = 'text' id = "txt_man" />
Fonte de dados localmente
<script type = "text/javascript"> $ (function () {$ ("#txt_man"). TypeAhead ({origem: [{key: 1, valor: 'Toronto'}, {key: 2, value: 'Montreal'}, {key: 3, 'york'}}, {{key 4: 4, {}, {{Key: 3, 'york'} {{{{4, 4: 'Montreal'}, {key: 3, 'york'}}, {{{ },{ key: 6, value: 'Columbus' },{ key: 7, value: 'Dallas' },{ key: 8, value: 'Vancouver' },{ key: 9, value: 'Seattle' },{ key: 10, value: 'Los Angeles' }],display: "value",val:"key"});});</script>A fonte de dados é obtida através da solicitação de Ajax
<script type="text/javascript">$(function () {$("#txt_man").typeahead({ajax: {url: '/Home2/TypeaheadData',timeout: 300,method: 'post',triggerLength: 1,loadingClass: null,displayField: null,preDispatch: null,preProcess: null},display: "Valor", Val: "Key"});}); </script>Método de teste correspondente ao fundo
public jsonResult theeaHeHeheadData () {var lSTes = new List <ject> (); para (var i = 0; i <20; i ++) lstres.add (new {key = i, value = guid.newguid (). tostring (). Subtring (0, 4)});Propriedades comuns:
• Exibição: o nome do campo exibido
• Val: o valor real
• Itens: o número de resultados de pesquisa exibidos por padrão. O valor padrão é 8
• Fonte: fonte de dados local, formatada como uma matriz.
• Ajax: o objeto solicitado pelo AJAX pode ser diretamente um URL da string ou um objeto. Se for um objeto, não vou falar sobre URL. A propriedade TriggerLength indica que a entrada de vários caracteres aciona a pesquisa.
Eventos comumente usados:
• ItemSelected: acionado quando o valor da pesquisa é selecionado.
<script type="text/javascript">$(function () {$("#txt_man").typeahead({ajax: {url: '/Home2/TypeaheadData',timeout: 300,method: 'post',triggerLength: 1,loadingClass: null,displayField: null,preDispatch: null,preProcess: null},display: "value",val: "key", itemSelected: function (item, val, texto) {}});}); </script>O item do parâmetro representa o objeto selecionado, o parâmetro Val representa o valor real do item selecionado e o texto representa o valor exibido do item selecionado.
9. Componente de etapa de bootstrap
Em relação ao componente de etapa do bootstrap, o artigo anterior introduziu um widget YStep. Ele pode desempenhar um certo papel na visualização do progresso da tarefa, mas para alguns negócios complexos, é um pouco impotente lidar com o negócio correspondente de acordo com as etapas atuais. Hoje, o blogueiro apresentará um componente de etapa que tem um efeito muito bom. Com este componente, os programadores não precisam mais se preocupar com o design complexo de etapas.
1. Exibição de efeito
Tenha um vislumbre do estilo
Siga as etapas para "passo anterior" e "próximo passo"
Mais etapas
2. Descrição do código -fonte
Este componente foi encontrado pelo blogueiro online. Vi que muitos estilos e usos são da bootstrap. A única coisa que preciso me referir é um arquivo JS e CSS. A fonte do código -fonte ainda não foi encontrada. Se alguém conhece a fonte do código -fonte, você pode dizer ao blogueiro. Além disso, para respeitar os resultados do trabalho do autor, o blogueiro deve respeitar a originalidade!
3. Exemplos de código
Arquivos que precisam ser referenciados
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-step/css/bs-is-fun.css" rel = "styleSheet"/> <script sc = "/contention.CSS" rel = src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-step/js/pincel.js"> </script>
BS-IS-FUN.CSS e Brush.js precisam ser referenciados, e os componentes precisam do suporte de jQuery e bootstrap.
Depois, há a inicialização do componente.
(1) seta
<ul> <li> <a> Etapa1 </a> </li> <li> <a> Etapa2 </a> </li> <li> <a> Etapa3 </a> </li> </ul>
Se for uma etapa estática, você só precisa do código HTML acima para ver o efeito da etapa de seta na figura acima. O estilo ativo aqui representa o estilo que a etapa passou.
(2) quadrado
<ul> <li> <a> Etapa1 </a> </li> <li> <a> Etapa2 </a> </li> <li> <a> Etapa3 </a> </li> </ul>
(3) forma circular
<ul> <li> <a> Etapa1 </a> </li> <li> <a> Etapa2 </a> </li> <li> <a> Etapa3 </a> </li> </ul>
(4) Barra de progresso
<ul> <li> <a> Etapa1 <span> </span> </a> </li> <li> <a> Etapa2 </span> </span> </a> </li> <li> <a> Etapa3 <span > </span> </a> </li> <li> <a> Etapa4 <pan> </span> </a> </li> <li> <a> Etapa5 <span> </span> </a> </li> </ul>
(5) Etapa anterior, próxima etapa
A "etapa anterior" e a "próxima etapa" na figura acima são definidas por si mesmo no componente modal do bootstrap ou são o código publicado para sua referência.
<div id = "mymodalNext"> <div> <div> <div> <button type = "button" data-Dismiss = "modal" aria-label = "Close"> <span Aria-hidden = "true"> × </span> </button> <h4> opção Configuration </h4> <ul> <li> <a> <a> spange 1 2 </span> </span> </a> </li> <li> <a> Etapa 3 </span> </a> </li> <li> <a> Etapa 4 </span> </a> </li> </li> </li> </li> </div> <div Data = "" carousela "Datamern-Tans-NTERS-INTRA Role = "ListBox"> <div> <p> Etapa 1 </p> <div> Configure a função </div> <div> <input type = "text"/> </div> <div> <butter type = "button"> Salvar </butt> </div> <div> <div> <p> etapa 2 </p> <div> <div> tept </</</</</div> <b) <div> <div> <p> etapa 2 </p> <div> <div> </"</but> </</div) type="button">Save</button></div><div><p>Step 3</p></div><div><p>Step 4</p></div><div><p>Step 5</p></div><div><p>Step 6</p></div></div></div><div><button type="button">Previous</button><button type = "Button"> Next </botão> </div> </div> </div>
Obviamente, você também precisa registrar um evento de clique para dois botões
$ ("#myModalNext .Modal-Footer Button"). Cada (function () {$ (this) .Click (function () {if ($ (this) .hasclass ("mn-next")) {$ ("#myModalNext .Carousel). li.active "). Next (). addclass (" ativo ");} else {$ ("#myModalNext .Carousel "). Carousel ('prev'); if ($ ("#mymodalNext .STEP li "). Length> 1) {$ ($ (($ (("#MyMMXT. li.active "). Comprimento - 1]). RemoveClass (" Active ")}}})})A lógica pode estar incompleta e os testes são necessários se usados formalmente.
10. Botão Carregar componente Ladda-Bootstrap
Em relação ao carregamento de botões, o blogueiro há muito deseja encontrar um componente adequado para otimizar. Se não for processado, definitivamente existe a possibilidade de operações repetidas. Vamos dar uma olhada em uma coisa tão pequena hoje.
1. Exibição de efeito
Primeiro encontro
Cor personalizada, tamanho, barra de progresso
2. Descrição do código -fonte
Endereço do código -fonte
3. Exemplos de código
Arquivos que precisam ser referenciados
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/ladda-bootstrap-master/ladda-bootstrap-mester/dist/ladda- theless.min.css" Rel = "Styleshet" src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/ladda-chstrap-master/ladda-bootstrap-mestra src = "~/content/ladda-bootstrap-master/ladda-bootstrap-mestre/dist/ladda.min.js"> </sCript>
Inicialização do componente: Inicialize 4 botões
<button data-style="expand-left"><span>expand-left</span></button><button data-style="expand-right"><span>expand-right</span></button><button data-style="zoom-in"><span>zoom-in</span></button><button data-style="zoom-out"><span>zoom-out</span></button> $(function () {$ ('Button'). Clique (function (e) {e.PreventDefault (); var l = ladda.create (this); l.start (); l.setProgress (0 - 1); $. Post ("/consolle.l); {l.stop ();}); retornar false;});});Dúvida do código: não deve ser difícil de entender. O código envolvido na inicialização do componente var L = ladda.create (this); l.start (); Aqui, isso representa o objeto do botão clicado atualmente (observe que este é um objeto DOM em vez de um objeto jQuery) e, em seguida, ligue para L.Stop (); Após a conclusão da solicitação, feche a carga.
(1) Todas as opções de estilo de dados são as seguintes. Se você estiver interessado, pode tentar e ver quais são os efeitos:
Data-estilo = "Expandir-Left"
Data-estilo = "Expandir-Right"
Data-estilo = "expandir"
Data-estilo = "Expandir down"
Data-estilo = "Zoom-in"
Data-estilo = "Zoom-out"
Data-estilo = "Slide-Left"
Data-estilo = "Slide-right"
Data-estilo = "slide-up"
Data-estilo = "deslize"
Data-estilo = "Contrato"
(2) Se você precisar ajustar o tamanho do botão, o componente possui uma propriedade embutida em tamanho de dados. Todas as opções de tamanho de dados são as seguintes:
data-size = "xs"
data-size = "s"
Data-size = "L"
(3) Se você precisar definir a cor do botão, use o Data-Spinner-Color
Data-spinner-color = "#ff0000"
(4) Configurações da barra de progresso do botão
Ladda.bind ('botão', {retorno de chamada: function (instance) {var progress = 0; var interval = setInterval (function () {progress = math.min (progresso + math.random () * 0.1, 1); instance.setProgress (progress); if (progress === 1) {instance.Stop ();O progresso atual da execução é definido principalmente através da instância da sentença.SetProgress (Progress);, e o valor do progresso está entre 0 e 1. É claro que o acima é apenas um código para testar o efeito de progresso. No projeto oficial, precisamos calcular a situação atual de execução da solicitação para retornar dinamicamente o progresso.
11. Switch Component Bootstrap-Switch
Na página inicial do site chinês Bootstrap, você pode encontrar um componente tão
1. Exibição de efeito
Efeito inicial
Vários atributos e eventos
2. Descrição do código -fonte
Endereço do código fonte do Bootstrap-Switch: https://github.com/nostalgiaz/bootstrap-switch
Documentação e demonstração do bootstrap-switch: http://www.bootstrap-switch.org/examples.html
3. Exemplos de código
Arquivos que precisam ser referenciados
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-switch-mestre/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.csss" relatar "" " src="~/Content/jquery-1.9.1.js"></script><script src="~/Content/bootstrap/js/bootstrap.js"></script><script src="~/Content/bootstrap-switch-master/bootstrap-switch-master/dist/js/bootstrap-switch.js"></script>
Os componentes dependem de jQuery e bootstrap
Depois, há a inicialização de HTML e JS
<input type = "Caixa de seleção" verificada /> $ (function () {$ ('input [type = caixa de seleção]'). bootstrapswitch ({size: "grande"});})O atributo de tamanho não é necessário. Se você usar o estilo padrão, os parâmetros não poderão ser passados.
Propriedades comumente usadas
• Tamanho: tamanho da chave. Os valores opcionais são 'mini', 'pequeno', 'normal', 'grande'
• Oncolor: a cor do botão ON no interruptor. Os valores opcionais incluem 'primário', 'info', 'sucesso', 'aviso', 'perigo', 'padrão'
• OffColor: a cor do interruptor na cor do botão Off. Valores opcionais 'primário', 'info', 'sucesso', 'aviso', 'perigo', 'padrão'
• ONEXT: O texto do botão ON no interruptor, o padrão está "ligado".
• Offtext: o texto do comutador está "desligado" por padrão.
• Oninit: eventos que inicializam o componente.
• Onswitchchange: eventos quando o comutador muda.
Eventos e métodos comuns podem ser usados para visualizar diretamente os documentos e o funcionário fornece uma descrição muito detalhada.
12. Bootstrap de pontuação de pontuação de classificação
Todos devem conhecer as classificações nas classificações no 10º e 10º Taobao. Eu acidentalmente encontrei um componente de classificação no estilo de bootstrap. Eu achei interessante. Pode ser útil para sistemas de comércio eletrônico, comunidade e fórum no futuro, então vou compartilhá-lo.
1. Exibição de efeito
2. Descrição do código -fonte
Download do código -fonte
3. Exemplos de código
Este componente requer suporte para estilos de jQuery e bootstrap
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-star-rating-mestre/bootstrap-star-rating-mester/css/star-rating.css" Rel = "Stylesheet"/> <> src = "~/Content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap-star-rating-mestre/bootstrap-star-rating-master/js/star-rating.js"> </script> <script src = "~/content/bootstrap-star-rating-mester/bootstrap-star-rating-mestre/js/locales/zh.js"> </sCript>
Diretamente através do componente inicial HTML
<entrada de entrada = "input-2b" type = "número" min = "0" max = "5" step = "0,5" data-size = "xl" dados-symbol = "" data-default-caption = "{rating} corações" data-star-captions = "{}"> <input ID = "input-21a" data-size = "xl"> <input id = "input-21b" value = "4" type = "número" min = 0 max = 5 etapa = 0.2 Data-size = "lg"> <ID de entrada = "input-21c" Value = "0" type = "Número" min = 0 max = 8 Step = 0.5 Data-size = "xl" "xl" Datas = "Número" type = "número" min = 0 max = 5 etapa = 0,5 Data-size = "sm"> <entrada id = "input-21e" value = "0" type = "número" min = 0 max = 5 etapa = 0,5 dados-size = "xs"> <input id = "input-21f" value = "0" = "" "MIN = 0 MAX" MAX "5. id = "input-2ba" type = "número" min = "0" max = "5" step = "0.5" stars de dados = 5data-symbol = "" "data-default-caption =" {rating} hearts "star-captions =" {} "> <ingin id =" input-22 "value =" 0 "0" Data-container-class = 'text-right' data-glificon = 0>O componente é inicializado através do Class = "Classificação". Aqui estão alguns parâmetros que devem ser fáceis de entender:
• Valor: representa a pontuação padrão quando a inicialização do componente
• Min: pontuação mínima
• Max: pontuação máxima
• Etapa: a escala mínima adicionada a cada vez
• Size de dados: o tamanho das estrelas
• Stars de dados: o número de estrelas
Você pode obter a pontuação atual usando $ ("#input-21a"). Val ().
Os acima são alguns componentes úteis da série de componentes de bootstrap que o editor apresentou a você (recomendação 2). Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!