HTML, CSS, DHTML, XML и т.д.

НАЙДЕНО!!:Есть ли альтернатива споилеру из форума

,

в HTML???

Дата публикации:

DimonNT, 9.06.2009 - 6:51

Есть ли альтернатива споилеру из форума в HTML???
т.е. Чтобы появилось название текста и при нажатии на него вниз выезжал сам текст...

middleman, 9.06.2009 - 8:55

В HTML нет. только Javascript.

DimonNT, 9.06.2009 - 8:57

Ну хотябы Java....подскажите какой использовать....

middleman, 9.06.2009 - 10:39

Можно таблицами можно дивами. В примере было удобнее использовать таблицы, да и для объяснения они проще.
В общем так:
Code
<table class="news">
<tr>

<!-- Эта ячейка таблицы будет кнопкой, которая включает/отключает отображение второй ячейки -->
<td class="newsheader" onclick="if (news.style.display=='block') {news.style.display='none'} else {news.style.display='block'}">
Нажмите для открытия спойлера
</td>


</tr>
<tr>

<!-- А это само скрываемое поле -->
<td class="newstext" id="news" style="display: block">
Текст под катом
</td>
</table>


В даном случае событие
Code
onclick="if (news.style.display=='block') {news.style.display='none'} else {news.style.display='block'}"

Первой строки таблицы, как можно видеть, управляет свойством display второй строки.

Текст вытянут из реального проекта и многое убрано, атк что если не получиться такое организовать отписывайся - напишу отдельно рабочий вариант.

DimonNT, 9.06.2009 - 12:37

Впринципе работет, но смотри что получается
"при нажатии=если (закрыт)(на экране нет), иначе(закрыт)"
Работает немного не так!Получается что когда заходиш на страничку текст открытый, а при нажатии на кнопку он скрывается...а надо наоборот чтоб зашёл было закрыто и при нажатии открылось!....вот такие php(фейк на вот такие пирожки (вот такие пи аш пи) by DimonNT inc...)

stepanyk, 9.06.2009 - 12:49

DimonNT,
просто замени
Code
<td class="newstext" id="news" style="display: block">

на
Code
<td class="newstext" id="news" style="display: none">

DimonNT, 9.06.2009 - 17:30

Ещё вопросик....
Можно ли эту таблицу расширить???
И почему когда я вставляю в текст пробелы т.е. текст вылазит за границы табла!?

stepanyk, 9.06.2009 - 18:30

это не пробел, это начало новой строки в таблице и при не правильном использовании может все коробить.
если нужен вертикальный отступ лучше использовать
,
а вообще посмотри тег в справочнике, например на html.manual.ru

mr.mall, 9.06.2009 - 19:06

можно также через jQuery

DimonNT, 10.06.2009 - 3:50

Мне как раз надо горизонтальный отступ!!

middleman, 10.06.2009 - 10:39

горизонтальный отступ (примитивный вариант):

И вообще может сначала выучим HTML, а потом будем вопросы задавать?

DimonNT, 10.06.2009 - 13:58

middleman
Ты вроде говорил что есть второй вариант споилера!....напиши плиззз....
Или возможно ли расширить ту таблицу?

middleman, 10.06.2009 - 14:02

DimonNT,
блин, ну правда честное слово почитай учебник по HTML. Ну на много меньше вопросов будет.
        текст

далее все без изменений

скольконежалко может равняться, например, 50% 80% 100% или конкретная ширина таблицы в пикселях (300px 500px 800px)


Второй вариант спойлера на дивах с использованием цсс, но там все еще запутанее. Ты сначала таблицы нормально освой да HTML выучи.

DimonNT, 13.06.2009 - 6:58

middleman
давай свой второй метод.....с первым разобрался но таблицу разсширить так и не получилось...весь справочник перечитал...На обычных таблицах работают width....всякие а на этой нет!...

de1ay, 13.06.2009 - 12:01

DimonNT, выложи код.

DimonNT, 13.06.2009 - 13:18

Табла?
Code
 
<table class="news" width="577">
<tr>
<td class="newsheader" onclick="if (news.style.display=='block') {news.style.display='none'} else {news.style.display='block'}>
ТУТ ПИШИТЕ ЧТО ХОТИТЕ(это будет самой нажимаемой частью)
</td>


</tr>
<tr>

<td class="newstext" id="news" style="display: none">
Сам текстъ
</td>
</table>

Ещё момент если надо будет вставлять несколько этих "споилеров"
тогда меняйте "news" например на"news2" "newsheader" например на "newsheader2" "news.style.display" например на "news2.style.display"....вот так...а размеры width не канают....в исходнике пишу вроде показывает что норм, а при просмотре опять маленький размер, а мне надо туда вставить большой текст...(прога namo web editor 6 вот там есть режим редактирование+предпросмотр!вот я там растягиваю таблицу и в коде написано что размер типа изменился....но это типа!а на самом деле не изменился...)
Вся надежда на midleman...

de1ay, 13.06.2009 - 14:29

1. У тебя
и в отдельности.

DimonNT, 14.06.2009 - 4:14

de1ay
Я код немного подправил....попробуй у себя изменить размер таблицы если измениться тогда покажи код...ОК?

DimonNT, 23.06.2009 - 13:47

Я так понимаю что неработает....ответте хоть....что, получилось?

DimonNT, 28.06.2009 - 8:29

Вот нашёл вроде работает....
Code

<a href="javascript:sh()">Покажись/Закройся</a>
<div id="blabla1" style="display:none">
   <p>Gggg</p>
   <p> </p>
</div>
<script type="text/javascript">
function sh() {
   obj = document.getElementById("blabla1");
   if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; }
}
</script>

Всё довёл до ума! blabla1 меняем на любое другое значение, sh() на sh1() (sh2,3 и т.д.)!

stepanyk, 28.06.2009 - 9:32

Потому что ты меняеш id, но функция вызывается только одна. Нужно либо сделать много функций sh1, sh2 и тд либо передавать одной id в параметре, примерно так:
Code
<a href="javascript:sh('blabla1')">Покажись/Закройся</a>
<div id="blabla1" style="display:none">
  <p>Gggg</p>
  <p> </p>
</div><a href="javascript:sh('blabla2')">Покажись/Закройся</a>
<div id="blabla2" style="display:none">
  <p>Gggg</p>
  <p> </p>
</div>
<script type="text/javascript">
function sh(id) {
  obj = document.getElementById(id);
  if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; }
}
</script>


версия для печати -> Полная версия

SoftoRooM © 2004-2024
не закрываются.
2. Попробуй задавать width в процентах. В частности для table, и для каждого