#desenvolvimento

Como utilizar jQuery + AJAX + Handler?


Olá leitores.

Continuando a ~onda~ de posts sobre jQuery dessa vez iremos fazer algo um pouco além do código HTML. Neste post veremos como é possível implementar uma comunicação entre HTML e C# sem utilizar ASP.NET WebForms nem ASP.NET MVC. Para isto utilizaremos os Handlers, que no final das contas é uma classe C#. E para ficar ainda melhor iremos utilizar AJAX e Twitter Bootstrap também.

Então vamos lá.

No Visual Studio, crie um novo projeto ASP.NET Empty Web Application. Com o projeto criado será preciso adicionar:

  • um arquivo HTML denominado index.html.
  • um arquivo Generic Handler denominado Handler.ashx.
  • uma pasta denominada javascript.
  • uma pasta denominada twitter-bootstrap.

Na pasta javascript deverá conter os arquivos:
jquery-1.7.2.min.js
less-1.3.0.min.js
jquery.form.js

E na pasta twitter-bootstrap deve conter apenas as pastas img, js e less contidas nos fontes do Twitter Bootstrap.

No arquivo index.html vamos adicionar as referências aos arquivos CSS:

<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/bootstrap.less">
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/responsive.less">

E as referências aos arquivos JS:

<script src="javascript/less-1.3.0.min.js"></script>
<script src="javascript/jquery-1.7.2.min.js"></script>
<script src="javascript/jquery.form.js"></script>
<script src="twitter-bootstrap/js/bootstrap-modal.js"></script>

O código abaixo cria um formulário com apenas um campo e um botão. Adicione-o dentro da tag body do arquivo index.html:

<div class="span5 form-horizontal">
   <!-- Formulário -->
   <form id="form-enviar-email">
      <fieldset>
         <legend>Formulário</legend>
         <!-- Campo de e-mail -->
         <div class="control-group">
            <label for="txt-email" class="control-label">E-mail</label>
            <div class="controls">
               <div class="input-prepend">
                  <span class="add-on"><i class="icon-envelope"></i></span><input id="email" required style="text-transform: lowercase;" class="input-xlarge" placeholder="Digite seu e-mail" name="txt-email" type="email">
               </div>
            </div>
         </div>
         <!-- Botão para enviar -->
         <div class="span5 form-actions">
            <button id="btn-adicionar" type="submit" class="btn btn-primary">Enviar</button>
         </div>
      </fieldset>
   </form>
</div>

Vamos adicionar uma div com um modal para exibir o valor digitado no campo:

<!-- Modal -->
<div class="modal hide" id="div-modal">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Mensagem</h3>
   </div>
   <div class="modal-body">
      <!-- E-mail digitado no formulário -->
      <span id="span-email"></span>
   </div>
   <div class="modal-footer">
      <a href="#" class="btn" data-dismiss="modal">Fechar</a>
   </div>
</div>

E para finalizar o conteúdo do arquivo index.html é necessário acrescentar o código responsável pela comunicação com o Handler utilizando o jQuery Form Plugin.

<script type="text/javascript">
   $(document).ready(function () {

      // Adicionar evento de click ao botão "Enviar".
      $('#btn-enviar').click(function () {

         // Cria um conjunto de opções para envio do formulário.
         var opcoes = {

            type: 'POST',        // Define o método de envio como POST.
            url: 'Handler.ashx', // Define qual Handler será chamado.

            // Função executada se a comunicação acontecer corretamente.
            success: function (data) {

               // Adiciona o retorno no Handler para o span contido no modal.
               $('#span-email').html(data);

               // Exibe o modal.
               $('#div-modal').modal();
            },
            // Trata o erro caso aconteça alguma falha na comunicação.
            error: function (data) {
               alert("Ocorreu um erro ao executar a operação.");
            }
         };
         // Prepara o formulário para submissão via AJAX.
         $('#form-enviar-email').ajaxForm(opcoes);
      });
   });
</script>

Falta ainda o código para o Handler funcionar. Precisamos de dois métodos:
ProcessRequest – que é invocado quando o Handler for chamado pelo formulário.

public void ProcessRequest(HttpContext context)
{
   // Obtém o formulário.
   NameValueCollection formulario = context.Request.Form;
   context.Response.ContentType = "text/html";

   // Escreve o retorno do método para a saída do HTTP atual.
   context.Response.Write(ObterEmailInformado(formulario));
}

ObterEmailInformado – que captura o valor informado no campo.

protected string ObterEmailInformado(NameValueCollection formulario)
{
   // Obtém o valor do campo "txt-email".
   string email = formulario["txt-email"];

   // Cria a string de retorno com o e-mail digitado.
   StringBuilder conteudoHtml = new StringBuilder(string.Format("Email: {0}", email));

   return conteudoHtml.ToString();
}

