Adicionar Linhas ao HighlightJS

Curiosamente, os desenvolvedores do HighlightJS acreditam piamente que “não” ter linhas no código destacado pela bibliotéca é uma característica.  Sinceramente, não sei de onde os caras tiraram esta idéia, mas como gosto dele, decidi fazer um “hack” para resolver isso, todavia, o fiz com jQuery.

Leia mais

Plugin jQuery Disable Cut, Copy and Paste – Desabilitar cortar, copiar e colar

Estava criando um formulário de cadastro para a empresa de um amigo meu, quando repeti novamente o que já havia feito várias vezes:

“Vetar o usuário de cortar, copiar e colar em campos de email e senha e suas verificações”.

O código a seguir mostra como fazer isto utilizando jQuery.

 lang="javascript
$('element').live("cut copy paste",function(e) {
    e.preventDefault();
})

E decidi criar um plugin, bem simples mas funcional.

 lang="javascript
(function($){
    $.fn.disableCCP = function() {
        return this.each( function() {
            var $this = $(this);
            $this.live("cut copy paste",function(e) {
                e.preventDefault();
            })
            
        });
    }
})(jQuery);

Então postei ele no GitHub para fins de arquivamento https://github.com/gilbertoalbino/jQuery-disableCCP-plugin.

Para utilizar pastar chamá-lo como é padrão em jQuery.

Supondo que você possui os casos de uso: E-mail, Confirmar E-mail, Senha e Confirmar Senha:

 lang="javascript
$("#email, #email-confirm, #password, #password-confirm").disableCCP();

É isso ai! Abraço do Giba!

Plugin jQuery.posicaoCursor.js – Colocar o Foco no início

Estes dias me surgiu a necessidade de colocar o cursor no inicio do campo input para um formulário de login onde o usuário é o email da empresa, então todo login ficaria:

