Como Criar Edição Inline Com jQuery

A edição inline ajuda a criar um efeito atrativo para um elemento como uma div que você pretende que seja editável pelos usuários, sem que seja necessário abrir uma nova página ou janela. O conteúdo na div fica editável e o usuário consegue atualizar o conteúdo e salvar. Eu usei funções do jQuery para conseguir este efeito.

A edição inline ajuda a criar um efeito atrativo para um elemento como uma div que você pretende que seja editável pelos usuários, sem que seja necessário abrir uma nova página ou janela. O conteúdo na div fica editável e o usuário consegue atualizar o conteúdo e salvar. Eu usei funções do jQuery para conseguir este efeito.

A característica que gostaria de realçar neste tutorial é a facilidade: de usar e de implementar.

Demo: Como Criar Edição Inline Com jQuery

Base De Dados MySQL

CREATE TABLE IF NOT EXISTS `edit_able` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `text` text NOT NULL,

  PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;



--

-- Dumping data for table `edit_able`

--



INSERT INTO `edit_able` (`id`, `text`) VALUES

(1, 'Lorem Ipsum has been the indu Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indu Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indu Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indu Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indu Lorem Ipsum is simply dummy text of the printing and typesetting industry.');

Codigo jQuery

$(document).ready(function(){  

  

  $('#options a').click(function(){

    

        var vote   = $(this).attr("id");

    showLoader();

    

    $.post("voting.php?value="+vote,{

    }, function(response){

      hideLoader();

      

      $('#wrap').html(unescape(response));  

    });

  });  

  

  //show loading bar

  function showLoader(){

    $('.search-background').fadeIn(200);

  }

  //hide loading bar

  function hideLoader(){

    $('.search-background').fadeOut(200);

  };

  

});  



//



$(document).ready(function(){      

    

    $('img#first').animate( {

        height: parseInt(<?php echo $likes?>)+'%'

    } );

    

    $('img#second').animate( {

        height: parseInt(<?php echo $dislikes?>)+'%'

    } );

    

    $('img#third').animate( {

        height: parseInt(<?php echo $average?>)+'%'

    } );

          

  });  

Código HTML

<table width="150" border="0">

    <tr>

    <td valign="bottom" height="160" width="50" align="center">

      <?php echo $likes.'%'?>

      <img src="1.png" alt="" id="first" width="35" height="<?php echo $likes?>" />

    </td>

    <td valign="bottom" height="160" width="50" align="center">  

      <?php echo $dislikes.'%'?>

      <img src="2.png" alt="" id="second" width="35" height="<?php echo $dislikes?>" />

    </td>

    

    <td valign="bottom" height="160" width="50" align="center">  

      <?php echo $average.'%'?>

      <img src="3.png" alt="" id="third" width="35" height="<?php echo $average?>" />

    </td>

    </tr>

    <tr>

    <td valign="bottom" width="50" align="center">

      Liked

    </td>

    <td valign="bottom" width="50" align="center">  

      Disliked

    </td>

    

    <td valign="bottom" width="50" align="center">  

      No

    </td>

    </tr>

  </table>



<div align="center" style="margin-top:60px;">

  

  <div id="wrap" align="center">

    

    <div class="search-background">

      <label><img src="loading.gif" alt="" /></label>

    </div>

      

    <div id="options" align="center">

      

      <span>Vote !</span>

      

      <br clear="all" />

      

      <a href="#" id="good"> Like This Tutorial </a>

      

      <a href="#" id="bad"> Dislike This Tutorial </a>

      

      <a href="#" id="average"> Don't Know </a> 

      

      <br clear="all" />



    </div>

  </div>

  

</div>

Download do código usado neste tutorial: Como Criar Edição Inline Com jQuery

Be Sociable, Share!

•