Você pode navegar pelas “categorias” tradicionais ou pela busca(se você tiver uma vaga lembrança do que esta procurando)

Fica a dica, favoritem aí http://jqapi.com/

Este é o plugin:

(function($){
	$.fn.friendly = function(to){
		//Divide o valor atual em array
		var curr = $(to).val().split('-');
		/*
		Verifico se o primeiro item é vazio, se sim,
		eu coloco o timestamp, se não, eu verifico se
		o último valor não é um número, se não for, eu
		mantenho sem timestamp, se for um número, eu mantenho
		o número, assim evita-se 404 pelo Robô do google e afins
		*/
		var ts = curr[0]==''?'-'+Math.round(((new Date()).getTime()-Date.UTC(1970,0,1))/1000):(isNaN(curr[curr.length-1])?'':'-'+curr[curr.length-1]);
		/*
		A conversão ocorre basicamente aqui, onde no final eu
		concateno com o timestamp
		*/
		$(to).val($(this).val().replace(/\s/g, '-').replace(/[^\w/-]/g, '').toLowerCase()+ts);
	};
})(jQuery);

Repare que coloquei uma variável “ts” que gera um timestamp, fiz isso para o meu caso onde o sistema não valida se a url amigável já existe, colocando um timestamp no final ele nunca vai se repetir e não faz diferença para o SEO

Como funciona?
Funciona assim… no primeiro seletor, você coloca o elemento de onde você quer o texto, e dentro do friendly, você coloca o seletor de onde você quer que o texo apareça
Ex:

$('#tab_general input[name^=product_description][name*=name]').friendly('#tab_data input[name=keyword]');

Pra que ele atualize pra cada palavra digitada, você precisa associar a um evento no elemento, no meu caso eu fiz isso aqui:

$('#tab_general input[name^=product_description][name*=name]').bind('keyup', function(){
        $(this).friendly('#tab_data input[name=keyword]');
    })

No keyup do campo, eu atualizo o segundo campo

Espero que seja útil

Para aqueles que querem economizar tempo validando formulárioso Validity é uma boa pedida.

Com uma boa e organizada documentação e uma forma de utilização simplificada vale a pena ao menos experimentar.

O Validity é um plugin para jQuery que tem como princípios:  fácil utilização, um javascript não obstrutivo e uma aparência customizável.

Um ponto de atenção é que as mensagens são por padrão em inglês, porém é muito fácil corrigir isso já que os textos ficam no início do arquivo fonte.

Fora isso a sua utilização é extremamante simples:

$('#my-form').validity(function() {

     $("#text-box-one")
        .require()
        .match("number");

    $("#text-box-two")
        .match("date");

});

Se você é como eu, que prefere desenvolver sua própria solução para validação de formulários, vale a pena ao menos aprender com a forma com que o Validity é implementado.

Fica a dica.

Um excelente vídeo (em inglês) sobre como criar um plugin para jQuery em menos de 5 minutos.

A facilidade para a criação de plugins é uma das maiores vantagens do jQuery sobre seus concorrentes (chegamos até a comentar isso aqui).

Vale a pena perder esses 5 minutos e começar a criar seu próprios plugin.

Fonte:  AddyOsmani

Para puxar o assunto para as mais famosas bibliotecas js do mercado, algo sobre o que pretendo escrever posteriormente, estou indicando este excelente plugin para o Chrome.

O Chrome Sniffer identifica o framework, CMS e biblioteca javascript da página entre as 45 mais populares algumas delas nossas velhas conhecidas de guerra:

• jQuery;
• jQuery UI;
• ExtJS;
• Prototype;
• MooTools;
• Dojo;
• script.aculo.us;
• YUI.

O Chrome Sniffer é uma ferramenta essecial para todos aqueles que gostam de aprender fuçando.

Enjoy.

// Este código afeta toda requisição ajax que for feita usando jQuery
// não é necessário replicar esta operação em nenhuma outra parte
$("#loading").ajaxStart(function(){
//Quando a requisição começar, Exibe a DIV
   $(this).show();
});
$("#loading").ajaxStop(function(){
//Quando a requisição parar, Esconde a DIV
   $(this).hide();
});

</script>

E depois chamar a função com a configuração da máscara

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