[ |@emailempresa.com

O pipeline ali no início é o cursos, no caso.

Bom, como uso jQuery para tudo, só precisava criar a lógica para isto, foi onde pesquisei na internet e descobri como poderia fazer, logo segue abaixo o plugin para tal.



<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>

</head>

<body>

    <div>

        <strong>Usuário/email</strong>

        <input type="text" id="usuario" />

        <input type="button" id="botao" value="Testar Foco" />

    </div>



<script type="text/javascript">

    jQuery(

        function() {

            $('#botao').click(

                function() {

                    $('#usuario').val('@emailempresa.com');

                    $('#usuario').focus().posicaoCursor(0);

                }

            );

        }

    );



    /**

     * Plugin jQuery.posicaoCursor.js

     */

    ( function( $ ){

        $.fn.posicaoCursor = function( posicao ) {

            return this.each(function() {

                var $this = $( this );

                if ( $this.get(0).setSelectionRange ) {

                    $this.get(0).setSelectionRange( posicao, posicao );

                } else if ( $this.get(0).createTextRange ) {

                    var intervalo = $this.get(0).createTextRange();

                    intervalo.collapse( true );

                    intervalo.moveEnd('character', posicao);

                    intervalo.moveStart('character', posicao);

                    intervalo.select();

                }

            });

        };

    })( jQuery );

</script>



</body>

</html>

[ Dica Javascript ] – Imprimir a página ao carregar a página

Utilize o código abaixo quando você precisar que a janela de impressão apareça logo que uma página é carregada (evento “onload”).

Abaixo seguem duas formas, a primeira em jQuery e a segunda em código convencional.

Carregue a biblioteca jQuery e abra a tag SCRIPT do bloco de código a ser utilizado:

* Nota: Se não for utilizar jQuery, remova as declarações condicionais!



<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

 lang="javascript

/**

 * Imprimir a página ao carregar a página

 */

// Versão jQuery

if( jQuery ) {

	jQuery(

		function() {

			if ( typeof( window.print ) != 'undefined' ) {

				window.print();

			}

		}

	);

// Versão convencional

} else {

	window.onload = function()

	{

		if ( typeof( window.print ) != 'undefined' ) {

			//window.print();

		}



	}

}



</script>

Já precisei disto, espero que alguém também precise!

Autoselecionar um elemento OPTION de um SELECT a partir de um evento com jQuery

Minha nossa que título enorme e redundante, pra que escrever OPTION de um SELECT, se não existe option em outro elemento ? (risos)

É realmente é desnecessário e enorme mesmo, mas porque foi o melhor título que achei para definir a bagaça quando alguém for procurar no google, se tiver outro melhor sugira nos comentários (risos).

Vamos ver como autoselecionar um elemento option. Para quem não sabe, OPTION é um elemento filho de SELECT da TRIBO dos elementos FORM. Vamos ver também como selecionar um option a partir de um evento qualquer realizado em outro elemento.

De volta ao nosso assunto, jQuery possui alguns seletores para formulário bem interessantes e fáceis, mas como isto aqui não é cursinho de jQuery, é só um post, vamos usar os seguinte seletores:

  • :selected – Usado para verificar qual elemento OPTION está selecionado
  • elemento[value=”valor – usado para procurar o elemento, no nosso caso “OPTION”, que possui determinado valor

Este sistema de autoselecionar é muito usado em formulários de cadastro tipo do submarino, americanas, etc, onde você para não ter que informar os mesmos dados do endereço de residencia nos dados de endereço de entrega, acaba clicando somente em um botão ou checkbox ou sei lá o que que inventaram para facilitar sua vida, então vamos fazer algo similar.

IMPORTANTE: Este exemplo é só para mostrar como funciona esta lógica através da biblioteca jQuery, se você for usar para um projeto pessoal,

não se esqueça que ao trocar algum valor nos campos de endereço residencial, os valores não serão modificados no endereço de entrega, neste caso precisaríamos criar algum tipo de validação, o que está totalmente fora do escopo deste post, embora seja algo simples de se fazer a princípio.

  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <meta charset="utf-8" />

  <!-- Coloque aqui o link para seu arquivo jQuery caso não queira usar o link online -->

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>

  jQuery(function(){

	  /* Através do evento click no elemento com o name "mesmoEndereco" vamos definir as preferencias */

	  $('input[name="mesmoEndereco"]').click(

		function() {

			/* Só vamos fazer algo se o valor do campo for sim, é claro! */

	        if( $(this).val() == 'sim' )  {

			    /* Precisamos antes alertar o tonhonhom que ele precisa selecionar uma cidade antes */

		    	if( $('#cidadeResidencia option:selected').val() == 0 ) {

			       alert('Você precisa primeiro selecionar o campo CIDADE amigo!');

		        } else {

			        /* Pega o valor do campo residencial e busca pelo elemento com este valor no correspondente para entrega */

		            var cidadeResidencia = $('#cidadeResidencia').val();

		            $('#cidadeEntrega option[value="' + cidadeResidencia + '"]').attr({ selected : "selected" });

		        }

			}

		}

	  );

  });

  </script>

</head>

<body>

  <form>

    <h2>Endereço de Residência</h2>

    <label for="cidadeResidencia">

	    <select id="cidadeResidencia" name="cidadeResidencia">

	        <option value="0" selected="selected"> - - ESCOLHA - - </option>

	        <option value="SAO PAULO">SÃO PAULO</option>

	        <option value="RIO DE JANEIRO">RIO DE JANEIRO</option>

	        <option value="BALNEARIO CAMBORIU">BALNEARIO CAMBORIU</option>

	    </select>

    </label>

    <h2>Endereço de Entrega</h2>

    <p>

    	Usar o mesmo endereço residencial para entrega?

    	<input type="radio" name="mesmoEndereco" value="sim" /> Sim

    	<input type="radio" name="mesmoEndereco" value="nao" checked="checked" /> Não

    </p>

    <label for="cidadeEntrega">

	    <select id="cidadeEntrega" name="cidadeEntrega">

	        <option value="SAO PAULO">SÃO PAULO</option>

	        <option value="RIO DE JANEIRO">RIO DE JANEIRO</option>

	        <option value="BALNEARIO CAMBORIU">BALNEARIO CAMBORIU</option>

	    </select>

    </label>

  </form>

</body>

</html>

Serializar Checkboxes – Converter Valores do checkbox em String

Estes dias na empresa que trabalho, lá estava eu na boa, curtindo um cafézinho expresso, quando me chega a secretária “Gilbeeeeeeeeeeeertoooooooooo, o botão enviar não está enviando, vou ter que digitar tudo de novooooooooooooo”.

Então pensei em resolver o problema, é claro, sou pago pra resolver problemas.

Entretanto, me deparei com uma situação digamos um tanto “estressante”.

Ter que criar cookies para mais de 55 campos do formulario de cadastro para quando o botão enviar não funcionar não se perderem os dados.

Cheio de frescura, inventei de criar este sistema em ajax, até que ficou bem interessante, entretanto, como as solicitações são enviadas via GET, como fazer com os “checkboxes”.

Ai, que dor de cabeça… mas depois de usar uma lógica, consegui fazer o que queria, e por isto gostaria de mostrar para vocês como fiz para serializar, ou seja, transformar os valores dos checkboxes, que são um Array em String.

Comentários explicam o que fiz:

<html>

<head>

<title>Serializar Checkbox</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

// jquery para evento onclick no botao com id teste

$(document).ready(

function()

{

$("#teste").click(

function() {

serializaCheckbox();

}

);

}

);

function serializaCheckbox()

{

// iniciamos uma string com aspas indicando o vazio;

var string = '&string=';

// Pegamos o elemento pelo seu nome, no caso 'input'

var inputs = document.getElementsByTagName('input');

// damos um loop na quantidade de elementos encontrados

for( var x = 0; x < inputs.length; x++ )

{

// verificamos se o tipo do mesmo é "checkbox" e se o atributo name é igual à 'campo'

if(inputs[x].type == "checkbox" && inputs[x].name == 'campo')

{

// verificamos se o elemento está marcado

if(inputs[x].checked == true)

{

// concatenamos o valor colocando uma virgula no final

string += inputs[x].value + ',';

}

}

}

// verificamos se o ultimo caractere é uma virgula, e sempre será

if (/,$/.test(string)) {

// substituimos o mesmo por um vazio

string=string.replace(/,$/,"")

}

alert(string);

}

</script>

</head>

<body>

<form>

<input type="button" id="teste" value="Testar" />

<br />

<input name="campo" type="checkbox" value="Azul" />Azul<br />

<input name="campo" type="checkbox" value="Vermelho" />Vermelho<br />

<input name="campo" type="checkbox" value="Verde" />Verde<br />

<input name="campo" type="checkbox" value="Preto" />Preto<br />

</form>

</body>

</html>

Ajax com jQuery com $.ajax() e load()

Com a explosão da Web 2.0 uma tecnologia ficou muito popular, estamos falando do AJAX, que do inglês quer dizer Asynchronous Javascript And XML.

Resumidamente, com Ajax ficou possível buscar ou enviar dados no servidor sem precisar sair da página em uso. Isto é muito útil pois dá uma sensação de “Em Tempo Real”.

Leia mais