Prefácio: Eu compartilhei muitos componentes comuns de bootstrap antes, incluindo formulários, verificação de formulários, upload de arquivos, caixas suspensas, caixas pop-up etc. Durante esse período, o blogueiro coletou alguns componentes úteis (alguns dos quais foram usados no projeto). Depois de dois dias, ele resolveu alguns deles. Com base no princípio de "coisas boas devem ser compartilhadas com outras pessoas", hoje daremos alguns benefícios para compartilhar as coisas coletadas pelo blogueiro para referência de jardineiros necessitados. A maioria dos componentes são componentes de código aberto, e alguns deles são os efeitos encontrados e reescritos por blogueiros na Internet. Eles podem não ser satisfatórios. Se você estiver interessado, dê uma olhada.
1. Componente de tempo
Existem muitos componentes de tempo no estilo de bootstrap. Você pode procurar a palavra -chave "datepicker" no github e encontrar muitos componentes de tempo. O blogueiro já usou dois deles antes e descobriu que haverá alguns problemas de tamanho grande ou pequeno. Após alguma triagem, encontramos um componente de tempo que tenha bons resultados e pode ser usado para vários cenários. Vamos dar uma olhada no seu estilo abaixo.
1. Exibição de efeito
Efeito inicial
Personalização dos formatos de cultura e data no componente: apenas as datas são exibidas
Mostrar data e hora (a experiência dos dispositivos de telefone celular e tablet pode ser melhor)
2. Descrição do código -fonte
Chuchu analisou o efeito do componente e deu o endereço do código -fonte
3. Exemplos de código
Primeiro, faça referência ao arquivo necessário
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src = "~/content/bootstrap-dateTimepicker-mestre/build/js/bootstrap datetimepicker.minmin.js"> </script>
JQuery e Bootstrap são necessários. Além disso, você também deve se referir ao arquivo momento com locales.js. Obviamente, você também pode baixar esse arquivo JS para sua área local sem usar este método CDN. Você pode baixar completamente este arquivo JS à sua área local e adicionar uma referência local.
(1) Efeito inicial
<Boel> Data: </elabel> <div class = 'input-group date' id = 'datetimepicker1'> <input type = 'text'/> <pan> <pan> </span> </span> </div> <script type = "text/javascript"> $ (function) {$ ('#datetimepicker1'). </script>Isso dará o efeito como mostrado na figura acima.
(2) Formatação de cultura e data chinesa
A parte HTML permanece inalterada. Basta adicionar parâmetros ao inicializar o JS.
<script type = "text/javascript"> $ (function () {$ ('#datetimepicker1'). DateTimepicker ({format: 'yyyy-mm-dd', // formatação de data, apenas a data de localidade: 'zh-cn' // cultura chinesa});}); </script>(3) Tempo de exibição
<tabel> Tempo: </crety> <div class = 'input-group date' id = 'dateTimepicker2'> <input type = 'text'/> <pan> <pan> </span> </span> </div> <script type = "text/javascript"> $ (function) {$ ('#DATETIMEPCHERTE). HH: MM: SS ', Locale:' ZH-CN '}); </script>(4) data máxima e data mínima
$ ('#DateTimepicker1'). DateTimepicker ({formato: 'yyyy-mm-dd', // formatação de data, somente a data da data de localidade: 'zh-cn', //(5) Ative o botão Excluir
ShowClear: True
(6) Atributo do modo de exibição. Defina o navegador para selecionar o modo para copiar o código da seguinte forma: ViewMode: 'Anos'
(7) outros
Para funções mais poderosas, consulte a API, para não listá -las aqui. Há um grande número de atributos, eventos e métodos para atender às suas várias necessidades especiais.
2. Componentes do dispositivo de incêndio auto-incrustação
Em relação ao auto -contratador de bootstrap, pode não ser necessário em todos os projetos. Existem alguns cenários especiais, como: uma determinada caixa de texto requer números de dados, e o tamanho da matriz precisa ser ajustado. Depois de conversar por um longo tempo, alguns jardineiros podem não saber como é, então clique na foto.
1. Exibição de efeito
De fato, o efeito é muito simples, mas pode definir automaticamente o valor máximo, o valor mínimo e o valor de auto-amadurecimento e pode executar automaticamente a verificação digital. O mais conveniente é que ele precisa ser inicializado usando o JavaScript e só precisa ser inicializado no HTML.
2. Descrição do código -fonte
Código fonte e endereço do documento
3. Exemplos de código
O primeiro arquivo a ser referenciado é o seguinte:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "Stylesheet"/> <link rel = "Stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-inwesome/awesk/werpssssssssssssssssssstrapcdn.com/Font-inwesome/Awesome/werg.6.3/css/FOMMOMMOMMOMMONTMOMENTMOMEMMOMMOMMOMMEnm.com/inweMeMeMek.6.3/cssssssssssssssssssstrapcdn.com/Font-Ewesome/awesome/awesd/werksssssssssssssssssSstrapcdn.com/ href = "~/content/jQuery.spinner-mestre/dist/css/bootstrap spinner.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> </script> <script sr. src = "~/content/jQuery.spinner-master/dist/js/jquery.spinner.js"> </script>
O arquivo font-aweaome.min.css também é um arquivo de referência do CDN e você também pode se referir a ele ao seu local.
(1) Inicialização
<div data-trigger = "spinner"> <input type = "text" value = "1" data-rule = "quantidade"> <pan> <a href = "javascript :;" Data-spin = "up"> <i> </i> </a> <a href = "javascript:;" Data-spin = "Down"> <i> </i> </a> </span> </div>
Apenas uma seção HTML simples, você pode ver o efeito como mostrado na figura acima. É fácil?
(2) Tipo auto-incrustante
Ao visualizar o código-fonte do componente, você pode ver que existem vários tipos de auto-incrementos definidos para nós:
Você pode definir o atributo de regra de dados para esses tipos, como:
As regras que podem controlar o componente de auto-aumento são realizadas de acordo com as regras mensais.
(3) Defina o valor máximo, valor mínimo, valor de auto-amortecimento
Além dos tipos específicos acima, os componentes também oferecem suporte ao valor máximo, mínimo e de auto-amadurecimento personalizado.
<div data-trigger = "spinner"> <input type = "text" value = "1" data-min = "-10" data-max = "10" data-step = "2" data-rule = "quantidade"> <pan> <a href = "javascript :;" Data-spin = "up"> <i> </i> </a> <a href = "javascript:;" Data-spin = "Down"> <i> </i> </a> </span> </div>
data-min = "-10": valor mínimo data-max = "
Isso é fácil de entender, e não vou explicar muito. Efeito:
(4) Captura de eventos
O componente fornece dois eventos alterados e alterados, que correspondem à mudança numérica e ao retorno de chamada do evento após a alteração.
$ ('#id'). spinner ('alterado', function (e, newval, antigo) {}); $ ('[data-trigger = "spinner"]').3. Efeito de carregamento
Alguns dias atrás, um membro do grupo pediu quais componentes usarem para o efeito de carregamento da Bootstrap. De fato, a pesquisa no Baidu também pode encontrar muitos resultados. Aqui, o blogueiro compartilhará alguns widgets carregados com base em sua experiência de uso, esperando que todos possam usá -los. É dividido principalmente em prático e fresco. O modelo prático tem efeito médio, mas pode ser usado para vários navegadores; O modelo legal é escrito usando o mais recente CSS3 e HTML5, e o efeito é muito legal, mas basicamente a versão inferior do IE (abaixo de 10) não é compatível.
1. Prático
1. Componente de carga perfeita
Este componente é um JS encontrado pelo blogueiro na internet, mas depois de baixá -lo, encontrei alguns problemas grandes e pequenos. Portanto, o blogueiro reescreveu e o chamou de componente de carregamento de bootstrap. Seu princípio é exibir uma camada de capa quando o componente é iniciado e, em seguida, quando o componente é fechado, a camada de sobreposição DOM é removida e o efeito de carregamento usa uma imagem GIF.
PerfectLoad.js Arquivo Conteúdo:
******************************************* A velocidade da Internet é extremamente feroz, especialmente para sites pendurados em servidores estrangeiros. Depois de abrir um monte de materiais, você pode carregar lentamente os locais e os locais são inconsistentes. Portanto, este método é escrito para facilitar todos a usar ************************************************************/jQuery.BootStrapLoading = {Iniciar: functionCOlor) {var defaults = {Opacity: 1 // Página de carregamento Transparency Background: " cor de borda largura de borda: 1, // Proot da largura da borda BordersTyle: "Solid", // Promover um estilo de carregamento de estilo de borda: "Carregando, por favor aguarde ...", // Prompt Text TipScolor: "#666", // Speed de cor de cor de uma velocidade: 1000, // Após o carregamento da página. Se for igual a 0, não há necessidade de suspender} var options = $ .Extend (padrão, opções); // obtenha largura e altura da página var _pageHeight = document.documentElement.clientHeight, _pageWidth = document.documentElement.clientWidth; // Carregando o conteúdo personalizado exibido antes da página não ser carregada var _loadinghtml = '<div id = "carregingpage" style = "position: corrigido; esquerda: 0; top: 0; _Position: absolutamente; largura: 100%; altura:' + _pageHeight + 'px; Background:' + options.back: 100%; '; filtro: alfa (opacidade =' + opções.Opacidade * 100 + '); z-index:' + opções.zindex + '; 'PX; '; Fonte-tamanho: 20px; ">' + options.loadingTips + '</div> </div>'; // representa o efeito de carregamento $ ("corpo"). Appender (_loadinghtml); // Obtenha a largura e a altura da caixa de prompt de carregamento var _loadingTipsh = document.getElementById ("carregamento"). CLIENTEHEIK, _LoadingTipsw = document.getElementById ("LoadingTips"). // Calcule a distância e mantenha a caixa de prompt de carregamento para cima, para baixo, para a esquerda e direita, var _loadingtop = _pageHeight> _loadingTipsh? (_PageHeight - _loadingTipsh) / 2: 0, _loadingleft = _pageWidth> _loadingTipsw? (_PageWidth - _loadingTipsw) / 2: 0; $ ("#loadingtips"). css ({"esquerda": _loadingleft + "px", "top": _loadingtop + "px"}); // Ouça o documento de status de carregamento da página. // Executar função pagELOADED () {if (document.readyState == "complete") {var loadingMask = $ ('#carregamento de carregamento'); setTimeout (function () {loadingMask.animate ({"opacidade": 0}, options.delayTime, function () {$ (this) .hide ();});}, options.sleep); }}}, fim: function () {$ ("#carregamentopage"). remover (); }}Este JS está basicamente inativo online, mas nessa base, o blogueiro adicionou um método final.
Vamos ver como os componentes são usados. Aqui está o código de teste:
<html> <head> <meta name = "viewport" content = "width = width device-width"/> <title> carregando </title> <link href = "~/content/bootstrap/css/bootstrap.css" Rel = "StyleSheet"/> <script src = "~/content/jQuery.1.1.1.1.1.1.1.1.1.csSs" Rel = "StyleSheet"/> <script> src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-loading/perfeitload.js"> </script> <script type = "text/javascript"> $ (function () {$ ("#btn_s_subn") $ .BOOTSTRAPLOWING.START ({LoadingTips: "Os dados estão sendo processados, aguarde ..."}); </script> </ad Head> <body> <div style = "preenchimento: 0px"> <div style = "altura: 450px;"> <div> Condições de consulta </div> <div> <formig id = "formsearch"> <div> <div> <butt type = "button" = "btn_submit"> <pland> hidden = "type =" button "=" btn_submit "> <pland> hidden =" button "=" btn_submit "> <prany> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>Instruções para uso: o componente não requer nenhum código HTML, ele só precisa chamar o método de início do componente ao executar o carregamento. O método START () inicia a camada pop-up e pode definir todos os parâmetros na variável Padrão. Quando o carregamento for concluído, o método final do componente será chamado e a camada pop-up será removida automaticamente. Vamos ver o efeito:
Se você não estiver satisfeito com o efeito, poderá definir os parâmetros nos padrões. As anotações são escritas em detalhes, então não as listarei uma a uma aqui.
2. Componente de carregamento de crisântemo spin.js
Usando imagens para exibir efeitos de carregamento tem suas desvantagens inerentes, muitos componentes de carregamento agora usam CSS+JS para obter efeitos de animação. spin.js é um desses exemplos. Spin.js é um componente de código aberto com um endereço de código aberto.
Depois de baixar o código -fonte, a inicialização constata que o componente não possui uma máscara, por isso só pode ser assim:
Depois de procurar seus parâmetros por um longo tempo, não consegui encontrá -los, ou não os encontrei onde havia uma "organização". Não há como o blogueiro só pode adicionar o efeito da máscara. Portanto, um novo arquivo de estilo CSS foi criado e temporariamente chamado spin.css, com apenas um estilo:
.Fade {Posição: fixado; topo: 0; Direita: 0; Inferior: 0; Esquerda: 0; Z-Index: 9999; opacidade: 1; Background-Color: Gray;}Em seguida, o spin.js foi reescrito em dois lugares, e o conteúdo de reescrita é o seguinte:
/** * Copyright (c) 2011-2014 Felix gnass * licenciado sob a licença do MIT * http://spin.js.org/ * * Exemplo: var opts = {linhas: 12, // o número de linhas para desenhar um comprimento: 7, // o comprimento de cada largura: 5, // a linha de espessius 10, 10, // o comprimento de cada largura: 5, // a linha de espessius 10, 10, // o comprimento de cada largura: 5, // a linha de espessius 10, 10, // o comprimento da linha: 5, // a linha de espessius 10, 10, // o comprimento, //, o comprimento de cada largura: 5, // a linha de espessius 10: Corners: 1, // redondeza (0..1) Cor: ' #000', // #rgb ou #rggbb opacidade: 1/4, // Opacity of the Lines gira: 0, // ROTAÇÃO Direção: 1, 1, // 1: horário de tempo, depois da velocidade do dia///10: //) SettleoTs, //), depois de 1, //), depois de um segundo, //), depois de um segundo, //). Zindex: 2e9, // Use um Index Z Alto por ClassName de Classe: 'Spinner', // Classe CSS para atribuir ao topo do elemento: '50%', // central verticalmente esquerdo: '50%', // Center Horizontally Shadow: False, // se renderiza uma sombra hwaccel: false, // se usa horizontalmente hardware var no destino = document.getElementById ('foo'); var spinner = new Spinner (OPTS) .spin (Target); */;; (function (root, fábrica) {if (typeof module == 'object' && module.exports) module.exports = factory (); // commonjs else if (typeof define == 'function' && define.amd) define (fábrica); // amd else root.spinner = spactory (); prefixos = webkit ',' moz ',' ms ',' o ']; A DIV é criada. <N; * 100), linhas] .Jain ('-'); prefixo + '-' || ''; '%{opacia:' Alpha + '}' + '100%{Opacy:' Z + '}' + '}', Sheet.cssrules.Length); I; CSS (el, prop) {para (var n em prop) {el.style [fornecedor (el, n) || n] = prop [n]; === Undefinido) OBJ [N] = def [n]; Comprimento de cada linha Largura: 5, // O raio da espessura da linha: 10, // O raio da escala do círculo interno: 1.0, // Escala o tamanho geral dos cantos do spinner: 1, // redondidade (0..1) cor: ' #000', // #rgb ou #rggbbb: 1/4, // opacity of the lines 0: 1, 1, 1, 1, 1 // # # #// #rgb ou #rggbbb opacity: 1/4, // opacity of the lines 0: 1, 1, 1, 1/1), 1, 1, 1/10, 1, 1, 1/1). -1: Velocidade no sentido anti -concloco: 1, // rodadas por segundo trilha: 100, // porcentagem de pós -glow FPS: 20, // quadros por segundo ao usar o setTimeout () zindex: 2e9, // use um z -index alto, por padrão, centersname: 'spinner', // CSS Class para atribuir ao elemento top: '50%'' ', // se deve renderizar uma sombra hwaccel: false, // se deve usar a posição de aceleração de hardware: 'absoluta' // elemento posicionando}; Merge (spinner.prototype, { / ** * adiciona o spinner ao elemento de destino especificado. Se esta instância já estiver * girando, ela será automaticamente removida de seu alvo anterior B, stop () internamente. CSS (El, {Posição: O.Position, largura: 0, Zindex: O.zindex, esquerda: O.LEFT, TOP: O.TOP}); Self -OPTS); = f / o. lines; ~~ (1000/fps); El.parentnode.className = El.parentnode.className (O. lines - 1) * (1 - O.Direction) / 2; 'gire (' + ~~ (360/o. linhas * i + o.rotate) + 'deg) traduzir (' + o.cale * o.radius + 'px' + ', 0)', borderradius: (o.corners * o.cale * o.width >> 1) + 'px'}); CSS (createel (), {Position: 'Absoluto', topo: 1 + ~ (O.Scale * O.Width / 2) + 'PX', transform: O.HWACCEL? 'TRANSTATE3D (0,0,0)': '', Opacity: O.Opacity, Animation: O.TecsSanimations && Addanimation (O.Opacity, O.Opacity, Animation: OSecssAmations &&. + '' + 1 / o.speed + 's linear infinito'}); rgba (0,0,0, .1) ')); Initvml () { / * Função do utilitário para criar uma tag VML * / função vml (tag, att) {return createel ('<' + tag + 'xmlns = "urn: schema-microsoft.com: vml">', att); 'Comportamento: url (#padrão#vml)'); }), Width: S, altura: S}); {Rotação: 360 / o. lines * i + 'deg', esquerda: ~~ dx}), ins (css (vml ('redondrect', {arcsize: o.corners}), {width: r, r, altura: o.cale * o.widthth. vml ('preenchimento', {cor: getColor (O.Color, i), opacidade: O.Opacity}), VML ('Stroke', {Opacity: 0}) // Stroke transparente para corrigir o sangramento da cor na mudança de opacidade)); 'Progid: DIMAGETRANSFORM.Microsoft.Blur (Pixelradius = 2, Makehadow = 1, ShadowOpacy = .3)'); O.Shadow & & O. lines || 0; El = Createel (estilo ', Tipo:' Texto/CSS '}); 'Transform') && sonda.adj) initvml ();spin.js
Duas mudanças:
(1) Ao inicializar, se for exibido, adicione um estilo de desbotamento à tag correspondente.
(2) Exclua o estilo de desbotamento todas as vezes.
Depois que a modificação é feita, a interface de teste já está disponível.
<html> <head> <meta name = "viewport" content = "width = width de dispositivo"/> <title> loading2 </title> <link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleleset"/> <link href = "~/spin.jsen.jset" stylesMeet "/> <link href =" ~/spin.jsen.jset "stylesMeet"/> <link href = "~/spin.jsen.jset" stylesMeet "/> <link href =" ~/contents/spin.jset "Mester" styleS-Master "/href/" ~//spin.jset "stylesMeet"/link/"~//contents" <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/spin.js-master/js/spin.js"></script> <script type="text/javascript"> $(function () { $("#btn_submit").on("click", function () { //var opts = { // lines: 9, // Number of petals// length: 1, // Petal length// width: 10, // Petal width// radius: 15, // Petal radius from the center// corners: 1, // Petal smoothness (0-1) // Rotate: 0, // Petal rotation ângulo // Direção: 1, // Direção de rotação da pétala 1: no sentido horário, -1: no sentido anti -horário // cor: '#000', // cor de pétala // velocidade: 1, // velocidade de rotação de pétala // trilha: 60, // sombra quando a pétala gira (porcentagem) // Shadow // Falsa // se o hard -spin e/// hwaccel quando a petade ClassName: 'Spinner', // Nome do estilo CSS Spinner // Zindex: 2e9, // Z-Axis (Padrão é 2000000000) // TOP: 'Auto', // Spinner Posicionamento da unidade PX // = novo spinner ({}). Spin (Target); Distância da sombra central: Opacia: 1/8}; </script> </ad Head> <body> <div style = "preenchimento: 0px"> <div style = "altura: 450px;"> <div> Condições de consulta </div> <div> <formig id = "formsearch"> <div> <div> <butt type = "button" = "btn_submit"> <pland> hidden = "type =" button "=" btn_submit "> <pland> hidden =" button "=" btn_submit "> <prany> </div> </div> </div> </div> </div> </div> <div id = "foo"> </div> </body> </html> test_spin.cshtmlInstruções para uso: se sua página não usar jQuery, consulte o arquivo spin.js, este arquivo não requer suporte ao jQuery; Se você deseja usar o jQuery, consulte o arquivo jQuery.spin.js. O código acima não está usando o jQuery. O componente precisa definir uma div em vazia e, em seguida, inicializá -lo nesta div. Os resultados obtidos são os seguintes:
Obviamente, se você não estiver satisfeito com esse efeito, também poderá definir a transparência da camada de máscara e o estilo de toda a máscara. Existem também vários parâmetros para rotação que podem ser personalizados durante a inicialização e há comentários detalhados no código acima.
2. Estilo legal
1. JQuery.shcircleloader.js componente
Escusado será dizer que esse componente também é simples de usar, mas não é suportado para versões abaixo do IE10. Vamos ver o efeito primeiro:
Quanto ao uso específico de código, o blogueiro não pretende aprofundar, para que você possa pesquisar no Baidu ou no Github.
2. Componente fakeloader.js
Mais opções, melhor efeito de achatamento, melhor experiência com dispositivos de telefone celular e tablets. Basta olhar para as fotos e você saberá. Endereço de código aberto.
4. Plug-in de fluxograma
Eu tive que fazer um fluxo de trabalho há algum tempo e precisava mostrar para onde o processo atual estava indo. Encontrei um plug-in de processo. A vantagem desse componente é que ele é simples de usar e leve.
1. Exibição de efeito
Vamos ver o efeito primeiro
Versão azul reduzida
2. Descrição do código -fonte
Endereço de código aberto.
3. Exemplos de código
Primeiro, faça referência ao arquivo necessário
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/ystep-master/css/ystep.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src = "~/content/bootstrap/js/bootstrap.js"> </sCript>
Este componente requer suporte de dois componentes: jQuery e bootstrap.
Em seguida, defina uma div vazia
<div id = "div_yStep1"> </div>
Por fim, inicialize o componente quando o botão for clicado
<script type = "text/javascript"> $ (function () {$ ("#btn_subMit"). clique (function () {$ ("#div_ystep1"). loadstep ({// step scheme // scheme // valor opcional: tamanho pequeno: "pequeno", // ystepp schem [{// Título do nome da etapa: "Start", // Etapa Conteúdo (quando o mouse se move para o nó desta etapa, será solicitado) Conteúdo: "Process Start"}, {Title: "Aprovação", Conteúdo: "Todo Funções Iniciar {:}, {Title:" Implementation "," Content: "Requisitos de requisitos"} {{: "; $ ("#div_ystep1"). setstep (3); </script>Se for uma etapa dinâmica, pode ser necessário construir as etapas atribuem dinamicamente. Em seguida, use setStep () para definir qual etapa você alcançou.
Métodos comuns:
// pule para a próxima etapa $ (". Ystep1"). Nextstep (); // pule para a etapa anterior $ (".5. Button Pump Component Bootstrap Confirmation
O componente de prompt de botão é um pouco semelhante à função de confirmação no JS, mas essa confirmação é um efeito pop-up da dica de ferramenta, dando aos usuários um julgamento de determinação e cancelamento, e a interface é mais amigável. Antes de apresentar este componente, você pode primeiro dar uma olhada no efeito da caixa imediata no bootstrap:
O componente de confirmação do Bootstrap é implementado com base no efeito desta caixa de prompt. Existem muitos componentes de confirmação de bootstrap no GitHub, mas eles são basicamente os mesmos. .
1. Exibição de efeito
O efeito mais original
Título personalizado, texto do botão
2. Descrição do código -fonte
Endereço de código aberto
3. Exemplos de código
(1) Arquivos de cotação:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~ content/bootstrap/js/bootstrap.js"
Os estilos requerem suporte do bootstrap.css. O JavaScript requer suporte de jQuery e bootstrap.js.
(2) Tag de clique correspondente (pode ser qualquer tag)
<button type = "button" id = "btn_submit1"> <span Aria-hidden = "true"> </span> delete </butut>
(3) Inicialização do JS
<script type = "text/javascript"> $ (function () {$ ('#btn_submit1'). }, ONCANCEL: function () {// alert ("clicked cancel"); </script>(4) mais atributos, eventos, métodos
Além das propriedades inicializadas mencionadas acima, existem algumas propriedades comumente usadas. por exemplo:
Btnokclass: determine o estilo do botão; BtNCancelClass: Cancelar o estilo do botão; Singleton: Se apenas uma caixa de determinação é permitida; popout: se deve ocultar a caixa de determinação quando o usuário clicar em outro local;
Por exemplo, você pode definir o Btnokclass como Btnokclass: 'Btn Btn-Sm Btn-Primary',
6. Classificação de imagem e componentes de filtragem Muxitup
Este é um componente de agrupamento e filtragem com um efeito muito legal e um endereço de código aberto. O blogueiro viu uma demonstração na internet e achou que era realmente eficaz. Sem mais delongas, a imagem acima.
Que tal isso, o efeito está ok. Esse componente não é usado no projeto por enquanto, mas sinto que existe a possibilidade de precisar no futuro, então eu o colecionei. O código de implementação é copiado online. Eu não estudei em profundidade. Se você estiver interessado, pode dar uma olhada. O código HTML+JS é implementado da seguinte forma:
<html> <head> <meta name = "viewport" content = "width = width de dispositivo"/> <title> mixitup </title> <link href = "~/content/image/css/normalize.css" rel = "stylesssss"/> <link = "~//contents"/layout.c "c "/link =" ~//content " src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/mixitup-master/jquery.easing.min.js"></script> <script src="~/Content/mixitup-master/build/jquery.mixitup.min.js"></script> <script type="text/javascript"> $(function () { var filterList = { init: function () { debugger; // MixItUp plugin $('#portfoliolist').mixitup({ targetSelector: '.portfolio', filterSelector: '.filter', effects: ['fade'], easing: 'snap', // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { // Simple parallelax effect $('#portfoliolist .portfolio').hover( function () { $(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad'); $(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad'); }, function () { $(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad'); $(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad'); } ); } }; // Run the show! filterList.init(); }); </script></head><body> <div> <ul id="filters"> <li><span data-filter="app card icon logo web">All categories</span></li> <li><span data-filter="app">Mobile application</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="icon">icon</span></li> <li><span data-filter="logo">Logo</span></li> <li><span data-filter="web">Web page</span></li> </ul> <div id="portfoliolilist"> <div data-cat="logo"> <div> <img src="~/Content/image/Logo/5.jpg" /> <div> <div> <a>Bird Document</a> <span>Logo</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/app/1.jpg" /> <div> <div> <a>Visual Infography</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/4.jpg" /> <div> <a>Sonor's Design</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/1.jpg" /> <div> <div> <a>Typography Company</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/3.jpg" /> <div> <a>Weatherette</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/4.jpg" /> <div> <div> <a>BMF</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/5.jpg" /> <div> <a>Techlion</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/1.jpg" /> <div> <div> <a>KittyPic</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/2.jpg" /> <div> <a>Graph Plotting</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/card/2.jpg" /> <div> <a>QR Quick Response</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/6.jpg" /> <div> <div> <a>Mobi Sock</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <a>Village Community Church</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/4.jpg" /> <div> <div> <a>Domino's Pizza</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/3.jpg" /> <div> <a>Backend Admin</a> <span>Web design</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/1.jpg" /> <div> <div> <a>Instagram</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/2.jpg" /> <div> <a>Student Guide</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/2.jpg" /> <div> <div> <a>Scoccer</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/icon/5.jpg" /> <div> <a>3D Map</a> <span>Icon</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/web/1.jpg" /> <div> <div> <a>Note</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/3.jpg" /> <div> <a>Native Designers</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/logo/4.jpg" /> <div> <a>Bookworm</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <div> <a>Sandwich</a> <span>Icon</span> </div> <div></div> </div> </div> </div> </div> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <a>Reality</a> <span>Business card</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/2.jpg" /> <div> <div> <a>Specialisterne</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div><!-- container --></body></html>muxitup7. Resumo
以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。
The above is the relevant knowledge of the Bootstrap component series welfare chapter (recommended) that the editor introduced to you. Espero que seja útil para você. If you have any questions, please leave me a message and the editor will reply you in time. Muito obrigado pelo seu apoio ao site wulin.com!