Editor de texto com PHP e jQuery
Linha de edição, como é conhecido, ou ser capaz de editar conteúdo diretamente em uma página é uma grande ferramenta tem sob sua correia. Vou percorrer exatamente como ele funciona e também como postar o conteúdo do texto atualizado através de um script PHP para o processamento do lado do servidor para colocar no banco de dados.
O Código
Parece um pouco complexo para que eu vou correr rapidamente com exatamente o que está acontecendo.
- Quando você visitar a página de demonstração são apresentados com um bloco de texto. Se você passar o mouse sobre o texto que você verá um ícone de edição pouco semelhante a quando você quiser editar o conteúdo no Facebook.
- Se o usuário clicar sobre o bloco de código do texto é substituída por uma textarea de formulário com a opção de salvar ou cancelar as alterações.
Um pouco mais de detalhes
- Este tutorial usa vinculação e desvinculação. Em termos simples, podemos associar um evento de clique de um elemento. Lançamentos de desligamento caso o clique do elemento, simples. Na linha 9 do código abaixo ligamos um evento clique a todos os elementos com uma classe de ‘inlineEdit’ o manipulador de eventos é “UpdateText” a função. Isto significa que toda vez que uma div com ‘inlineEdit “a classe é clicado’ UpdateText” a função será executada. “UpdateText” A função substitui o texto atual com um textarea.
- Em seguida, vemos a função de salvaguarda. Esta função só é executado quando o usuário clica no ícone salvar. Nós basicamente salvar o novo texto em uma variável e passá-lo através do arquivo update.php. Você notará que o ícone de carregamento é exibido durante o processo de salvação. Nós também exibir uma mensagem quando há uma resposta a partir da página PHP. Finalmente, retire o formulário da classe “selecionado” o elemento, e então injetar o novo texto que o usuário escreveu no textarea para o div
- A função de cancelamento é ativado quando o elemento com a classe. Reverter é clicado. Esta função simplesmente remove a classe ‘selecionado’ como acima, na função de economia, bem como colocar o texto original no div.
</pre> <script type="text/javascript"> $(document).ready(function () { function slideout() { setTimeout(function () { $("#response").slideUp("slow", function () {}); }, 2000); } $(".inlineEdit").bind("click", updateText); var OrigText, NewText; $(".save").live("click", function () { $("#loading").fadeIn('slow'); NewText = $(this).siblings("form").children(".edit").val(); var id = $(this).parent().attr("id"); var data = '?id=' + id + '&text=' + NewText; $.post("update.php", data, function (response) { $("#response").html(response); $("#response").slideDown('slow'); slideout(); $("#loading").fadeOut('slow'); }); $(this).parent().html(NewText).removeClass("selected").bind("click", updateText); }); $(".revert").live("click", function () { $(this).parent().html(OrigText).removeClass("selected").bind("click", updateText); }); function updateText() { $('li').removeClass("inlineEdit"); OrigText = $(this).html(); $(this).addClass("selected").html('<form ><textarea class="edit">' + OrigText + '" </textarea> </form><a href="#" class="save"><img src="images/save.png" border="0" width="48" height="15"/></a> <a href="#" class="revert"><img src="images/cancel.png" border="0" width="58" height="15"/></a>').unbind('click', updateText); } }); </script> <pre>
O PHP
Neste exemplo eu não ter adicionado o script de conexão banco de dados. Nós, basicamente, envie os dados para update.php e usando PHP que ecoam de volta os resultados. Você pode facilmente adicionar esses dados ao banco de dados.
<? $text = mysql_escape_string($_POST['text']); $id = mysql_escape_string($_POST['id']); echo $text; // this is where you could add the updated text to the database where the database row id = $id for example. ?>
O HTML
O HTML é simplesmente um item da lista com “inlineEdit” a classe que torna o conteúdo do elemento editável. Os elementos mais que você adicionar a esta classe, mais você pode editar. perceber como eu adicionei um id de 1 para o exemplo abaixo. Esta poderia ser uma linha específica em um banco de dados, por exemplo, se você tiver vários elementos editáveis em uma página.
</pre> <h2>jQuery Inline-Edit <img id="loading" src="images/loading.gif"/></h2> Click the text below to edit it. <div id="response"></div> <ul> <li class="inlineEdit" id="1">Lorem Ipsum....</li> </ul> <pre>
Para ver a demostração clique aqui, para baixar clique aqui.
Fonte: http://papermashup.com/jquery-and-php-inline-editing/