Автор Тема: Создание "разворачивающихся" вкладок  (Прочитано 3603 раз)

Оффлайн YaricZ

  • Автор
  • Дипломированный IT-шник
  • *****
  • Сообщений: 1380
  • Репутация: 150
  • живу как умею
    • живое отражение живой жизни
Приветствую !
На моём сайте есть регулярно обновляющаяся страничка с новостями (с сентября по декабрь) Хочу сделать следующее: создать вкладки типа "Новости за сентябрь >>>>" "Новости за Октябрь >>>" Но так, чтобы при  нажатии на такую ссылку новости за определённый месяц "разворачивались" вниз, а остальные открытые месяцы "сворачивались".
1. Не хочу использовать фреймы
2. Не желательно делать несколько страниц

В итоге скорее прошу подсказать подходящий JavaScript для выпадающего контекста.

Заранее спасибо. YaricZ
Живи

Оффлайн Paska

  • Студент
  • *****
  • Сообщений: 646
  • Репутация: 3
    • THG.ru
Создание "разворачивающихся" вкладок
« Ответ #1 : 15 Декабрь 2005, 00:09:22 »
YaricZ
 Насколько понял такую фишку только на флеше. Готовы ли посетители платить за красивость очень медленной скорость? ИМХО лучше не мучатся и орнганизовать отдльными файлами.
Не ищите во мне милосердие к людям..

Оффлайн Steven

  • Моддер
  • Первоклассник
  • *****
  • Сообщений: 38
  • Репутация: 1
    • http://www.stev.da.ru
Создание "разворачивающихся" вкладок
« Ответ #2 : 15 Декабрь 2005, 00:36:11 »
ой ой... что-то вы мудрите!!!
Зайдите на любой другой форум и потыкайте на название раздела форума... он сложиться! если надо - вышлю образец!
(на этом форуме нет такого стиля)
не падай чем попало и где попало...

Оффлайн YaricZ

  • Автор
  • Дипломированный IT-шник
  • *****
  • Сообщений: 1380
  • Репутация: 150
  • живу как умею
    • живое отражение живой жизни
Создание "разворачивающихся" вкладок
« Ответ #3 : 15 Декабрь 2005, 10:09:49 »
Steven
Почему мудрю ? :)
Жду образец на мыло ! Спасибо !

YaricZ@mail.ru
Живи

Оффлайн Paska

  • Студент
  • *****
  • Сообщений: 646
  • Репутация: 3
    • THG.ru
Создание "разворачивающихся" вкладок
« Ответ #4 : 15 Декабрь 2005, 11:12:29 »
Steven
Цитировать
ой ой... что-то вы мудрите!!!

Это мне?
гы, я почему то подумал о выплывающих менюшках  :roll:

YaricZ Объясните по подробней плиз. Если вас правильно понял, то у вас есть ряд ссылок, клик по одной открывает в том же фрейме, клик по другой сворачивает ее и открывает новую в том же фрейме. Так? Если да, то afaik скрипт достаточно простой. ИМХО стоит поползать по соответствующим конференциям. Там наверно и ссылками потешат сразу и если, что-то не получается, то помогут "массово"
Не ищите во мне милосердие к людям..

Оффлайн dunadan

  • Автор
  • Первоклассник
  • *****
  • Сообщений: 23
  • Репутация: 0
  • искатель
Создание "разворачивающихся" вкладок
« Ответ #5 : 16 Декабрь 2005, 00:43:57 »
адрес сайта - секретная информация?  :wink:
Roads? Where we're going, we don't need roads.
(с) Back to the future

Оффлайн YaricZ

  • Автор
  • Дипломированный IT-шник
  • *****
  • Сообщений: 1380
  • Репутация: 150
  • живу как умею
    • живое отражение живой жизни
Создание "разворачивающихся" вкладок
« Ответ #6 : 16 Декабрь 2005, 10:11:46 »
dunadan
www.YaricZ.narod.ru
Заходите. Он есть в профиле, поэтому не стал указывать здесь.
Steven
Агромное Спасибо , образец получил ! Пока с кодом не разбирался - на певый взгляд - там чёрт ногу сломит. Возможно, возникнут вопросы :)
Живи

Оффлайн Ijon

  • Первоклассник
  • *
  • Сообщений: 37
  • Репутация: 1
