Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
Controle checkboxes utilizando qualquer elemento
| Classe / Atributo | Descrição |
|---|---|
| data-checkbox-target | Atributo cujo valor guarda o checkbox alvo |
| data-checkbox-toggle | Atributo utilizado no checkbox para identificar que ele é alvo do elemento gatilho. |
| data-toggle-text | Atributo utilizado para modificar o texto do elemento gatilho, caso seja necessário. |
Para selecionar um ou mais checkboxes a partir de um click em outro elemento, você precisa colocar data-ls-module="checkboxToggle" no elemento que servirá como gatilho para essa ação. Além disso, também é necessário colocar o data-checkbox-target="foo" no mesmo elemento. O conteúdo desse servirá como "seletor" para os checkboxes alvo.
Nos checkboxes que deverão interagir, você coloca o data-checkbox-toggle="foo" com o mesmo conteúdo do data-checkbox-target presente no elemento gatilho.
Abaixo seguem alguns exemplos de utilização:
| Título | Campanha | Status | Data de envio | |
|---|---|---|---|---|
| Mensagem Teste Locastyle | Campanha | Enviada | 21/09/2013 as 20:00 PM | |
| Mensagem Teste Locastyle | Campanha | Enviada | 21/09/2013 as 20:00 PM |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table class="ls-table ls-no-hover">
<thead>
<tr>
<th class="ls-width-50"><input type="checkbox" data-ls-module="checkboxToggle" data-checkbox-target="foo" id="checkboxElement" /></th>
<th>Título</th>
<th class="hidden-xs">Campanha</th>
<th>Status</th>
<th class="hidden-xs">Data de envio</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" data-checkbox-toggle="foo" /></td>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
<tr>
<td><input type="checkbox" data-checkbox-toggle="foo" /></td>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
</tbody>
</table>
Para modificar o texto do elemento gatilho, basta colocar o atributo data-toggle-text no mesmo, com o texto que você deseja substituir.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="ls-list">
<header class="ls-list-header">
<div class="ls-list-title col-md-12">
<input type="checkbox" data-checkbox-toggle="checklist">
<a href="#" >Identificador da conta</a>
<small>Primeiro item da lista </small>
</div>
</header>
</div>
<div class="ls-list">
<header class="ls-list-header">
<div class="ls-list-title col-md-12">
<input type="checkbox" data-checkbox-toggle="checklist">
<a href="#" >Identificador do usuário</a>
<small>Segundo item da lista </small>
</div>
</header>
</div>
<div class="ls-list">
<header class="ls-list-header">
<div class="ls-list-title col-md-12">
<input type="checkbox" data-checkbox-toggle="checklist">
<a href="#" >Identificador de dados</a>
<small>Terceiro item da lista</small>
</div>
</header>
</div>
<a href="#" class="ls-btn-primary" data-ls-module="checkboxToggle" data-checkbox-target="checklist" data-toggle-text="Deselecionar todos">Selecionar todos</a>
Você pode escutar eventos no click do elemento gatilho, veja a referência abaixo.
| Evento | Descrição |
|---|---|
| checkboxToggle:activated | Quando um elemento gatilho for ativado, o evento |
| checkboxToggle:deactivated | Quando um elemento gatilho for desativado, o evento |
Exemplo:
1
2
3
4
5
6
7
8
9
// Um elemento gatilho específico
$('#id-do-elemento').on('checkboxToggle:activated', function() {
// do something
})
// Um elemento gatilho específico
$('#id-do-elemento').on('checkboxToggle:deactivated', function() {
// do something
})