VPF::Показать полный текст - Форум программистов

CyClon

Дата 27.3.2006, 20:29 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 3.12.2005

Репутация: нет
Всего: 4

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

Код

<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:57

--------------------

CyClon

Дата 27.3.2006, 20:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 3.12.2005

Репутация: нет
Всего: 4

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

Код

<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

Это сообщение отредактировал(а) CyClon - 27.3.2006, 20:56

--------------------

Wolf1994

Дата 27.3.2006, 22:02 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

Репутация: 4
Всего: 29

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

)

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

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

Код


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

12345c

Дата 27.3.2006, 23:49 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Цитата(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>

Это сообщение отредактировал(а) 12345c - 27.3.2006, 23:55

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

CyClon

Дата 28.3.2006, 10:02 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 3.12.2005

Репутация: нет
Всего: 4

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

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

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

--------------------

Wolf1994

Дата 28.3.2006, 10:46 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

Репутация: 4
Всего: 29

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 3.12.2005

Репутация: нет
Всего: 4

Цитата

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

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

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

На счет:

Код

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

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

А вот на счет:

Код

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

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

--------------------

Ciber SLasH

Дата 28.3.2006, 16:49 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

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

)

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

Игнорируют.

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

12345c

Дата 28.3.2006, 19:11 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

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

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

CyClon

Дата 28.3.2006, 19:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 3.12.2005

Репутация: нет
Всего: 4

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

--------------------

12345c

Дата 28.3.2006, 22:30 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

А, так бы и сказал - уберите всё лишнее и добавьте нужное, а то про варианты 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>

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

tabularasa

Дата 9.4.2006, 12:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 9.4.2006

Репутация: нет
Всего: нет

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

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

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »