Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
Opções para desabilitar campos ou mostrar em forma de texto
Adicione a classe ls-form-disable para desabilitar tudo dentro do elemento (uma div ou todo o form) ou ls-no-style-input para desabilitar um campo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="" class="ls-form ls-form-horizontal ls-form-disable" data-ls-module="form">
<label class="ls-label col-md-3">
<b class="ls-label-text">Nome</b>
<input type="text" name="nome" placeholder="Nome e sobrenome" class="ls-field" required>
</label>
<label class="ls-label col-md-3">
<b class="ls-label-text">Nome</b>
<input type="text" name="nome" placeholder="Nome e sobrenome" class="ls-field" required>
</label>
<label class="ls-label col-md-3">
<b class="ls-label-text">Nome</b>
<input type="text" name="nome" placeholder="Nome e sobrenome" class="ls-field" required>
</label>
</form>
Adicione a classe ls-form-text no elemento pai para deixar com aparência de texto todos os campos que estiverem dentro (uma div ou todo o form) ou insira essa mesma classe no input desejado para desabilitá-lo. Pode editar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="" class="ls-form ls-form-horizontal ls-form-text" data-ls-module="form">
<label class="ls-label col-md-3">
<b class="ls-label-text">Nome</b>
<input type="text" name="nome" placeholder="Nome e sobrenome" class="ls-field" required>
</label>
<label class="ls-label col-md-3">
<b class="ls-label-text">Senha</b>
<input type="password" name="senha" placeholder="Campo de senha" class="ls-field" required>
</label>
<label class="ls-label col-md-3">
<b class="ls-label-text">E-mail</b>
<input type="email" name="email" placeholder="Campo de E-mail" class="ls-field" required>
</label>
</form>
Você pode combinar os comportamentos para ter um formulário com aparência de texto e desabilitado. Não pode editar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="" class="ls-form ls-form-text ls-form-horizontal ls-form-disable" data-ls-module="form">
<label class="ls-label col-md-3">
<b class="ls-label-text">Nome</b>
<input type="text" name="nome" placeholder="Nome e sobrenome" value="Diego Maradona" required >
</label>
<label class="ls-label col-md-3">
<b class="ls-label-text">Senha</b>
<input type="password" name="senha" placeholder="Campo de senha" value="rei_pele" required >
</label>
<label class="ls-label col-md-3">
<b class="ls-label-text">E-mail</b>
<input type="email" name="email" placeholder="Campo de E-mail" value="diego@maradona.com" required >
</label>
</form>
Essa funcionalidade é muito, muito legal. Combinando as propriedades que vimos anteriormente de desabilitar um botão e mostrá-lo como texto, você pode fazer um botão que habilita e desabilita os campos. Veja como funciona:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="" class="ls-form ls-form-horizontal" data-ls-module="form">
<fieldset id="fields-disabled" class="row ls-form-disable ls-form-text">
<label class="ls-label col-md-2">
<b class="ls-label-text">Nome</b>
<input type="text" name="nome" value="tenetur magni" placeholder="Nome e sobrenome" class="ls-field" required>
</label>
<label class="ls-label col-md-2">
<b class="ls-label-text">Nome</b>
<input type="text" name="nome" value="omnis ut" placeholder="Nome e sobrenome" class="ls-field" required>
</label>
<label class="ls-label col-md-2">
<b class="ls-label-text">Nome</b>
<input type="text" name="nome" value="nulla commodi" placeholder="Nome e sobrenome" class="ls-field" required>
</label>
</fieldset>
<div class="ls-actions-btn">
<button class="ls-btn-primary hidden-elements" data-toggle-class="ls-display-none" data-target=".hidden-elements" data-ls-fields-enable="#fields-disabled">Editar campos</button>
<button class="ls-btn-primary ls-display-none hidden-elements" type="submit">Salvar</button>
<button data-toggle-class="ls-display-none" data-target=".hidden-elements" data-ls-fields-enable="#fields-disabled" class="ls-btn-danger ls-display-none hidden-elements" type="submit">Cancelar</button>
</div>
</form>
Eu tenho um formulário normal, com as classes ls-form-disable no fieldset que envolve os campos que quero desabilitar. Esse fieldset (que poderia ser um DIV), tem um ID para sua identificação. Até aqui tranquilo.
Agora, depois do Fieldset, existem 3 botões, vou explicar um por um: um botão para EDITAR OS CAMPOS, que é onde o usuário vai clicar para que os campos fiquem editáveis. Os outros dois botões, de SALVAR e CANCELAR estão escondidos. Veja o código do botão EDITAR:
1
<button class="ls-btn-primary hidden-elements" data-toggle-class="ls-display-none" data-target=".hidden-elements" data-ls-fields-enable="#fields-disabled">Editar campos</button>
O valor do atributo data-ls-fields-enable deve ser o ID ou a CLASSE do elemento PAI que envolve os campos que você quer habilitar/desabilitar.
O atributo data-toggle-class e o data-target trabalham juntos: o data-target indica qual o elemento (no nosso caso qualquer elemento com a classe .hidden-elements) vai ter a classe que está no data-toggle-class alternada (no nosso caso a classe .ls-display-none, que faz os botões CANCELAR e SALVAR ficarem escondidos).
Quando o botão editar é clicado, ele retira a classe .ls-display-none dos elementos com a classe .hidden-elements.
Os botões de CANCELAR e SALVAR, são simples botões, com as classes que serão manipuladas pelo botão EDITAR do nosso exemplo. Veja o código abaixo:
1
2
<button class="ls-btn-primary ls-display-none hidden-elements" type="submit">Salvar</button>
<button data-toggle-class="ls-display-none" data-target=".hidden-elements" data-ls-fields-enable="#fields-disabled" class="ls-btn-danger ls-display-none hidden-elements" type="button">Cancelar</button>