Arquivo da tag: popup

Adicionar marca d’ água em inputs text com JQuery

Olá pessoal.

Neste post vou explicar como aplicar marca d’ água em inputs do tipo text usando a biblioteca JQuery.

Vamos lá.

Baixe a biblioteca JQuery em http://www.jquery.com/ e adicione ao projeto.

O código abaixo (Javascript e com uso da JQuery) aplica o feito de marca d’ água.  Cole o código num arquivo arquivo Javascript (.js) associado ao projeto.

jQuery(document).ready(function () {

    //recuperando todos os inputs que tenham um atributo data-marcadagua.
    var inputs = $('*[data-marcadagua]')

    //tratando CADA input recuperado na linha acima.
    jQuery.each(inputs, function () {

        //se o input atual não tem valor, então aplica a marca d' água
        if (jQuery.trim($(this).val()) == '') {
            aplicaMarca($(this));

        }

        //adicionando os manipuladores para os eventos de entrada e saída em cada input.
        $(this).bind('focusin',
								function () {
                                    //revomendo a marca d' água quando o input ganha o foco.
								    if ($(this).val() == $(this).attr('data-marcadagua')) {
								        limpaMarca($(this))
								    }
								}
						);
        $(this).bind('focusout',
								function () {
                                    //aplicando a marca d' água quando o input perde o foco e não tem valor.
								    if (jQuery.trim($(this).val()) == '') {
								        aplicaMarca($(this));
								    }
								}
					   );

    });

    function aplicaMarca(input) {
        input.css('font-style', 'italic');
        input.css('color', '#666');
        input.val(input.attr('data-marcadagua'));
    }

    function limpaMarca(input) {
        input.css('font-style', '');
        input.css('color', '');
        input.val('');
    }

});

No HEAD da página HTML, faça a vinculação da biblioteca JQuery e do arqvivo de script com o código acima.

<head>
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script src="marcadagua.js"></script>
</head>

A ideia aqui e adicionar aos inputs text da página um atributo chamado data-marcadagua, e o valor seu valor será o texto da marca d’ água.

Valor 1:
<input id="Text1" type="text" data-marcadagua="1 - Digite algo aqui..." value="Já tenho valor"/>
<br />
<br />
Valor 2:
<input id="Text2" type="text" data-marcadagua="2 - Digite algo aqui..."/>
<br />
<br />
Valor 3:
<input id="Text3" type="text" data-marcadagua="3 - Digite algo aqui..."/>
<br />
<br />
Valor 4:
<input id="Text4" type="text" data-marcadagua="4 - Digite algo aqui..."/>

No exemplo acima usei diretamente um input HTML. Para usar no controle TextBox do ASP.NET, no evento Page_Load utilize o método Add da propriedade Attribute.

protected void Page_Load(object sender, EventArgs e)
{
    TextBox1.Attributes.Add("data-marcadagua", "5 - Digite algo aqui...");
}

O resultado final:

Baixe aqui o exemplo completo.

Até mais…

Criando uma janela Popup estilo Facebook com JQuery e ASP.NET.

O legal de usar o Facebook é copiar as ideias de suas implementações e aplicá-las em nossos projetos. 😛

Vou mostrar como fiz para criar uma janela Popup parecida com as que são usadas no Facebook. Acho que ficou legal :-).

Primeiramente, no projeto ASP.NET devemos criar um arquivo do tipo Generic Handler. O Generic Handler é como se fosse uma página ASP.NET mais leve, pois não tem interface HTML e eventos no servidor, etc. Possui apenas um método, o ProcessRequest(HttpContext context) que é responsável por processar as requisições que chegam.

No método ProcessRequest deve ser codificado o HTML que será enviado à página que fez a requisição ao Generic Handler.

public class HandlerJanelaExemplo : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string containerId = "#" + context.Request.QueryString["containerId"];

        string html = @"
            <div class=""divPopup""
                    style=""left: 323.5px; top: 145.5px; width: 600px; position: fixed; z-index: 10001;"">
                    <div style=""margin: 10px"">
						AQUI VOCÊ COLOCA O TÍTULO DA JANELA
                        <div style=""overflow: auto; height: 150px"">
                            AQUI VOCÊ COLOCA CONTEÚDO DA JANELA
                        </div>
                    </div>
                <div style=""width: 590px; background-color: #CCCCCC; text-align: right; padding: 5px;"">
                    <input type=""button"" value=""Fechar"" onclick=""@acaoFechar"" class=""botaoFerramenta""/>
                </div>
            </div>";

        //DEFININDO A AÇÃO DO BOTÃO FECHAR (SIMPLEMENTE LIMPA O HTML DO SPAN DA PÁGINA QUE REQUISITOU A JANELA).
        string acaoFechar = "$('" + containerId + @"').html('')";
        html = html.Replace("@acaoFechar", acaoFechar);

        context.Response.ContentType = "text/plain";
        context.Response.Write(html);
        context.Response.Flush();
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Na página HTML que vai chamar a janela Popup deve existir um link e um elemento span. O link irá chamar uma função Javascript que utilizará JQuery para fazer uma requisição ao Generic Handler criado anteriormente. E o Generic Handler retornará o HTML contendo a janela Popup para função Javascript, que por sua vez atualizará o elemento span.

Código HTML da página.

<form id="form1" runat="server">
<div>
    <h1>Minha Página</h1>
    <br />
    <br />
    <asp:HyperLink ID="hlkJanela" runat="server" NavigateUrl="javascript:;">Chamar janela...</asp:HyperLink>
    <span id="spanPopup"></span>
</div>
</form>

Na página é necessário associar a função Javacript ao link pelo C#.

protected void Page_Load(object sender, EventArgs e)
{
    hlkJanela.Attributes.Add("onclick", "chamarJanela()");
}

A função Javascript usa JQuery para fazer a requisição ao Generic Handler. A informação URL recebe o endereço do Generic Handler e como parâmetro o ID do elemento span. O ID do elemento span será usado dentro do Handler para implementação do botão fechar da Popup.

function chamarJanela() {
    $.ajax({
        type: "GET",
        url: "HandlerJanelaExemplo.ashx?containerId=spanPopup",
        dataType: "text",
        success: function (retorno) {
            $("#spanPopup").html(retorno);

        },
        error: function (retorno) {
            alert('Erro');
        }
    });
}

Veja o resultado.

E é isso pessoal. É um exemplo bem simples que pode ser evoluido para uma solução robusta.
Baixe o exemplo para ver os detalhes da implementação.

Até mais…