Форум » Усовершенствование и доработка стандартных движков. » Блок новостей со вкладками. » Ответить

Блок новостей со вкладками.

Allera: И так. объясню что это такое, для тех, кто не знает. Когда вы переключаете вкладки в браузере, открывается страница это вкладки. Тоже самое происходит и с этим кодом. Вы кликаете по вкладке (текст, картинка) и открывается её окно. Очень полезно для ролевых игр, чтобы не занимать много места в таблице. Лучше всего ставить в окно новостей. Код не мой, я его достаточно долго искала и пыталась совместить с бордой. 1. Между </HEAD> и <BODY> ставим скрипт №1: [quote]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>[/quote] 2. Сразу после <BODY> ставим скрипт №2: <script type="text/javascript"> $(document).ready(function() { $("td.#MenuTxT div.submenutext").hide(); <!--$(".tabs span:first").addClass("active").show(); --> $("td.#MenuTxT div.submenutext:first").show(); $("div.#menu span").click(function() { $("div.#menu span").removeClass("tabactive"); $(this).addClass("tabactive"); $("td.#MenuTxT div.submenutext").hide(); var activeDiv = $(this).attr("alt"); $("div."+activeDiv).fadeIn(); return false; }); }); </script> 3. Дальше ставим CSS код для оформления таблицы (я лично не оформляла особо. Только размер и всё) между </STYLE> и </HEAD>: [quote]<style> #menu span { padding: 7px 15px 7px; margin-right: 5px; margin: 10px 0; width: 100px; text-decoration: none; } #menu .tabactive { color: black; } #submenu { padding: 5px; height: 180px; text-align: center; width: 720px; } .submenutext { display: none; height: 60px; } </style>[/quote] 4. В окно новостей ставим сам блок. [quote]<div class="html-box"> <center><table style="width: 950px;"> <tbody> <tr> <td> <center><div id="menu"> <b><span alt="#001" "style="cursor: pointer;">Вкладка 1</span><span alt="#002" "style="cursor: pointer;">Вкладка 2</span><span alt="#003" "style="cursor: pointer;">Вкладка 3</span><span alt="#004" "style="cursor: pointer;">Вкладка 4</span><span alt="#005" "style="cursor: pointer;">Вкладка 5</span><span alt="#006" "style="cursor: pointer;">Вкладка 6</span> Дополнительная вкладка </b> </div></center> </td> </tr> <tr> <td id="MenuTxT" valign="top" align="center"> <div id="submenu" align="center"> <div id="001" class="submenutext" style="display: block;"><br><br>Текст вкладки 1<br><br></div> <div style="display: none;" id="002" class="submenutext"><br><br>Текст вкладки 2<br><br></div> <div style="display: none;" id="003" class="submenutext"><br><br>Текст вкладки 3<br><br></div> <div style="display: none;" id="004" class="submenutext"><br><br>Текст вкладки 4<br><br></div> <div style="display: none;" id="005" class="submenutext"><br><br>Текст вкладки 5<br><br></div> <div style="display: none;" id="006" class="submenutext"><br><br>Текст вкладки 6<br><br></div> Содержимое к дополнительно вкладке </td></tr> </tbody></table></center> </div>[/quote] Номер, к которому принадлежит вкладка и её содержимое. Тоесть, если вы хотите, чтобы нажав на вкладу 008 вы хотите увидеть какой-либо текст, то вы должны указать, принадлежность к этой вкладке. Номера не должны повторяться На тот случай, если вы захотите добавить вкладки: код вкладки: [quote]<span alt="#007" "style="cursor: pointer;">Вкладка 7</span>[/quote] код содержимого вкладки [quote]<div style="display: none;" id="006" class="submenutext"><br><br>Текст вкладки 6<br><br></div>[/quote] Пример использования данного блока -http://primer0002.unoforum.ru/ Вот, как я использовала этот блок у себя -http://2ndlife.unoforum.ru/

Ответов - 7

Большой Бу: Allera Аякс на борде это чудо чудное...

Allera: Что-то не так? Я лично кодом очень довольна. У меня на ролевой он к стати. Меньше места занимают новости, больше места таблица форума.

Большой Бу: Allera пишет: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> это можно сравнить с... если бы вы купили бы вместо кухонного комбайна ресторан, что бы вам готовили еду и снимали за это каждый раз кучу денег... когда можно найти хороший вариант кухонного комбайна и съэкономить деньги. В данном случае время загрузки форума. Можно найти в сети аналог более компактный... Откройте файл и убедитесь сами: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js объем не хилый. Я не противник Аякса но не в данном случае.


Allera: Я не написала, что скрипт не мой. Я просто нашла то, что очень давно хотела поставить на форум и объяснила, как поставить. А если такой умный, написал бы скрипт для незнающих и не умеющих, чем тут претензии высказывать Я долго просила помочь с ним и никто не ответил. Вот и надыбала у кого-то на rolka.su через исходный код этот блок и научилась ставить его на борду.

Большой Бу: Allera Мой вам совет не берите с ролки скрипты)) а то несварение произойдет)

Allera: у меня не произошло, как видите. и поставить смогла спокойно.

Странник: Здравствуйте. Спасибо за скрипт, как раз то, что искал. Проблем не было до того момента, пока я не решил немного изменить дизайн и чтобы текст не вылезал на край рамки таблица, надо было увеличить значение "cellspacing". И оно смещается только в одну сторону. Долго не мог понять, в чем дело, но потом понял, что если убрать этот скрип новостей полностью, то будет все нормально. Но новости мне нужны именно такие. Вы не знаете, есть ли что-то такое, только для борды? Потому я видел их только на mybb. Тестовый. А вот так выглядит без новостей.



полная версия страницы