Форум

utb · #1 (**permalink**) 15.05.2013, 12:48

Приветствую,
вот интересует такое:
В блогах часто бывает, при комментарии по клику на ответить, форма ответа появляется снизу комментария.

а какой тут механизм?
получаем копию и вставляем после коммента? или надо все таки удалить форму основную, которая внизу, например

Заранее спасибо

ksa · #2 (**permalink**) 15.05.2013, 13:17

Сообщение от utb

а какой тут механизм?

Где пример твоего ХТМЛя?

Deff · #3 (**permalink**) 15.05.2013, 13:26

utb,
Простейшее, перенести форму скриптом под сообщение, но нун смотреть HTML страницы, посколь в форме часто бывают скрипты, которые при переносе возобновляют активность, тогда нужно реализовывать перенос без скриптов, удаляя их перед действием

qwerty-клавиатура · #4 (**permalink**) 15.05.2013, 13:30

formElement.style.display = 'none';

formElement.style.display = 'block';

utb · #5 (**permalink**) 15.05.2013, 14:10

ХТМЛ в студию

<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), а ну еще куда нибудь поставить кнопку Отмена

Цитата:

бывают скрипты, которые при переносе возобновляют активность,

не понял, например? поля с добавлением файла как пример? или о чем то другом?

utb · #6 (**permalink**) 15.05.2013, 15:15

набросал тут свой говнокод

<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

ksa · #7 (**permalink**) 16.05.2013, 16:14

Сообщение от utb

набросал тут свой говнокод

Могу предложить свой вариант...

<!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>

utb · #8 (**permalink**) 17.05.2013, 16:00

вот добавил отмену

спасибо большое 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>

utb · #9 (**permalink**) 17.05.2013, 21:34

Хм, а как убрать дули: при клике на каждую ссылку Ответить будет форма.
Но только там не красиво

Сделал

спасибо всем) сайт javascript прокачивает)

Форум

Справочник

Discord чат

Курсы javascript