Форма комментариев при ответе
Приветствую,
вот интересует такое: В блогах часто бывает, при комментарии по клику на ответить, форма ответа появляется снизу комментария. а какой тут механизм? получаем копию и вставляем после коммента? или надо все таки удалить форму основную, которая внизу, например Заранее спасибо :) |
Цитата:
|
utb,
Простейшее, перенести форму скриптом под сообщение, но нун смотреть HTML страницы, посколь в форме часто бывают скрипты, которые при переносе возобновляют активность, тогда нужно реализовывать перенос без скриптов, удаляя их перед действием |
formElement.style.display = 'none';
formElement.style.display = 'block'; |
ХТМЛ в студию :)
<ul class="comments"> <li> <div class="comment"> <p>Тут коммент</p> <a href="#" class="otvet">Ответить</a> </div> <ul class="sub comments"> <li> <div class="comment"> <p>Тут коммент</p> <a href="#" class="otvet">Ответить</a> </div> </li> </ul> </li> </ul> <div id="respond"> <textarea name="comment" id="comment"></textarea> <input type="submit" value="Отправить"> </div> я взял в пример простую структуру для древовидных комментов (через списки) внизу форма комментов простая (#respond), а ну еще куда нибудь поставить кнопку Отмена :) Цитата:
|
набросал тут свой говнокод :)
<script>
$(document).ready(function(){
$('a.otvet').click(function() {
$('#respond').appendTo($('.comment'));
});
$('a.cancel').click(function() {
$('#respond').appendTo($('.inner'));
});
});
</script>
html подправил: <ul class="comments"> <li> <div class="comment"> <p>Тут коммент</p> <a href="#" class="otvet">Ответить</a> </div> </li> </ul> <hr> <div class="inner"> <div id="respond"> <a href="#" class="cancel">отмена</a> <textarea name="comment" id="comment"></textarea> <input type="submit" value="Отправить"> </div> </div> теперь как понимаете, будет происходить везде :( по всем ссылкам .otvet |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#respond {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('.otvet').click(function (){
$(this).hide();
$(this.parentNode).append($('#respond > .send').clone(true));
});
$('.send input').click(function (){
/* тут делай что хочешь */
var o=$(this).parents('.comment');
o.find('.send').remove();
o.find('.otvet').show();
});
});
</script>
</head>
<body>
<ul class="comments">
<li>
<div class="comment">
<p>Тут коммент</p>
<a href="#" class="otvet">Ответить</a>
</div>
<ul class="sub comments">
<li>
<div class="comment">
<p>Тут коммент</p>
<a href="#" class="otvet">Ответить</a>
</div>
</li>
</ul>
</li>
</ul>
<div id="respond">
<div class='send'>
<form>
<textarea></textarea>
<input type="button" value="Отправить" />
<form>
</div>
</div>
</body>
</html>
|
вот добавил отмену :)
спасибо большое ksa ;) з.ы. не могу сделать, чтобы можно было тут посмотреть :)
$(document).ready(function (){
$('.otvet').click(function (){
$(this).hide();
$('#respond').hide();
$(this.parentNode).append($('#respond > .send').clone(true));
});
$('.send input').click(function (){
/* тут делай что хочешь */
var o=$(this).parents('.comment');
o.find('.send').remove();
o.find('.otvet').show();
});
$('.cancel').click(function (){
var o=$(this).parents('.comment');
o.find('.send').remove();
o.find('.otvet').show();
$('#respond').show();
});
});
<ul class="comments"> <li> <div class="comment"> <p>Тут коммент</p> <a href="#" class="otvet">Ответить</a> </div> </li> </ul> <hr> <ul class="comments"> <li> <div class="comment"> <p>Тут коммент</p> <a href="#" class="otvet">Ответить</a> </div> </li> </ul> <hr> <div class="inner"> <div id="respond"> <div class="send"> <a href="#" class="cancel">отмена</a> <textarea name="comment" id="comment"></textarea> <input type="submit" value="Отправить"> </div> </div> </div> |
Но только там не красиво :( Сделал :) спасибо всем) сайт javascript прокачивает) |
| Часовой пояс GMT +3, время: 02:18. |