É isso! A príncipio parece algo difícil de entender, mas tentei fazer com que o código ficasse bem simples e espero que seja útil para quem precisar fazer esse tipo de implementação.

Baixe o código completo.

Até breve 😉

Anúncios
Padrão
#desenvolvimento

Carousel simplificado com Twitter Bootstrap e jQuery


Olá pessoal.

Neste post iremos ver mais um plugin jQuery e Twitter Bootstrap, o Carousel. Com ele é possível criar facilmente aquelas transições de imagens. Mas aqui vamos fazer apenas uma transição de divs a título de aprendizado. Para isto aproveitaremos a estrutura feita no post sobre dropdown.

Então só falta criar um arquivo chamado index.html, e acrescentar o código abaixo dentro da tag body:

<!-- Div na qual o "carousel" será aplicado. -->
<div id="div-carousel" class="carousel slide">
   <div class="carousel-inner">
      <!-- Divs com efeito de transição. -->
      <div class="item active">
         Conteúdo da DIV 1.
      </div>
      <div class="item">
         Conteúdo da DIV 2.
      </div>
   </div>
</div>
<div class="row">
   <!-- Botões de navegação -->
   <div id="div-1" class="span2">
      <a id="a-1" class="btn" href="#div-carousel" data-slide="prev"><i class="icon-chevron-left"></i>Voltar para DIV 1</a>
   </div>
   <div id="div-2" class="span2">
      <a id="a-2" class="btn" href="#div-carousel" data-slide="next">Avançar para DIV 2<i class="icon-chevron-right"></i></a>
   </div>
</div>

Para finalizar falta acrescentar o código Javascript que aplicará o efeito do carousel:

<script type="text/javascript">
   $(document).ready(function () {

      // Aplica o efeito de "carousel" nas divs que possuirem a classe carousel.
      $('.carousel').carousel({
         interval: false
      });

      // Oculta o botão de navegação para a div 1.
      $('#div-1').hide();

      // Aplica a transição quando houver click no link AVANÇAR.
      $("#a-1").click(function () {
         $('#div-carousel').carousel(0);
         $('#div-1').hide();
         $('#div-2').show();
         return false;
      });

      // Aplica a transição quando houver click no link VOLTAR.
      $("#a-2").click(function () {
         $('#div-carousel').carousel(1);
         $('#div-1').show();
         $('#div-2').hide();
         return false;
      });
   });
</script>

Com isto implementamos a utilização de um plugin muito útil na construção de sites e sistemas um pouco mais interativos.

Baixe o código completo.

Até breve 😉

Padrão
#desenvolvimento

Popover customizado com Twitter Bootstrap e jQuery


Hi everybody.

Aproveitando o post anterior vamos testar o plugin Popover do Twitter Bootstrap. Seguir a documentação do Bootstrap e utilizar as formas padrões é super tranquilo. O problema acontece quando você precisa fazer algo mais customizado para atender sua necessidade, entretanto é ai que o aprendizado está como diria o Jorge Vercilo.

O comportamento padrão do popover é aparecer quando acontece um evento de HOVER e simplesmente desaparecer como um tooltip. Mas neste post iremos exigir um pouco mais do popover, fazendo com que o popover:

  • Apareça quando o acontecer um evento de clique.
  • Desapareça somente quando acontecer um evento de clique.

Teremos algo semelhante ao mostrado na imagem abaixo:

Imagem do popover aberto.

Popover aberto

Além disso vamos exibir o conteúdo de uma div dentro do popover, e está div contém um botão que abrirá um modal.

Então, vamos ao código.

Faça os passos do post anterior para preparar o seu arquivo HTML.

Dentro da tag body adicione o código abaixo:

<!-- Link que receberá o evento do popover ao ser clicado.-->
<a href="#" id="a-popover" class="btn btn-success">Abrir popover</a>
<!-- Div oculta que será exibida dentro do popover. -->
<div id="div-popover" class="hide">
   Conteúdo do popover.
   <br />
   <br />
   <!-- Botão dentro do popover responsável por abrir o modal. -->
   <button id="btn-modal" class="btn btn-primary">Abrir modal</button>
   <!-- Botão dentro do popover responsável por fechar o popover. -->
   <button id="btn-fechar" class="btn btn-danger" data-dismiss="clickover">Fechar</button>
</div>
<!-- Div oculta utilizada para montar o modal. -->
<div class="modal hide" id="div-modal">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Título modal</h3>
   </div>
   <div class="modal-body">
      Conteúdo do modal.
   </div>
   <div class="modal-footer">
     <!-- Botão dentro do modal responsável por fechar o modal. -->
     <button class="btn" data-dismiss="modal">Fechar modal</button>
   </div>
