Apagar Registos Do MySQL Com jQuery

Este tutorial vai ajudá-lo a criar um efeito simples de animação para a remoção de registos da base de dados MySQL usando jQuery. O registo é movido para a esquerda a com AJAX é apagado da base de dados. Este código não está integrado com PHP. Terá que efectuar essa integração.

Veja a DEMO deste tutorial > Apagar Registos Do MySQL Com jQuery

Código JQuery

$(document).ready(function() {

  

  

  $('.remove').livequery('click', function() {

    

    $(this).parent().stop().animate({

                                                  

        left   : '-800px',

        

      },250,function(){

      

        $(this).remove();

    });    

    

  });  

  

});

Código HTML

<div align="left">

  

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

    

    <div class="shopp">

    

      <img src="pic.png" width="80" style="float:left" />

      <div class="label">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 

      </div>

      <img src="hide.png" class="remove" />

    

    </div>

    

    

    <div class="shopp">

    

      <img src="pic.png" width="80" style="float:left" />

      <div class="label">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>

      <img src="hide.png" class="remove" />

      

    </div>

    

    <div class="shopp">

    

      <img src="pic.png" width="80" style="float:left" />

      <div class="label">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>

      <img src="hide.png" class="remove" />

      

    </div>

    

    

    <div class="shopp">

      

      <img src="pic.png" width="80" style="float:left" />

      

      <div class="label">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>

      <img src="hide.png" class="remove" />

      

    </div>

  

  </div>

  

  <div id="left_bar"> 

    

  </div>   

  

</div>

Código CSS

html, body{

  margin:0;

  padding:0;

  border:0;

  outline:0;

}



#wrap

{ 

  width:600px; height:900px; left:20px; top:20px; position:relative; bottom:0px;

}



#left_bar 

{

  top:120px; 

  left:600px;

  height:350px;

  width:250px;

  position:fixed;

  padding:10px;

}



.remove { cursor:pointer;float:right}



.label { float:left;width:350px;  margin-left:10px;}



.shopp

{ 

  border:solid #ccc 1px; 

  padding:8px; 

  -webkit-border-radius: 8px;

  -moz-border-radius: 8px; font-size:12px;

  background:url(remove.png) center right no-repeat 5px;

  border-radius: 8px; 

  font-family:"LubalGraphBdBTBold",Tahoma; 

  margin-bottom:3px;

  text-align:justify;

  width:500px;

  height:100px;

  position:relative; 

}

  

Download do código usado neste tutorial > Apagar Registos Do MySQL Com jQuery

Be Sociable, Share!

•