Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
Insere um elemento para fechar alerts
Basicamente, se você tiver alertas ou qualquer outro tipo de elemento que queira com que o usuário remova da tela, você vai usar essa função.
Nós não tratamos cookies ou qualquer solução back-end que previna o reaparecimento do elemento removido se o usuário der refresh na página. Você vai precisar fazer sua própria solução caso queira que o elemento não reapareça quando a página for atualizada.
| Seletor | Descrição |
|---|---|
| .ls-dismissable | É o elemento que será dispensado. |
| data-ls-module="dismiss" | É o nosso trigger. É ele que ativa o script. Precisa estar no elemento que irá ser clicado para remover o .ls-dismissable, por exemplo um link, botão etc... |
| data-target="#target-id" | Necessário quando o elemento que será o trigger não for filho direto de .ls-dismissable, que é o elemento que será removido. Ele aceita IDs ou CLASSES. |
Veja primeiro o exemplo abaixo: ao clicar no X do lado direito, o alerta é fechado.
1
2
3
4
<div class="ls-alert-warning ls-dismissable">
<span class="ls-dismiss" data-ls-module="dismiss">×</span>
<strong>Olá!</strong> Este é um alerta que pode ser dispensado.
</div>
A classe ls-dismissable avisa nosso script que ele será removido pelo elemento com o atributo data-ls-module="dismiss". Perceba que nesse formato, elemento com data-ls-module="dismiss" é filho direto do elemento que será removido, nesse caso o .ls-dismissable.
Suponha agora que o elemento que vai ser clicado não seja filho do .ls-dismissable, como no exemplo abaixo:
1
2
3
4
<div id="alertDismissExample" class="ls-alert-warning ls-dismissable">
Esse elemento vai ser removido por um trigger externo.
</div>
<a href="#" class="ls-btn" data-target="#alertDismissExample" data-ls-module="dismiss">fecha</a>
Note que o botão tem um atributo data-target cujo valor pode ser um ID ou uma CLASSE.
| Evento | Descrição |
|---|---|
| dismiss:close | Quando o dismiss é clicado, o evento |
Para acessar o conteúdo que foi removido, basta usar o this.
Exemplo:
1
2
3
4
5
6
7
8
9
// Um conteúdo específico pelo ID
$('body').on('dismiss:close', '#alertDismissExample', function(evt){
console.log(evt, this);
});
// Todos os conteúdos por class
$('body').on('dismiss:close', '.ls-dismissable', function(evt){
console.log(evt, this);
});