Создание "разворачивающихся" вкладок
« Ответ #7 : 16 Декабрь 2005, 18:27:08 »
Делается это, например, так:
[syntax="javascript"]
<!-- example: jscript_newsblock.html -->
<html><head>
  <script type="text/javascript" language="Javascript">
    function visObj(objId, value){
      if(value)
        document.getElementById(objId).style.display = "block";
      else
        document.getElementById(objId).style.display = "none";
      }
    function selectMatching(index){
      var i = 1;
      for(; i < 4; i++)
        visObj('n' + String(i), (i == index) || (index == 0));
      }
  </script>
</head><body>
  <p><a href="javascript:selectMatching(1)">show 1st</a><br>
    <a href="javascript:selectMatching(2)">show 2nd</a><br>
    <a href="javascript:selectMatching(3)">show 3rd</a><br>
    <a href="javascript:selectMatching(0)">show all</a></p>
   
  <div id="n1">news story 1: blah blah blah</div>
  <div id="n2">news story 2: blah blah blah</div>
  <div id="n3">news story 3: blah blah blah</div>
</body></html>
[/syntax]


Через regexp:
[syntax="javascript"]
<!-- jscript_newsblock, issue #2 -->
<html><head>
  <script type="text/javascript">
    cNews = ["elz", "el0", "fa0","fa1"];
    function visObj(objId, value){
      document.getElementById(objId).style.display = value? "block":"none";
      }
    function selectMatching(pattern){
      rexp = new RegExp(pattern, "i");
      for(i = 1; i <= cNews.length; i++)
        visObj("nd" + String(i), rexp.test(cNews[i-1]));
      }
  </script>
</head><body onload="javascript:selectMatching('none')">
  <p><a href="javascript:selectMatching('^fa')">show 06 jan *</a><br>
    <a href="javascript:selectMatching('^el')">show 05 dec *</a><br>
    <a href="javascript:selectMatching('^..0')">show * * 27</a><br>
    <a href="javascript:selectMatching('')">show all</a></p>
   
  <div id="nd4">2006, january, 28</div>
  <div id="nd3">2006, january, 27</div>  
  <div id="nd2">2005, december, 27</div>
  <div id="nd1">2005, december, 26</div>  
</body></html>
[/syntax]

Мораль: rtfm :)

Оффлайн Delin

  • Автор
  • Бородатый админ
  • *****
  • Сообщений: 1957
  • Репутация: 95
  • At The Opera Tonight!
Создание "разворачивающихся" вкладок
« Ответ #8 : 16 Декабрь 2005, 21:18:43 »
Если я правильно понял вопрос, то вот что могу продлолжить:
Новости выпадают по одному месу, когда наводишь на них мышку, без JavaScript, используется css.
Вот страничка:

<html>
<head>
<title>Выпадающие линки</title>
<link rel="StyleSheet" href="style000.txt" type="text/css" />
</head>
<body>
<div id="topbox"><ul id="topmenu">

<li><a href="http://www.gruppa1.ru"><img src="G1.gif" width="22" height="20" alt="Рис 1" />Новости за июнь 2010</a>
<ul>
<li><a href="../1.htm"></a>Абырвалгглаврыба Абырвалгглаврыба Абырвалгглаврыба Абырвалгглаврыба </li>
<li><a href="http://www.link2.ru">Что бы такого написать???? Что бы такого написать???? Что бы такого написать????  такого написать????</a></li>
</ul>
</li>

<li><a href="http://www.gruppa2.ru"><img src="G2.gif" width="22" height="20" alt="Рис 2" />Новости за июль 2010</a>
<ul>
<li><a href="http://www.link1.ru">Выпал снег</a></li>
</ul>
</li>

<li><a href="http://www.gruppa3.ru"><img src="G3.gif" width="22" height="20" alt="Рис 3" />Новости за август 2010</a>
<ul>
<li><a href="http://www.link1.ru">Вышел Сталкер (а как звучит, зацените!!!!!!!!!)</a></li>
<li><a href="http://www.link2.ru">Далее следует ничего не значящий набор букв: влдаолвоалвал лухзхзфбчючь lkweoweowekl oskodksld wwoweioqsa,mvjg sjhjsfhjfh</a></li>
</ul>
</li>

<li><a href="http://www.gruppa4.ru"><img src="G4.gif" width="22" height="20" alt="Рис 4" />Новости за сентябрь 2010</a>
<ul>
<li><a href="http://www.link1.ru">Нет новостей</a></li>
</ul>
</li>

