Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Показать полный текст

Автор: CyClon 27.3.2006, 20:29

Хотел бы, товарищи, узнать, какое решение будет самым элегантным для использования слоев? Т.е. есть текст какой-то (ссылка). При нажатии надпись должна изменяться, например из "показать" на "скрыть" и внизу должен появляться какой-то текст. Лично мне нравится такой вариант:

Код

<script language="javascript" type="text/javascript">
<!--
function layer(name)
{
    var id = document.getElementById(name);
    id.style.display = (id.style.display == 'none') ? "" : "none";
}
//-->
</script>

<a onclick="javascript:layer('layer_1');" href="#">Short Text</a>
<div id="layer_1" style="display: none">Full Text</div>

Минимум кода, все понятно. Но есть недостатки - нельзя изменить "Short Text" при раскрытии "Full Text". В остальном вроде бы все отлично.

Кто может предложить альтернативу, показать минусы и дать дельные советы?

Автор: CyClon 27.3.2006, 20:55

Вот, немного модифицировал скрипт. Теперь можно изменять заголовок.

Код

<script language="javascript" type="text/javascript">
<!--
function layer(layer_id, short_head, full_head)
{
    var id = document.getElementById("layer_" + layer_id);
    var id = eval(id);
    var head = document.getElementById("a_layer_" + layer_id);
    var head = eval(head);
    if (id.style.display == 'none')
    {
        head.innerHTML = full_head;
        id.style.display = "";
    }
    else
    {
        head.innerHTML = short_head;
        id.style.display = "none";
    }
}
//-->
</script>

<a id="a_layer_1" onclick="javascript:layer('1', 'Показать', 'Скрыть');" href="#">Показать</a>
<div id="layer_1" style="display: none">Расширенный текст</div>

Жду ваших комментариев smile

Автор: Wolf1994 27.3.2006, 22:02

Цитата(CyClon @ 27.3.2006, 20:55

)

Жду ваших комментариев

Вот это лишнее, IMHO:

Код


    var id = eval(id);
    var head = eval(head);

Автор: 12345c 27.3.2006, 23:49

Цитата(CyClon @ 27.3.2006, 20:29

)

Но есть недостатки - нельзя изменить "Short Text" при раскрытии "Full Text".

Почему, кто мешает?