</div>

Adicione também a tag script abaixo no seu arquivo HTML.

<script type="text/javascript">
   $(document).ready(function () {
      // Associa o evento do popover ao clicar no link.
      $('#a-popover').popover({
         trigger: 'manual',
         html: true,
         title: 'Título popover',
         content: $('#div-popover').html() // Adiciona o conteúdo da div oculta para dentro do popover.
      }).click(function (e) {
         e.preventDefault();
         // Exibe o popover.
         $(this).popover('show');
      });

      $('#btn-fechar').live('click', function (e) {
         // Oculta o popover ao clicar no botão fechar.
         $('#a-popover').popover('hide');
      });

      $('#btn-modal').live('click', function (e) {
         // Oculta o popover ao clicar no botão abrir modal.
         $('#a-popover').popover('hide');
         // Abre o modal.
         $('#div-modal').modal();
      });
   });
 </script>

Pronto, agora é só testar.

Baixe o código completo aqui.

Até breve 😉

Padrão
#desenvolvimento

Dropdown animado com Twitter Bootstrap e jQuery


Olá pessoas.

Neste post iremos fazer um dropdown com efeito slideToggle, mas acredito que com estes passos seja possível aplicar vários outros efeitos.

Eu sei que existem inúmeros plugins que fazem isto, mas queria fazer algo mais simples utilizando apenas jQuery e o Bootstrap.

Então vamos preparar a estrutura para criar o dropdown:

  • Baixe o jQuery, o less o Bootstrap.
  • Crie uma pasta chamada dropdown.
  • Crie uma pasta chamada javascript dentro da pasta dropdown.
  • Copie jquery-1.7.2.min.js para a pasta javascript dentro da pasta dropdown.
  • Copie less-1.3.0.min.js para a pasta javascript dentro da pasta dropdown.
  • Crie uma pasta chamada twitter-bootstrap dentro da pasta dropdown.
  • Extraia o arquivo baixado do Bootstrap e copie as pastas img, js e less para dentro de dropdown/twitter-bootstrap.
  • Crie um arquivo index.html dentro da pasta dropdown.
  • Adicione as referências aos arquivos CSS.
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/bootstrap.less">
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/responsive.less">
  • Adicione as referências aos arquivos Javascript.
<script src="javascript/less-1.3.0.min.js"></script>
<script src="javascript/jquery-1.7.2.min.js"></script>
<script src="twitter-bootstrap/js/bootstrap-dropdown.js"></script>
  • Adicione o código abaixo dentro da tag body.
<div class="btn-toolbar">
   <!-- Div para agrupar os botões com texto e com ícone -->
   <div class="btn-group">
      <button id="btn-selecione" class="btn btn-large dropdown-toggle span4" style="text-align: left;">
         Selecione
      </button>
      <button id="btn-caret" class="btn btn-large dropdown-toggle" data-toggle="dropdown">
         <i class="caret"></i>
      </button>
      <!-- Lista de opções -->
      <ul id="ul-dropdown-menu" class="dropdown-menu" style="width: 400px;">
         <!-- Itens -->
         <li id="item-1"><a href="#">Item 1</a></li>
         <li id="item-2"><a href="#">Item 2</a></li>
         <li id="item-3"><a href="#">Item 3</a></li>
      </ul>
   </div>
</div>
<br />
<!-- Exibição do texto referente ao item selecionado -->
<div class="row">
   <div class="alert alert-success span4">
      <span id="span-item-selecionado"></span>
   </div>
</div>
  • Agora falta criarmos o código Javascript para adicionar a aparência e os efeitos ao nosso dropdown.
<script type="text/javascript">
   $(document).ready(function () {
      // Adiciona a aparência de dropdown para os elementos que possuem a classe dropdown-toggle.
      $('.dropdown-toggle').dropdown();
   });

   // Adiciona o efeito slideToogle ao clicar nos botões.
   $('#btn-selecione, #btn-caret').click(function () {
      $('#ul-dropdown-menu').slideToggle();
   });

   // Altera os textos de acordo com o item selecionado.
   $('#ul-dropdown-menu li').click(function () {
      $("#span-item-selecionado").text($(this).text());
      $("#btn-selecione").text($(this).text());
      $('#ul-dropdown-menu').slideToggle();
   });
</script>

Com isto temos um resultado semelhante ao mostrado nas imagens abaixo:

Imagem do dropdown aberto

Dropdown aberto

Imagem do dropdown selecionado

Dropdown selecionado

Este código foi testado no Firefox 14, para baixar o código completo clique aqui.

Isso é tudo pessoal 😉

Padrão