O limitInput é um plugin jquery desenvolvido pelo meu amigão Djalma Araujo.

Mas o que faz isso?

Sabe o maxlength dos inputs (ou do textarea que não existe)? Então, este plugin trata esta “propriedade” com elegância.

Como faz?

Ex 1:

$("#limitInput-eg1").limitInput({
	//tamanho limite
	limit: 10,
	//permite ou nao escrever mais
	blockTyping: true,

	//traducao do texto que aparece quando ainda pode digitar
	charName: 'caracters',
	leftString: 'left',
	//texto que aparece quando passou o limite
	excededString: 'exceded'
});

Este exemplo limita a 10 caracteres digitados e bloqueia para que não seja mais digitado.
Digite:

Ex 2:

$("#limitInput-eg2").limitInput({
	//tamanho limite
	limit: 42,
	//permite ou nao escrever mais
	blockTyping: true,

	//traducao do texto que aparece quando ainda pode digitar
	charName: 'letras',
	leftString: 'restantes',
	//texto que aparece quando passou o limite
	excededString: 'excedidas'
});

Digite:
em pt

Visite o site do Djalma ou do plugin limitInput.

Edit

Novo link para o plugin. plugin limitInput

Como?

$(document).ready(function() {
     $('#timepicker').jtimepicker();
});

<div id="timepicker"></div>

Site

Como?

<div id="rangeselection">
  <div class="highlight">
    <span class="rangestart"><span class="value"></span><span class="extra"> ...</span></span>
    <span class="rangestop"><span class="extra">... </span><span class="value"></span></span>
  </div>
</div>

<p>range: <span id="range"></span></p>

Código javascript.

function on_selection(range) {
    $('#range').html(range.toString());
};

$(document).ready(function() {
	$('#rangeselection').rangeselection({
		width: 400,
		height: 100,
		selectionrange: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
		callback: on_selection,
		num_labels: 10
    });
	/*width: tamanho
	height: altura
	selectionrange:  o que vai estar na range
	callback: chamada de resposta
	num_labels: quantidade de labels que vai ser mostrado*/

});

Agora vem o código CSS:

#rangeselection {
    width: 300px;
    height: 100px;
    border: 1px solid black;
}

.rangelabel {
    float: left;
    z-index: 100;
}

.rangelabelend {
    z-index: 100;
}

.rangestop {
    position: relative;
    float: right;
}

.rangestart {
    position: relative;
}

.legend_box {
    position: absolute;
    height: 10px;
    width: 10px;
    background: #ddd;
    z-index: -50;
}

.highlight {
    background: yellow;
    opacity: 0.5;
    position: absolute;
    width: 50px;
    height: 20px;
    z-index: -100;
}

Veja o DEMO.

Site

Mais vamos ao que interessa.

jqUploader é um plugin do jquery que te ajuda a fazer upload de arquivos mais elegantemente.

Como?

Como todos nós já sabemos, para fazer um formulário com um campo do tipo file, para uploads. Necessítamos que tenha um campo do tipo hidden com o tamanho máximo do arquivo.

<input name="MAX_FILE_SIZE" value="1048576" type="hidden" />

Após você fazer o download do jqUploader e jogar ele no seu servidor de hospedagem, você terá as seguintes possibilidades:

OBS: Veja a documentação do jqUploader para saber todas as possibilidades.

Com um código como o debaixo você consegue fazer um formulário legal pra isso:

<form id="myUploadForm" enctype="multipart/form-data" action="upload.php" method="POST">
	<fieldset>
	<legend>Meu upload</legend>
		<label for="example1">Escolha um arquivo para: </label>
		<input name="MAX_FILE_SIZE" value="1048576" type="hidden" />
		<input name="example1"  id="example1"  type="file" />
	</fieldset>
	<input type="submit" name="submit" value="Enviar" />
</form>

Site

Isto é simplesmente para provar para vocês que o que eu digo aqui funciona e que isso é chato. Não sei até quando, mais um dia funcionou rsrs.

Site do plugin.

Galera, desculpem o atraso nos posts, mais é que eu tinha programado um ai e deu tudo errado rsrs, sem contar com outros problemas.

Mais estou de volta, aqui, neste exato momento, no presente do pretérito mais do que perfeito (fui saber que isso existia no curso de inglês oO) .

Vamos ao que vos interessa.

Scrol Follow é um plugin do jquery que faz com que um objeto (pode ser uma < div > – demorei mais ainda pq estava dando problema no meu layout nesta div que eu escrevi ai =/ que raiva) siga o scroll da página.
Como assim Ruan? Explico: Sabe aquelas propagandas chatas que ficam geralmente do lado direito da tela, ai quando tem um texto grande e você desce o scroll a maldita vai junto? Então, este plugin do jquery serve para isso.

Como?

