Ir para o conteúdo

Pauta Ativa No Formulario C/ Jquery


Criado por Franklin Javier, Fev 21 2011 13:45

Não há respostas para este tópico
  • Por favor, faça o login para responder

#1 Franklin Javier

Franklin Javier
  • Franklin Javier
  • Colaborador
  • 6 Revisões

Revisou 21 fevereiro 2011 - 13:45

Esse plugin visa aumentar a usabilidade em formulários, destacando em qual area o usuário está interagindo.


/**
 * Author: Franklin Javier Gonzalez
 * Date: 08/19/2010
 * Version: 1.0a
 * 
 * If you use this script, please link back to the source
 *
 * Please report any bug at contato@franklinjavier.com
 * Copyright (c) 2010 Franklin Javier http://www.franklinjavier.com
 *
 * Released under the Creative Commons Attribution 3.0 Unported License,
 * as defined here: http://creativecommons.org/licenses/by/3.0/
 *  
 */

(function($){

	jQuery.fn.highlightRow = function(){

		var $thisContainer = $(this);
		
		$thisContainer.find("input, select").bind("focus", function(){ 
				
			var parents	= $(this).parents("li");
			var parent	= $(parents.get(0));
			
			parent.addClass("active", "slow");

		}).bind("blur", function(){

			var parents	= $(this).parents("li");
			var parent	= $(parents.get(0));
			
			parent.removeClass("active", "slow");

		});

	}

})(jQuery);



<form action="" method="POST">
	<fieldset>
		<ul>
			<li>
				<label>E-mail</label>
				<input type="text" />
			</li>
			<li>
				<label>Nascimento</label>
				<input type="text" />
			</li>
			<li>
				<label>Nickname</label>
				<input type="text" />
			</li>
		</ul>
	</fieldset>
	
	<input type="submit" value="Enviar" />

</form>

Pra testar basta usar:

$("form").highlightRow();

DEMO




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)