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 2.0:
// - Uses HTML5 placeholder attribute, if supported
//
// - Ability to ignore HTML5 placeholder suuport
//
// - Added clearOnFocus extra param. Suppose the user wants to use coolinput not
// just as a hint, but to get people "jumpstarted" on their input. For example,
// a url input which suggests "http://". You wouldn't want this to be cleared on
// focus, but probably would want it restored on blur if the user leaves the input blank.
//
// - Added persistent extra param. Suppose the user wants the hint to appear only
// the first time people see their input. This seems like a rather uncommon case,
// but the implementation was so trivial I figured it was worth making that 100th
// person out of 100 happy.
$('#custom_attribute').coolinput({
useHtml5: false,
persistent: true,
clearOnFocus: true
});
Novo na versão 2.0:
// - Utiliza o atributo "placeholder" do HTML5, se suportado
//
// - Opçã para ignorar o atributo "placeholder" do HTML5
//
// - Adicionado parâmetro opcional, "clearOnFocus"
//
// - Adicionado parâmetro opcional, "persistent"
$('#custom_attribute').coolinput({
useHtml5: false,
persistent: true,
clearOnFocus: true
});
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');