| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум поддержки IPB.SU > Внешний вид форума > Открытие/закрытие блока |
| Автор: Сергей Июн 12 2011, 12:39 |
| Дополнение предназначено для разворачивания/сворачивания информации по нажатию на определённый элемент. Пример такого дополнения вы можете посмотреть на данном форуме (красная рамка). Основное местоположение (где находится) дополнения предположено на верх форума (в шапку). Если вы имеете опыт в редактировании шаблонов форума, то вам не составит труда видоизменить данное дополнение, также как и поменять его местоположение на вашем форуме. Пути к установке 1. Установка скрипта. Путь: Админ-центр > Скины и шаблоны > HTML шаблоны > Напротив нужной группы шаблонов нажимаем "Настройка HTML" > Справа в Быстром переходе выбираем "Редактирование шапки форума" (по умолчанию оно уже выбрано) и нажимаем "ОК" > В первом появившемся окошке ищем: Код //--> </script> И вставляем после этого кода скрипт: Код <script language='JavaScript' type="text/javascript"> <!-- var ns6=document.getElementById&&!document.all?1:0 var head="display:''" var folder='' function expandit(curobj) { folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style if (folder.display=="none") folder.display="" else folder.display="none" } //--> </script> Сохраняем изменения. 2. Установка визуального вида блока (CSS) Путь: Админ-центр > Скины и шаблоны > Стили > Напротив нужного стиля нажимаем "Редактировать" > В появившемся окошке вам необходимо внести изменения, поэтому в самый конец вставляем следующий код: Код #hide-block { background-color: #FFCCCC; border: 1px solid #FF6666; } Сохраняем изменения. 3. Установка непосредственно самого блока разворачивания/сворачивания. Путь: Админ-центр > Скины и шаблоны > HTML шаблоны > Напротив нужной группы шаблонов нажимаем "Настройка HTML" > Справа в Быстром переходе выбираем "Редактирование шапки форума" (по умолчанию оно уже выбрано) и нажимаем "ОК" > В первом появившемся окошке ищем: Код <% MEMBER BAR %> <br /> И вставляем после этого кода код: Код <table width="100%" id="hide-block" cellspacing="6"> <tr> <td width=100%> <div style="cursor:hand;cursor:pointer" onClick="expandit(this)"> Нажмите на данную область, чтобы раскрыть блок с информацией. </div> <div style="display:none";> Поздравляем, вы раскрыли блок с информацией, теперь можете написать здесь что угодно. </div> </td> </tr> </table> Установка окончена. Также принимаю вопросы и ваши предложения по улучшению дополнения. |
| Автор: Romych Июн 26 2011, 21:44 |
| одно только замечание по данному поводу Цитата <div style="cursor:hand" onClick="expandit(this)"> style="cursor:hand" не во всех браузерах работает, правильнее было бы style="cursor:hand;cursor:pointer" |
| Автор: oTweJIbHuk Окт 10 2013, 17:22 |
| Я правильно понимаю, это блоки которые отображаются вверху? Т.е можно сделать как меню? Ищу просто как сделать, найти не могу... Если я правильно понял, то подскажите, как правильно сделать выпадающее меню? |
| Автор: Dron Окт 10 2013, 17:59 |
| Цитата (oTweJIbHuk @ Сегодня, 18:22) Я правильно понимаю, это блоки которые отображаются вверху? Это просто обычный информационный блок. При желании он может содержать в себе и ссылки в виде некоего меню. |
| Автор: oTweJIbHuk Окт 10 2013, 18:53 |
Цитата (Dron @ Окт 10 2013, 18:59) Цитата (oTweJIbHuk @ Сегодня, 18:22) Я правильно понимаю, это блоки которые отображаются вверху? Это просто обычный информационный блок. При желании он может содержать в себе и ссылки в виде некоего меню. А не подскажите тогда касаемо моего вопроса?) Меню вверху, если точнее. Или подскажите где писалось об этом. |
| Автор: Грея Окт 12 2013, 16:53 |
| http://ipboard.net/index.php?showuser=4286, в гугле очень много писалось. Выпадающее меню средствами HTML прекрасно встает на эти форумы. |