Como Criar O Botão More Do Twitter Com JQuery E PHP

Outro tutorial fantástico e com estilo para você aprender a criar o botão MORE do Twitter para carregar mais informação, usando PHP e jQuery. Já viu como no Twitter, se carregar no botão MORE, acede a mais informação da base de dados. Eu criei uma aplicação similar com jQuery e PHP.

Criei um script baseado em AJAX para ir buscar registos à base de dados e alguns efeitos de desvanecer para ficar com um visual atrativo. Eu espero que você goste do tutorial. Obrigado!

Veja a DEMO: Como Criar O Botão More Do Twitter Com JQuery E PHP:

Código jQuery


$(document).ready(function(){  

  //more records show
  
  $('#bottomMoreButton').livequery("click", function(e){
    
    var next =  $(this).find('a').attr('id').replace('more_','');
    $('#load').html('Loading...');
    
    $.post("posts.php?show_more_post="+next, {

    }, function(response){
    
      $('#bottomMoreButton').remove();
      $('#posting').append($(response).fadeIn('slow'));
      $('#load').html('More');

    });
    
  });  

});  

Eu usei algumas funções simples do jQuery para conseguir o efeito pretendido. E espero que você não tenha qualquer problema a implementar o script.

Arquivo posts.php


  <?php
  include('dbcon.php');
  
  function checkValues($value)
  {
     $value = trim($value);
    if (get_magic_quotes_gpc()) {
      $value = stripslashes($value);
    }
     $value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES)));
     $value = strip_tags($value);
    $value = mysql_real_escape_string($value);
    return $value;
  }  
  
  $next_records = 5;
  $show_more_button = 0;
  
  if(@$_REQUEST['show_more_post']) // more posting paging
  {
    $next_records = $_REQUEST['show_more_post'] + 5;
    
    $result = mysql_query("SELECT * FROM rui_twitter_load_button order by id desc limit ".$_REQUEST['show_more_post'].", 5");
    
    $check_res = mysql_query("SELECT * FROM rui_twitter_load_button order by id desc limit ".$next_records.", 5");
    
    $show_more_button = 0; // button in the end
    
    $check_result = mysql_num_rows(@$check_res);
    if($check_result > 0)
    {
      $show_more_button = 1;
    }
  }
  else
  {  
    $show_more_button = 1;
    $result = mysql_query("SELECT * FROM rui_twitter_load_button order by id desc limit 0,5");
  }
  
  while ($row = mysql_fetch_array($result))
  {?>
    <div id="body" align="center">
      
      <img src="<?php echo $row['image'];?>" />
      <div><?php echo $row['text'];?></div>
    
    </div>
    
    <?php
  }
  
  if($show_more_button == 1)
  {?>
    
    <div id="bottomMoreButton">
      <a id="more_<?php echo @$next_records?>" class="more_records" href="javascript: void(0)"><span id="load">More</span></a>
    </div>
    <?php
  }?>  

Estrutura Da Base De Dados MySQL


CREATE TABLE IF NOT EXISTS `rui_twitter_load_button` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `text` text NOT NULL,
  `image` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
)

Código HTML


<h1> Twitter Style More Button To Load Records</h1>
  <div align="center">
  
  
    
  </div>

Download do código usado neste tutorial: Como Criar O Botão More Do Twitter Com JQuery E PHP

Be Sociable, Share!

7 Comentários

  1. Olá Zeeshan Rasool,

    bom artigo mais um tutorial para a base de dados.

    Cumprimentos
    Soares

  2. Grigorio

    Bom o exemplo ficou massa…
    mas nao teria como liberar o codigo? esta apenas demonstrando:
    "Download do código usado neste tutorial: Como Criar O Botão More Do Twitter Com JQuery E PHP"
    mas nao possui nenhum link.

    valeu

  3. Elimarcos

    O código que estar sendo exibido acima não funciona contem alguns erros.
    O script não consegue exibir as informações do banco de dados. Teria como disponibiliza o código para download, agradeço desde já.

  4. Pedro

    Parabéns pelo artigo! Sei que ele já é antigo, mas teria como implementar isto no wordpress?

Participa! Comenta...