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()+'%'
} );
$('img#second').animate( {
height: parseInt()+'%'
} );
$('img#third').animate( {
height: parseInt()+'%'
} );
});
Código HTML
|
|
|
| Liked | Disliked | No |
Download do código usado neste tutorial: Como Criar Edição Inline Com jQuery
7 Responses
é bom, eu gosto disso. Estou tentando implementar isso em múltiplas em uma única página.
tem como fazer um site onde eu possa atualizar conteúdo, mas com senha de admin? seria ótimo! parabéns pelo post. muito bom.
Consegui…
wilson@merceariaweb.com
Não está gravando alterações no banco de dados, o config ta certinho já, qq pode estar errado?
Obrigado
tens que alterar o arquivo update para as strings correspondentes ao banco de dados
pode me ajudar nisso? nao sei como fazer
amigo, o código que está nessa página não corresponde ao código do link para download,
qual código está correto??
Obrigado