Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   раскрывающийся текст (https://javascript.ru/forum/dom-window/8393-raskryvayushhijjsya-tekst.html)

sc2r2bey 23.03.2010 14:23

раскрывающийся текст
 
как сделать чтоб отображалась часть текста, а при нажатии ссылки раскрывался весь текс без перезагрузки и корректно работал во всех браузерах?

SkyLight 23.03.2010 17:29

Для этого вам нужно посылать AJAX-запрос на сервер, забирать оттуда нужный текст и затем вставить его куда надо, при этом опционально проводить манипуляции с кликнутой ссылкой и контейнером для текста.
В общем, копать по слову "AJAX".

Gozar 23.03.2010 17:38

Цитата:

Сообщение от sc2r2bey (Сообщение 48740)
как сделать чтоб отображалась часть текста, а при нажатии ссылки раскрывался весь текс без перезагрузки и корректно работал во всех браузерах?

<html>
<body><div style="height:300px">
<span style="cursor:pointer;color:blue" onclick="document.getElementById('ta').style.height = '100px'">раскрыть</span>
<div id="ta" style="height:20px;overflow:hidden">bla
 bla <br>bla<br>bla<br>bla<br>bla<br>
</div>
еще какой-то текст</div>
</body>
</html>

SkyLight 23.03.2010 17:59

Если раскрыть надо сравнительно небольшой кусок контента, то и такой способ покатит. А вот если надо показать довольно большую статью, например, или даже несколько, то тут желательно все-таки использовать подгрузку.

sc2r2bey 23.03.2010 18:07

спасибо! а как сделать раскрывающийся - закрывающийся?

morkovka 23.03.2010 18:25

Есть такой jquery
 
Цитата:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Подробности</title>
<script src="http://сайт/js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<style type="text/css">
<!--
.opis {
display:none;
text-align:inherit
}
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
clear: both;
float: none;
}
a {
font-family: Georgia, Times New Roman, Times, serif;
color: #F30;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
-->
</style>
<script type="text/javascript">
$(document).ready(function() {$('#opislink00').click(function() {
if ( jQuery.browser.msie && parseInt(jQuery.browser.version) == 6) {
if ($('#opis10').css("display")=="block") {$('#opis00').css("display", "none");
} else {$('#opis00').css("display", "block");
}
} else {$('#opis00').toggle("slow");
}
if ($('#opislink00').text()=='подробнее..') {$('#opislink00').text('..скрыть');
} else {$('#opislink00').text('подробнее..');
}
});
});
</script>

</head>
<body>
<a href="javascript:void(0)" id="opislink00">подробнее..</a>

<div class="opis" id="opis00">

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
</div>
</body>
</html>
Библиотека здесь jquery.com

Пример

sc2r2bey 23.03.2010 20:16

не работает по вашей ссылочке

Nekromancer 23.03.2010 20:26

Цитата:

<script type="text/javascript" src="http://morkovka.su/js/jquery-1.2.1.pack.js"></script>
бггг.. если уж подключать что-то) то по новее..
кстати всё равно работает )

SkyLight 23.03.2010 20:29

Раз уж человек не знает, как сделать раскрывающийся блок, то лучше пусть сначала поймет, как это делается в принципе, а уж потом показывать ему jQuery. Оно-то понятно, что с его помощью такое сделать как два пальца, но все же без теории знания будут в разы слабее...

subzey 23.03.2010 21:08

Цитата:

Сообщение от SkyLight
Если раскрыть надо сравнительно небольшой кусок контента, то и такой способ покатит. А вот если надо показать довольно большую статью, например, или даже несколько, то тут желательно все-таки использовать подгрузку.

Чтобы показать большую статью, желательно использовать отдельный URI. Имхо.

Kolyaj 23.03.2010 21:11

Цитата:

Сообщение от SkyLight
Оно-то понятно, что с его помощью такое сделать как два пальца

Без него тоже как два пальца, более того кода будет не больше.

sc2r2bey 24.03.2010 08:21

и все-таки есть решение?

SkyLight 24.03.2010 12:06

Часть решения уже дали, направление, где искать остальное - тоже, чего еще-то?

Nekromancer 24.03.2010 13:11

Готовый код и стрелочка -> тыкать сюда ;)

kibal4iw 26.03.2010 12:40

Вот мой код. Код кросс-броузерный.

P.S. только начинаю использовать JS, если что неправильно подскажите ошибки.

<style type="text/css">
    #text {width: 450px; height: 70px; border: 1px solid #03F; overflow: hidden;}
</style>

<div id="text">
Подскажите, пожалуйста, как можно сделать так, чтобы область нажатия кнопки была та, которая видна, то есть если кнопка в виде окружности (как в формате png), то нажать на нее можно только наведя курсор на саму окружность, а не на всю прямоугольную область рисунка, спасибо<br />
Подскажите, пожалуйста, как можно сделать так, чтобы область нажатия кнопки была та, которая видна, то есть если кнопка в виде окружности (как в формате png), то нажать на нее можно только наведя курсор на саму окружность, а не на всю прямоугольную область рисунка, спасибо
</div>
<a href="change_photo.html" id="showText">Проссмотреть полностью</a>

<script type="text/javascript">
    var showText = document.getElementById("showText");
		
	showText.addEventListener ? showText.addEventListener("click", f_showText, false) : (showText.attachEvent("onclick", f_showText));
	
	
	function f_showText(event) {
		// кросс-браузерное получение события
		event = event || window.event;
		// кросс-браузерный запред перехода ссылки, можно было просто в самой ссылке прописать javascript:void(0);
		event.preventDefault ? event.preventDefault() : (event.returnValue = false);
		
		var div = document.getElementsByTagName("DIV")[0];
		
		if (div.style.height == "100%")
		    div.style.height = "70px";
		else div.style.height = "100%";
		
	}
</script>


Часовой пояс GMT +3, время: 04:03.