Ну, вот это будет получше, хотя без подсказок по наведению и вырвано из контекста.

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<STYLE>    .viewCode{position:relative;visibility:hidden;white-space:normal;width:74%;
        font-family:Lucida Console,Courier;
        border:1px solid #999999;border-top:0px;padding:0px 0px 0px 3%;margin:0px 0px 2px 25%;
        background:#eeeeee;text-indent:-2.5%;}
    .viewCodeHead{position:relative;visibility:hidden;white-space:normal;width:74%;
        font-weight:bold;font-size:84%;
        border:1px solid #ff9999;padding:0px 0px 0px 3%;margin:2px 0px 0px 25%;
        background:#ffe4e4;text-indent:-2.5%;}
    .winButton{border:1px solid #ff9999;border-collapse:collapse;float:right;cursor:default;}.winButton td{padding:0px 3px;font-weight:bold;font-size:70%;text-indent:0px;}
</STYLE>

<span onclick=viewCode(10)>Показать.</span><br>
<script>d=document;dID=function(I){return document.getElementById(I);};    nomr=10;
    v='visible';hid='hidden';FF=navigator.appName=="Netscape"; /*isGecko*/
d.write('<div style="position:absolute;width:9'+(d.all&&!FF?(self.opera?'6':'8'):'5')+'%;>');
d.write('<div class=viewCodeHead id=xmpOcHead'+nomr+'><table class=winButton onclick=viewCode(\''+nomr+'\')><tr><td title=Закрыть>X</td></tr></table>Дайте оценку работе примера</div>\n');
d.write('<div class=viewCode id=xmpOc'+nomr+'>Оценить качество демонстрации. Соответствует ли видимый эффект описанию?</div>\n');
d.write('</div>\n');

viewCode=function(c){
    dID('xmpOc'+c).style.visibility=dID('xmpOc'+c).style.visibility==v?hid:v; //вид/не вид
    dID('xmpOcHead'+c).style.visibility=dID('xmpOcHead'+c).style.visibility==v?hid:v;
}
</SCRIPT>

Автор: CyClon 28.3.2006, 10:02

12345c, Прочитай второй пост, там я уже модифицировал, можно изменить smile

Только в твоем коде я нашел такие слова, как Opera, Netscape. Мой код будет работать под Opera, Netscape? Или же только под IE?

Wolf1994, Действительно, и без eval все отлично работает.
Добавлено @ 10:05
На Opera 8.51 RUS мой код работает... И на IE 7 тоже.

Автор: Wolf1994 28.3.2006, 10:46

Цитата(CyClon @ 28.3.2006, 10:02

)

На Opera 8.51 RUS мой код работает... И на IE 7 тоже.

А также в FireFox 1.0.6.

И, если идти до конца, то можно ещё исправить:

Код


<script language="javascript" type="text/javascript">

на:

Код


<script type="text/javascript">

и это:

Код


<!--
//-->

на:

Код


//<![CDATA[
//]]>

- тогда скрипт будет соответствовать последним стандартам.

PS. Спасибо за плюс. Я очень ценю повышение репутации на этом форуме.

Автор: CyClon 28.3.2006, 16:47

Цитата

PS. Спасибо за плюс. Я очень ценю повышение репутации на этом форуме.

Когда чего-то не хватает, то ценять сильно smile

К примеру деньги ;)

На счет:

Код

<script language="javascript" type="text/javascript">

Это я вставил, чтобы PHP Expert Editor код подсвечивал.

А вот на счет:

Код

//<![CDATA[
//]]>

Не знал. Как к этому относятся старые браузеры?

Автор: Ciber SLasH 28.3.2006, 16:49

Цитата(CyClon @ 28.3.2006, 17:47

)

Как к этому относятся старые браузеры?

Игнорируют.

ЗЫ: это нужно только для XHTML.

Автор: 12345c 28.3.2006, 19:11

CyClon, решений много, и методов несколько.

1) дописать текст в innerHTML;
2) открыть в невидимом слое;
2.1) раздвинув поток документа;
2.2) в плавающем слое;
2.3) визуализировав подготовленное пустое место;
3) залить в пустой слой;
4) в новом окне с позиционированием;
5) перезагрузка страницы;
6) загрузить в плавающий фрейм.

Автор: CyClon 28.3.2006, 19:17

12345c, Несомненно, ты прав. Но я нахожусь в поисках самого "элегантного" решания - то есть - простота кода. маленьки размер кода, работоспособность на большинстве браузеров. Приведенное мной выше решение полностью меня удволетворяет, да и альтернативы я не вижу пока. Вот и создал топик, чтобы мне глаза раскрыли, опказали более альтернативные методы организации слоев, в основном, для новостной ленты.

Автор: 12345c 28.3.2006, 22:30

А, так бы и сказал - уберите всё лишнее и добавьте нужное, а то про варианты smile

Код

<style>span{font-style:italic;color:blue;cursor:hand;cursor:pointer;}</style>
<script>dID=function(I){return document.getElementById(I);};
showA=function(s1,s2){dID(s1).style.display='none';dID(s2).style.display='block';}
</script>

<div id=lay1st class=articl>Начало статьи, ля-ля-ля, и так далее,
    <span onclick=showA('lay1st','lay2st')>...подробнее</span>.</div>
<div id=lay2st class=articl style=display:none>Начало статьи, ля-ля-ля, и так далее,
    и далее, и далее, до конца статьи весь текст вместе с началом. (В конце статьи можно:
    <span onclick=showA('lay2st','lay1st')>(Свернуть)</span> )</div>

Автор: tabularasa 9.4.2006, 12:46

подскажите, а как сделать так, чтобы при нажатии на ссылку ОТОБРАЗИТЬ/СКРЫТЬ в тексте появлялись и соответственно убирались дополнительные строки между строчек.
т.е. типа такого:
ЗАГРУЖАЕТСЯ
строка текста 1
строка текста 2
строка текста 3

ПОСЛЕ НАЖАТИЯ "ОТОБРАЗИТЬ" НУЖНО ПОЛУЧИТЬ
ОТОБРАЖЕННАЯ СТРОКА 1
строка текста 1
ОТОБРАЖЕННАЯ СТРОКА 2
строка текста 2
ОТОБРАЖЕННАЯ СТРОКА 3
строка текста 3

ну и после нажатия СКРЫТЬ все возвращается на исходнуую