1. Vai na página do plugin e baixa ele.
2. Vai no site do jquery UI e baixa apenas o core.
3. Deposita 10 pila na minha conta.

Após ter feito os 3 passo de cima (principalmente o 3º) você terá que seguir os passo aqui debaixo.

1º. Incluir os arquivos na página:

//pelo menos isso você já deveria saber
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="jquery.scrollFollow.js"></script>

2º. Criar o HTML do elemento que irá seguir o scroll:

<div id="exemplo" style="border: 1px solid #000; position: relative; width: 300px;">
	<img src="/images/ducks.png" alt="Ducks" />
	<p>Isto é simplesmente para provar para vocês que o que eu digo aqui funciona, não sei até quando, mais um dia funcionou rsrs.</p>
	<p><a href="http://kitchen.net-perspective.com/open-source/scroll-follow/">Site do plugin.</a></p>
</div>

3º. Colocar no onload da página a chamada do plugin:

$( document ).ready(function (){
	$("#exemplo").scrollFollow();
});

Site

maxImage | full background | jQuery Plugin

MaxImage é um plugin do jquery que faz com que uma imagem fique como background do seu site, sendo ela declarada na tag < img > do seu código html.

Com este plugin do jquery você também pode fazer um slideshow no seu background.

Não fiz a demonstração deste plugin neste site pois nem tudo é perfeito. Ele tem um leve problema com scroll. Se você testar você vai ver isso, ele simplesmente da um overflow screen hidden (tudo que passar da janela suma). Mais você pode dar uma olhada no site do autor.

Site | Demo

InputLabel é um plugin do jQuery que faz um label de usabilidade nos inputs de seu formulário. Sabe aquele texto (quase transparente) que fica dentro do input e quando você clica para digital algo ele some? Então.

Vamos direto ao assunto, ele é bem simples de ser usado. Com um simples código:

$("#myInput").inputLabel();

E o html.

<label for="myInput1" style="display: none;">Enter a value</label>
<input id="myInput1" type="text" name="myInput1" style="color: rgb(102, 102, 102);"/>

Você faz isso

Ou um com valor colocado via js.

$("#myInput").inputLabel("Custom label text");

SITE | Baixar do meu site

Se você não sabe o que é tootip, basta passar seu mouse por cima deste texto. Veja que sobe uma “dica” ou tooltip como queira.

O qTip é um plugin do jQuery que faz estas maravilhas, porém achei ele meio grande com seus 38 kb no modo produção.
Mais ele é bem completo, tem muita coisa e tudo fácil de fazer.

Segue alguns exemplos.

• Cool
• Com title este link tem title

Entre outros. Confira mais no site deles.

Site | Demo

Na versão atual, ele está bem legal, até hoje eu não encontrei nenhum bug astronômico.

Segue um trecho de código.

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Ele já vem com algumas pré definições

• a – Representa caracteres alfa (letras) (A-Z,a-z)
• 9 – Representa caracteres numéricos (números) (0-9)
• * – Representa caracteres alfanuméricos (letras e números) (A-Z,a-z,0-9)

Mais você pode fazer a sua, por exemplo você deseja que a pessoa coloque apenas o caracter de adição ( + ) ou de subtração ( – ), basta:

jQuery(function($){
    // aonde tiver o ~ (tiuuuu) só vai poder ser digitado o + ou -
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

Exemplos

Data
99/99/9999
Telefone
(999)9999-9999
Personalizado
~9.99 ~9.99 999

Para quem quiser fazer mascara de moeda pode ver este post aqui: maskInputMoney | Mascara de moedas | jQuery Plugin

Site

Mascara de moeda

Para fazer formulários de fácil compreenção é sempre recomendável colocar a formatação de como o campo vai ser preenchido, para isso eu sempre recomendei o Masked Input Plugin. Porém, este plugin (que vai ser comentádo no próximo post – masked input plugin | mascaras em campo | jquery plugin) não tem formatação do tipo moeda (R$ 1,00).

Sorte nossa que o Aurélio Saraiva fez um plugin para isso e o Raul Pereira da Silva fez algumas correções. Conheçam então o maskInputMoney maskInputMoney.

//maskMoney() faz a mascara normal do Dolar
$("#dolar").maskMoney()
//Faz a mascara de moeda do Brasil
//maskMoney({symbol:"R$",decimal:",",thousands:"."})
$("#real").maskMoney({symbol:"R$",decimal:",",thousands:"."})
//Monta no modelo euro
$("#euro").maskMoney({symbol:"Euro",decimal:",",thousands:" "})
//A precisão do decimal (,000) ;
$("#precision").maskMoney({decimal:",",thousands:" ",precision:3})

//Para remover a mascara
$("#dolar").unmaskMoney();

Demo:

Link atualizado: Repositório no GitHub