<li><a href="http://www.gruppa5.ru"><img src="G5.gif" width="22" height="20" alt="Рис 5" />Новости за октябрь 2010</a>
<ul>
<li><a href="http://www.link1.ru">Нноооввооссттии Нноооввооссттии Нноооввооссттии </a></li>
<li><a href="http://www.link2.ru">Ииззввеессттиияя Ииззввеессттиияя Ииззввеессттиияя Ииззввеессттиияя</a></li>
</ul>
</li>

</ul>

</div>
</body>
</html>

А вот css:

a, a:link, a:visited, a:active { color: #13427f; font-weight: bold; text-decoration: none; }
a:hover { color: #13427f; text-decoration: underline; }
a.black, a.black:link, a.black:visited, a.black:active { color: #000000; font-weight: bold; text-decoration: none; }
a.black:hover { text-decoration: underline; }

img { vertical-align: middle; }

#topbox { margin: 0 0px 18px 0px; padding: 1px 0 0 0; border: none;
font-family: 10pt sans-serif;
color: silver; color: #afd563; background-color: #357895;
height: 23px; vertical-align: middle; overflow: visible; }

#topmenu { display: block; margin: 0; padding: 0 10px; list-style: none; }

#topmenu li { float: left; height: 3px; margin: 0 10px 0 0; padding: 1px 0 0 0; }

#topmenu li ul { position: absolute; left: -100em; margin: 0px 0 0 10px;
padding: 0 10px 3px 0; position: absolute; border: 1px #fear70 solid; background: #485484; list-style: none; }

#topmenu li:hover ul, #topmenu li.over ul { left: auto; }

Если это не то, что надо, то извините  :oops:

Оффлайн YaricZ

  • Автор
  • Дипломированный IT-шник
  • *****
  • Сообщений: 1380
  • Репутация: 150
  • живу как умею
    • живое отражение живой жизни
Создание "разворачивающихся" вкладок
« Ответ #9 : 16 Декабрь 2005, 22:00:52 »
Delin
Ijon
Огромное Вам спасибо !
Это то, что надо ! :D
Живи

Оффлайн Delin

  • Автор
  • Бородатый админ
  • *****
  • Сообщений: 1957
  • Репутация: 95
  • At The Opera Tonight!
Создание "разворачивающихся" вкладок
« Ответ #10 : 21 Декабрь 2005, 07:32:54 »
То, что я выложил, почему-то некорректно отбражается в IE. В Opere все нормально.

Оффлайн YaricZ

  • Автор
  • Дипломированный IT-шник
  • *****
  • Сообщений: 1380
  • Репутация: 150
  • живу как умею
    • живое отражение живой жизни
Создание "разворачивающихся" вкладок
« Ответ #11 : 21 Декабрь 2005, 08:57:18 »
Вот ещё вопрос
Как делать так, чтобы при загрузке страницы (пример Ijon`а)
слои div были скрыты ?
Живи

Оффлайн Delin

  • Автор
  • Бородатый админ
  • *****
  • Сообщений: 1957
  • Репутация: 95
  • At The Opera Tonight!
Создание "разворачивающихся" вкладок
« Ответ #12 : 22 Декабрь 2005, 07:28:36 »
Цитировать
Как делать так, чтобы при загрузке страницы (пример Ijon`а)
слои div были скрыты ?
Цвет фрифта поставь как у фона :)))

Оффлайн YaricZ

  • Автор
  • Дипломированный IT-шник
  • *****
  • Сообщений: 1380
  • Репутация: 150
  • живу как умею
    • живое отражение живой жизни
Создание "разворачивающихся" вкладок
« Ответ #13 : 22 Декабрь 2005, 08:58:56 »
Delin
А потои я что буду делать ?
Мне же ещё надо будет эти слои отобразить. :D
Живи

Оффлайн director

  • Детсадовец
  • *
  • Сообщений: 2
  • Репутация: 0
    • http://www.kiroff.ru
Создание "разворачивающихся" вкладок
« Ответ #14 : 22 Декабрь 2005, 13:20:17 »
Посмотри, как сделано на http://www.shop.kiroff.ru - не совсем просто, но зато аккуратное ниспадающее меню.
www.kiroff.ru - мобильные развлечения