Você ainda pode dizer o que vai ficar no lugar do carácter, até que este espaço possa ser preenchido pelo usuário, exemplo “__/__/____” neste caso o placeholder é um “underline”

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:"_"});
});

Ou você pode deixar com um espaço em branco.

Os parâmetros que o plugin aceita para a máscara são:

• a – Representa um carácter alpha numérico (A-Z,a-z)
• 9 – Representa um carácter numérico (0-9)
• * – Representa um carácter alpha numeric character (A-Z,a-z,0-9)

Você também pode obrigar alguns carácteres como no exemplo abaixo

jQuery(function($){
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

Neste caso ele esta dizendo que o “~” deve aceitar somente sinal de “+”(mais) ou “-”(menos)

Você pode encontrar mais exemplos práticos e fazer o download na página dos caras
http://digitalbush.com/projects/masked-input-plugin/

Limitação de registros por página e ordenação

Busca instantânea em todos os campos da tabela

A ativação é praticamente ridícula, tenho até vergonha de postar aqui, mas vamos lá…
Primeiro óbviamente, para que tudo funcione corretamente, você deve instalar a lib do jQuery e o plugin dataTables no seu sistema, isso deve ser o mais difícil perto do próximo passo.

Crie sua tabela respeitando as tags <thead> e <tbody> que são praticamente desconhecidas por muitos programadores, e dê um ID para sua tabela


Depois disso, adicione em um bloco script o comando $(‘#idDaSuaTabela’).dataTable() como no exemplo abaixo

Agora imagine a economia que você pode fazer em desenvolvimento, tendo isso em suas mãos!
Isso valoriza suas aplicações e só traz benefícios, tanto para você quanto para o seu cliente, quem sabe você não ganha até um aumento!
Foi útil? então, vamos colaborar com os caras, não seja mão-de-vaca :-p

Link: http://www.datatables.net/

Uma das correções que me foram úteis foi a da função “clone” com parâmetro “true” no IE.
Esta função faz o que o nome diz, literalmente um clone de qualquer elemento, no meu caso um formulário complexo cheio de event handlers, o atributo “true” faz com que todos os event handlers também sejam clonados, no FireFox(como sempre) funciona direitinho, mas no IE quando você clonava um elemento clonado ele gerava um bug que pelo menos pra mim, clonava o elemento 2 vezes.

Com a versão 1.3.2 o bug foi corrigido e está aprovado!

Uma observação que faço pra quem possuia uma versão mais velha(1.2.6) e usava “@” no seletor jQuery, suas aplicações precisam ser atualizadas removendo o “@”, ele não é mais utilizado,
antes $(“input[@name=xxx]“) agora $(“input[name=xxx]“)

jQuery: www.jquery.com

Exemplo:

jQuery(function() {
	jQuery('#jcrop_target').Jcrop({
		keySupport: false
	});
});

Sendo assim o suporte a teclas não funcionará, mas seu crop(que mais importa) continuará bonito

Uma outra opção(que no meu caso não é viável já que o tamanho da área varia de acordo com uso do browser e resolução da tela), seria definir o tamanho da área destinada ao Crop

Exemplo:

$(function() {
    $('#cropbox').Jcrop({ boxWidth: 450, boxHeight: 400 });
});

Espero que essa dica possa ajudar muita gente, pra que não fiquem igual algumas pessoas(eu) pastando horas para tentar solucionar esse problema.

$('li').click(function(){
   alert('Pan!');
})

Só que você terá que executar essa operação de bind todas as vezes, daí vai acontecer algo estranho… fazendo assim você vai somar o bind click em todos os itens que já o possuem, ou seja, no segundo bind, quem já estava “binded” terá 2 alerts e assim por diante, então o que você tinha que fazer?

$('li').unbind();
$('li').click(function(){
   alert('Pan!');
})

Tinha que desfazer o bind e em seguida aplicar novamente.
Com a função Live, você faz o bind apenas uma vez, os novos itens que vão entrando, automaticamente recebem esse bind.

$('li').live('click',function(){
   alert('Pan!');
})

Simples assim!
Para cancelar você pode usar o “preventDefault” no evento

$('li').live('click', function(event){
  event.preventDefault();
});

[]s

Depois de incluído os devidos scripts(jQuery e jWYSIWYG), a aplicação do bichinho é muito simples

$(<span class="reserved">function</span>()
{
    $(<span class="string">'#wysiwyg'</span>).wysiwyg();
});

A página do projeto você encontra aqui: http://code.google.com/p/jwysiwyg/

A instalação é bastante simples, você vai precisar da lib jQuery e do plugin s3Slider
os exemplos e arquivos para download você vai encontrar no site do desenvolvedor, o plugin é compatível com todos os browsers mais utilizados atualmente.

Link: http://www.serie3.info/s3slider/index.php

Demo: http://www.emposha.com/demo/fcbkcomplete/

Download: http://www.emposha.com/upload/jquerymultiselect1_0_3.zip

Fonte: http://www.emposha.com/javascript/jquery/jquerymultiselect.html

$(document).ready(function () {
	$('#TABLETOCONTROL').jTPS( {perPages:[5,12,15,50,'ALL']} );
});

O resultado é: Mais um cliente feliz!

Link

Link

Exemplo:

jQuery(function() {
		jQuery('#jcrop_target').Jcrop({
			setSelect: [ 20, 130, 480, 230 ],
			addClass: 'custom',
			bgColor: 'yellow',
			bgOpacity: .8,
			sideHandles: false
		});
	});

CSS Customizado:

.custom .jcrop-vline, .custom .jcrop-hline {
	background: yellow;
}
.custom .jcrop-handle {
	border-color: black;
	background-color: #C7BB00;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

Agora que você ja ficou curioso, segue aí o link http://deepliquid.com/projects/Jcrop/demos.php?demo=handler

$.fn.makeThemRed = function() {
    this.css({color: "red"});
    return this;
}
$("p").makeThemRed();

Ponto para eles e parabéns pelo novo site.

Update:
Parece que algumas pessoas não gostaram do banner “Be a javascript rock star” e o pessoal do Jquery resolveu tirar.
Porém em contra partida colocaram um “Easter egg” no site que é um código bem conhecido daqueles que já jogaram tartarugas ninja.

Exemplos:
Selecionando objetos, por Tag.
CSS: a{//}
jQuery: $(“a”);

Selecionando objetos, pelo ID.
CSS: #itemMenu{//}
jQuery: $(“#itemMenu”);

Selecionando objetos, por classe.
CSS: .className{//}
jQuery: $(“.className”);

Acho que deu pra entender não é? Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez, exemplo:

$("input, textarea, select, #itemMenu, .className");

Não para por aí… e que tal chamar um elemento dentro de outro objeto específico?

$("input","#idForm");

neste caso estamos selecionando todos os inputs de dentro de um objeto informado pelo id

Caramba… legal hein! Mas como eu pego um objeto pelo nome usando jQuery? (como se fosse o getElementsByName)

$("input[name=nomeDoCara]");

Hmmm então se eu posso pegar pelo nome desse jeito… eu posso procurar por outros atributos!!!

Vamos lá…

$("input[type=checkbox]");

Assim eu peguei todos os inputs do tipo checkbox, mas eu quero só os que estão checados!!
Como faço isso?
Simples

$("input[type=checkbox]:checked");

My Holy God!! That’s Amazing!!!
Yeap… i know!

Mas aqui é só input eu não sei qual tipo de elemento o nome vai ser.
Tchanannn

$("*[name=nomeDoCara]");

sim, você pode usar o asterisco, eu não recomendo fazer isso porque você vai obrigar o jQuery a percorrer tooodo o código da página, o desenpenho ja não é tão legal, mas funciona.

Agora que eu tenho os objetos, posso trabalhar com eles de forma generalizada ou isolada.
Um exemplo generalizado:

$("a").css({color: "red"});

Assim, estou dizendo que todos os links serão vermelhos, eu não conheço cada elemento, mas quero que sejam vermelhos.

Um exemplo de trabalho isolado:

$("a").each(function(){
if($(this).attr("target") == "_blank"){
$(this).css({color: "red"});
};
});

Com a função “each” você pode percorrer cada elemento(representado por “this”) retornado pelo seletor $, neste caso estou verificando se o atributo target é igual a _blank, então só neste caso a cor será vermelha.

Espero que tenha sido útil, qualquer dúvida que tiver, é só mandar no comentário

[]s

A instalação é muito facil, e o resultado excelente!

tatata…. kd o link???

http://fancy.klade.lv/

enjoy ;p

• Scripts separados para upload e scripts separados para processar o formulário.
• Primeiro, os uploads são processados.
• Segundo, o formulário é submetido.
• A idéia é validar o formulario antes de fazer o upload, para isso, você usar Ajax como no demo3 do site.

Veja aqui este exemplo: http://uploader.webunity.nl/

jQuery Sparklines

Veja aqui: http://omnipotent.net/jquery.sparkline/

http://webplicity.net/flexigrid/

Aí vai a dica: http://stanlemon.net/projects/jgrowl.html

<form>
<fieldset>
  <legend>Formulário de exemplo</legend>
  <label for="cep">CEP:</label>
<input id="cep" maxlength="8" name="cep" size="9"  onBlur="getEndereco()"/>

  <label for="rua">Logadouro:</label>
<input id="rua" name="rua" size="50" />

  <label for="bairro">Bairro:</label>
<input id="bairro" name="bairro" size="30" />

  <label for="cidade">Cidade:</label>
<input id="cidade" name="cidade" />

  <label for="estado">Estado</label>
<input id="estado" maxlength="2" name="estado" size="2" />

  </fieldset>
</form>

Não esquecendo de fazer o include da lib do jQuery
Este será o Script

	// Função única que fará a transação
	function getEndereco() {
			// Se o campo CEP não estiver vazio
			if($.trim($("#cep").val()) != ""){
				/*
					Para conectar no serviço e executar o json, precisamos usar a função
					getScript do jQuery, o getScript e o dataType:"jsonp" conseguem fazer o cross-domain, os outros
					dataTypes não possibilitam esta interação entre domínios diferentes
					Estou chamando a url do serviço passando o parâmetro "formato=javascript" e o CEP digitado no formulário
					http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val()
				*/
				$.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val(), function(){
					// o getScript dá um eval no script, então é só ler!
					//Se o resultado for igual a 1
			  		if(resultadoCEP["resultado"]){
						// troca o valor dos elementos
						$("#rua").val(unescape(resultadoCEP["tipo_logradouro"])+": "+unescape(resultadoCEP["logradouro"]));
						$("#bairro").val(unescape(resultadoCEP["bairro"]));
						$("#cidade").val(unescape(resultadoCEP["cidade"]));
						$("#estado").val(unescape(resultadoCEP["uf"]));
					}else{
						alert("Endereço não encontrado");
					}
				});
			}
	}

Os arquivos deste exemplo você pode baixar aqui http://www.ajaxianos.com.br/arquivos/cepSomentejQuery.zip

Este é o código do plugin:
http://www.ajaxianos.com.br/arquivos/preloadCssImages.jQuery_v2.js

/**
 * --------------------------------------------------------------------
 * jQuery-Plugin "preloadCssImages"
 * by Scott Jehl, scott@filamentgroup.com
 * http://www.filamentgroup.com
 * reference article: http://www.filamentgroup.com/lab/automated_image_preloading/
 * demo page: http://www.filamentgroup.com/examples/preloadImages/
 *
 * Copyright ©2008 Filament Group, Inc
 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 *
 * Version: 2.0, 06.04.2008
 * Changelog:
 * 	02.20.2008 initial Version 1.0
 *  06.04.2008 Version 2.0 : removed need for any passed arguments. Images load from any and all directories.
 * --------------------------------------------------------------------
 */
jQuery.preloadCssImages = function(){
	var allImgs = [];//new array for all the image urls
	var k = 0; //iterator for adding images
	var sheets = document.styleSheets;//array of stylesheets

	for(var i = 0; i0 && imgUrls != ''){//loop array
			var arr = jQuery.makeArray(imgUrls);//create array from regex obj
			jQuery(arr).each(function(){
				allImgs[ k ] = new Image(); //new img obj
				allImgs[ k ].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this;	//set src either absolute or rel to css dir
				k++;
			});
		}
	}//loop
	return allImgs;
}

Para usar, além de ter a Lib jQuery na sua página(óbvio), basta rodar este comando:

$.preloadCssImages();

Eu particularmente executaria depois que a página estivesse inteiramente carregada, usando a função “ready” do jQuery:

$(document).ready(function(){$.preloadCssImages();});

Na página do Scott você pode ver um exemplo dessa belezinha funcionando
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

Bom, vou responder estas perguntas durante este exemplo!
1º Por que não é recomendado fazer o site 100% em ajax?
- Simples, porque os robôs de busca como o Google, não processam javascript, então se você quiser ter o seu conteúdo indexado por ele, terá que possibilitar sua leitura sem o uso de javascript

2º O que melhora?
- Quando seu site é carregado pela primeira vez, todo o seu template é carregado, e a cada clique, lá vai o browser carregar tudo novamente… isso gera uma sobrecarga desnecessária, usando o Ajax para carregar somente o conteúdo do seu site, além de mais rápido, você tem um aproveitamento de performance e consumo de tráfego no servidor, assim, todo mundo sai ganhando!

3º Como isso funciona?
- Para que o script funcione corretamente, o seu site tem que ter uma estrutura preparada para isso, ou seja, tem que existir algum parâmetro onde você possa desabilitar o layout do lado do servidor, assim, quando você fizer a requisição via ajax, somente o conteúdo será retornado.

Ok, agora que temos as explicações e o conceito, vamos codificar :p
Vou utilizar somente a lib jquery

// Converte todos os links para Ajax
function convert2Ajax(){
// Busco na pagina, todas as tags "a", e para cada uma encontrada eu faço uma verificação
	$("a").each(
		function(){
			// Vejo os primeiros 6 caracteres do conteúdo do atributo href
			var linkType = $(this).attr("href").substring(0,6);
			// Se o link não for de javascript ou mailto
			if(linkType != "javasc" && linkType != "mailto"){
				// Se não existe o atributo "target"
				if(!$(this).attr("target")){
				/*
				Aqui eu faço uma graça, mudo o status da pagina para a descrição/texto do link
				*/
				$(this).mouseover(function(){
						   window.status = $.trim($(this).html());
						   return (true);
							   }).mouseout(function(){
							   window.status = $.trim($(this).html());
							   return (true);
							   });
				// Finalmente troco o conteúdo do href pelo comando javascript que vai chamar a função ajax
				// Antes eu colocava javascript:void(0); mas depois que adquiri um MacBook percebi
				// que não funcionava bem no safari, então passei a chamar assim mesmo!
				$(this).attr("href","javascript:carregaConteudo('"+$(this).attr("href")+"&Ajax=true');");
			}
		}
	}
)}

Analisando o código, você pode verificar que estou acrescentando o parâmetro “Ajax=true” à url na entrada de dados da função “carregaConteudo”, no servidor, este parmetro inibe o layout do site, trazendo somente o conteúdo.

A função que carrega o conteúdo é extremamante simples

function carregaConteudo(url){
	$.ajax({
		url: url,
		data:{},
		dataType:"html",
		beforeSend: function(){
			// Antes de enviar a requisição, exibo a mensagem "Carregando"
			$("#loading").show();
		},
		success: function(r){
			// Se ocorrer tudo bem, insiro o conteúdo retornado na div #contentRight
			$("#contentRight").html(r);
			// Após o carregamento, chamo novamente a função convert2Ajax para o caso
			// de ainda existir algum link no novo conteúdo
			convert2Ajax();
		},
		complete:function(){
			// Depois de concluído o processo, eu escondo a mensagem "Carregando"
			$('#loading').hide();
		},
		error: function(r){
			// Se ocorrer algum erro, também escondo a mensagem
			$('#loading').hide();
		}
	});
}

Para iniciar o processo no site, use o seguinte script, atenção, é extremamente complicado!

//Quando a página estiver pronta/carregada...
$(document).ready(
	function(){
		// Chama a função convert2Ajax
		convert2Ajax();
	}
);

É só isso, você pode conferir este exemplo em uso no site www.oapce.com.br, experimente desabilitar o javascript do navegador para comprovar o funcionamento nas duas situações!

Valeu!

// assim que a página é carregada
$(document).ready(function(){
	// Verifico se existe algum link
	if($("#contentAdm a").length > 0){
		// se existir, eu dou foco nele e crio um atalho ALT + C
		// para ir direto para o elemento
		$("#contentAdm a").get(0).focus();
		$("#contentAdm a").get(0).attr("accesskey","C");
	}else{
		// Caso contrario, faço o mesmo para elementos Input
		if($("#contentAdm input").length > 0){
			$("#contentAdm input").get(0).focus();
			$("#contentAdm input").get(0).attr("accesskey","C");
		};
	};
});

Espero que seja útil pra você também