Ссылки
Поиск
Новости, Статьи |
Форум |
Файлы |
Привет, Гость
Обновления на форуме
Гадания на таро 0 >> |
Блок новостей в виде блога 1 >> |
Игры для сайта 34 >> |
Сервис создания тестов 94 >> |
Дед 1 >> |
Последние статьи
Антиспам «Я не робот» 0 |
За что воюет Украина и когда всё это кончится 12 |
Улучшен сайт «Лайт мебель» 0 |
Портфолио — сайт о художественной ковке 0 |
Изменение цен 0 |
Чтобы вебмастер сделал именно то, что нужно, подробно составьте техническое задание к договору.
Разделы → Клиентам → Использование системы управлен... → Скрытие текста в статье.
Скрытие текста в статье. Статья рассчитана на читателя, имеющего представления о HTML и JavaScript. Для чего это может понадобиться? Ну, например, для создания инструкций и описаний, например, щёлкните по ссылке "Инструкция": Теперь как это работает. За скрытие/показ отвечает функция showhide. Вот её код: Функция showhide: Код
<script type="text/javascript" language="JavaScript">
Соответственно, этот код нужно поместить где-то на странице, чтобы функция работала.
function showhide(obj){ if(obj == 'none') return 'inline'; else return 'none'; } </script> Теперь создадим Оглавление книги со ссылками на Главы Функциональные элементы - оглавление и содержание - выделены разным цветом - для наглядности ;) Функция showhide: Применение
<h2>БРАТЬЯ СТРУГАЦКИЕ</h2>
<h3>БЕСПОКОЙСТВО</h3> <div> <a href="#com_post" onclick="document.getElementById('glava1').style.display = showhide(document.getElementById('glava1').style.display)" title="Нажмите, чтобы открыть или скрыть элемент">Глава 1 </a> </div> <br/> <div id="glava1" style="display: none; width: 100%;"> <p> С этой высоты лес был как пышная пятнистая пена, как огромная, на весь мир, рыхлая губка, как животное, которое затаилось когда-то в ожидании, а потом заснуло и поросло грубым мхом. Как бесформенная маска, скрывающая лицо, которое никто еще никогда не видел. </p> <p> Леонид Андреевич сбросил шлепанцы и сел, свесив босые ноги в пропасть. Ему показалось, что пятки сразу стали влажными, словно он и в самом деле погрузил их в теплый лиловатый туман, скопившийся в тени под утесом. Он достал из кармана камешки и аккуратно разложил их возле себя, а потом выбрал самый маленький и тихонько бросил его вниз, в живое и молчаливое, в спящее, в равнодушное и глотающее навсегда, и белая искра погасла, и ничего не произошло – никакие глаза не приоткрылись, чтобы взглянуть на него. Тогда он бросил второй камешек. </p> <p> – Так это вы гремели сегодня у меня под окнами, – сказал Турнен. </p> . . . </div> <br/> <div> <a href="#com_post" onclick="document.getElementById('glava2').style.display = showhide(document.getElementById('glava2').style.display)" title="Нажмите, чтобы открыть или скрыть элемент">Глава 2</a> </div> <br/> <div id="glava2" style="display: none; width: 100%;"> <p> Атос проснулся и сразу подумал: «Послезавтра мы уходим». И сейчас же в другом углу Нава зашевелилась на своей постели и спросила: </p> <p> – Когда ты уходишь? </p> <p> – Не знаю, – ответил он. – Скоро. </p> <p> Он открыл глаза и уставился в низкий, покрытый известковыми натеками потолок. По потолку опять шли муравьи. Они двигались двумя ровными колоннами. Слева направо двигались нагруженные, справа налево шли порожняком. Месяц назад было наоборот. И через месяц будет наоборот, если им не укажут делать что-нибудь другое. Месяц назад я тоже проснулся и подумал, что послезавтра мы уходим, и никуда мы не ушли, и еще когда-то, задолго до этого, я проснулся и тоже подумал, что послезавтра мы уходим, и мы, конечно, не ушли, но если мы не уйдем послезавтра, я уйду один. Впрочем, и так я уже думал раньше, но теперь-то уж я обязательно уйду. </p> <p> – А когда – скоро? – спросила Нава. </p> <p> – Очень скоро, – ответил он. </p> . . . </div> <br/> <div> <a href="#com_post" onclick="document.getElementById('glava3').style.display = showhide(document.getElementById('glava3').style.display)" title="Нажмите, чтобы открыть или скрыть элемент">Глава 3</a> </div> <br/> <div id="glava3" style="display: none; width: 100%;"> <p> Голос дежурного произнес: </p> <p> – Экстренный сеанс Д-связи. Земля вызывает Горбовского Леонида Андреевича. Говорите, Леонид Андреевич... </p> <p> Поль поднялся, чтобы выйти, но Горбовский сказал: </p> <p> – Куда вы, Поль? Останьтесь! Какие у меня с Землей могут быть секреты? Да еще по Д-связи... Горбовский слушает, – сказал он в микрофон. – Это кто?.. Кто?! А если по буквам? Нет, на экране ничего не разберу... Ботва какая-то на экране... Бот-ва!.. Да... А-а, Павел?! Так бы и говорил. Ну как ты живешь?! </p> <p> Связь была на редкость плохая. Изображение на экране напоминало полуразрушенную древнюю фреску, а Горбовский все время морщился и переспрашивал, вдавливая пальцем в ухо горошину репродуктора. Поль присел в кресло для посетителей и стал разбирать сводки. </p> . . . </div> Как видно из кода, элементы <div> вызываются по id, например id="glava1" Создаётся 2 прямоугольных элемента <div>, один служит ссылкой, другой открываетя и закрывается с помощью javascript После всех манипуляций ОБЯЗАТЕЛЬНО сохраните статью в режиме html Должно получиться вот что: Согласитесь, это выглядит гораздо удобней и аккуратней. Для онлайн-книг и инструкций - самое то. При наведении мышки на элемент выводится всплывающая подсказка. К тому же Главы открывать можно хоть все сразу, хоть по одной - кому как удобно. Удачного кодирования! |
||
03.06.2010 09:41 | Автор/источник: Den1xxx |
Комментировать
Вы не залогинены! Регистрация
Комментарии
admin |
10:41:49 17 Май 2011 | |
В новой версии теперь правильно работает тег \"Спойлер\". Статья уже не актуальна, скоро перенесу в архив. |
admin |
09:17:07 08 Март 2011 | |
Цитата: Как с работоспособностью под разными браузерами? Кроссбраузерно, конечно. |
localghost |
01:22:00 15 Январь 2011 | |
Отлично. Закину в закладки. Скоро пригодится Как с работоспособностью под разными браузерами? |
admin |
18:49:48 30 Июнь 2010 | |
Справедливости ради надо дополнительно отметить, что если скрыть текст в статье вышеуказанным способом Вам трудновато из-за недостатка знаний, в ReloadCMS имеется более простой, хотя и не идеальный способ. В редакторе ReloadCMS существует недокументированный тег spoiler, который занимается примерно тем же, хоть и не столь красиво - закрыть назад открытую статью будет нельзя. Примерно это будет выглядеть так: + Глава 1 Прочитать про недокументированные возможности ReloadCMS можно в этом же разделе статей, в одноимённой статье. |
Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.