CoolInput is a simple little plugin that I wrote inspired by Remy Sharp's tutorial on creating a text-hint plugin. After reading his article and creating the plugin I realized I wanted to extend it a bit and create my first plugin, so here is CoolInput!
It's ridiculously straightforward and very lightweight. Download Link
// this input box is a search box, notice the passing of a custom class and an icon
// (as a class) to the coolInput function
$('#search').coolinput({
blurClass: 'myclass',
iconClass: 'search'
});
CoolInput é um plugin extremamente simples inspirado no tutorial do Remy Sharp sobre criar um text-hint plugin. Após ler o seu artigo percebi que gostaria de adicionar algumas opções adicionais e também queria criar o meu primeiro plugin, então aqui está o CoolInput!
O plugin é absuradamente simples e leve, não tem segredo! Link para Download
// esta é uma caixa de busca, repare que uma classe customizada e um icone
// são passadas como opções à função
$('#search').coolinput({
blurClass: 'myclass',
iconClass: 'search'
});
// Uses default options, notice how you can chain other commands afterwards normally
$('#notsearch').coolinput().addClass('black');
// Utiliza as opções padrão, repare que dá pra 'chain' outros comandos depois normalmente
$('#notsearch').coolinput().addClass('black');
// third input box overrides default behaviour by not clearing the text before submitting
// if there was no change, ie:
// the text in the box at the moment of the submit is the default text, so in this case
// the default text WILL submit.
$('#dontclear').coolinput({
clearOnSubmit: false
});
// este input muda o comportamento padrão e não esvazia o conteúdo da caixa antes de enviar
// por exemplo, caso o usuário não mudou o texto, o texto padrão (o hint) será enviado
$('#dontclear').coolinput({
clearOnSubmit: false
});
New in 1.3:
// now you can specify the source for the default text and don't necessarily have to
// use the title attribute anymore
$('#custom_attribute').coolinput({
source: 'id'
});
Novo na versão 1.3:
// o texto padrão poderá vir de qualquer elemento e não mais necessariamente
// do atributo title ao especificar a opção 'source'
$('#custom_attribute').coolinput({
source: 'id'
});
New in 1.4:
// now you can manually specify the hint to be used without using an attribute
// this overrides any 'source' option passed
$('#manualhint').coolinput({
hint: 'foo'
});
Novo na versão 1.4:
// o texto padrão pode ser especificado manualmente, sem usar um atributo
// isto irá sobrescrever a opç&atile;o 'source'
$('#manualhint').coolinput({
hint: 'foo'
});
New in 1.4:
// you can also manually specify the hint by passing it directly to the function
// oh, and it also works with textareas!
$('#manualhint2').coolinput('foobar');
Novo na versão 1.4:
// o texto padrão também pode ser passado diretamente à função
// funciona também com textarea
$('#manualhint2').coolinput('foobar');