Нестандартная работа с сайтом joomla! 2.5 (и не только)

Сегодня я поделюсь с Вами небольшими хитростями в работе с сайтами на joomla! и не только.

Наверное большинство школьных информатиков ведут еще и школьные сайты. Сайты могут быть написаны по-разному - от простых html-страниц, до сайтов, созданных на всевозможных движках. Так сложилось, что в своей практике я несколько лет работал (и продолжаю на новой работе) с сайтом, сделанным на движке joomla!. Это достаточно продвинутый бесплатный движок, имеет очень много всевозможных дополнительных компонентов, плагинов, модулей. В интернетах информации про этот движок хватает с лихвой.

Не так давно (во время очередной проверки сайта) возник вопрос - неудобная, загромажденная различной инфой страница. И вроде как все нужно, вроде как никуда не деть, а что-то переделать надо. Вспомнил я про так называемые табы (вкладки) - когда страницу можно разместить на несколько частей, и переключаться между ними не уходя по ссылкам. Поискав в интеренете, я нашел альтернативу - спойлеры. Это когда имеется кнопка, при нажатии на которую раскрывается текст. Это меня заинтересовало и было принято решение использовать их.

Дальше было 2 варианта развития событий:

1. Установка плагина (стороннее расширение для сайта, возможно с копирайтами или глюками)

2. Изменение кода самой страницы (долго, нудно, возможно потерпеть неудачу, но интересно)

Остановился я на 2 варианте, т.к. таких страниц со спойлерами подразумевалась аж одна (в дальнейшем добавил еще несколько в связи с тем, что понравилась реализация).

На каком-то сайте (к сожалению не помню), был найден код

<style> details { border: 1px solid #999; border-radius: 5px; margin: 0 2em.4em 2em; padding: 1.04%; }

details { margin: 1em; cursor: pointer; }

summary { border-radius: 5px; cursor: pointer; margin: -1%; padding: 8px 10px; background: -webkit-linear-gradient(top, #f3f3f3 50%, #e6e6e6 50%); } </style>

<details> <summary>Общая информация</summary>

</details>

Где все что указано между тегами <style> </style> - css код (нужно добавить в самый верх статьи), между тегами <details> </details> - все что прячется под спойлер, между тегами <summary> </summary> - название спойлера.

Ну а, дальше как говорится, уже дело техники. Осталось добавить этот код в материал (статью). По умолчанию в Joomla! в качестве текстового редактора используется TinyMCE. К сожалению помимо того, что он не дает вставить подобный код в страницу, он может еще и "почистить". Поэтому в настройках профиля нужно в качестве редактора выбрать "без редактора", в таком случае Вы сможете добавлять материалы в виде html кода. Конечно это неудобно, но всегда можно включить визуальный редактор обратно.

Результат работы можно увидеть к примеру тут http://schoolritkuchi.ru/2015-04-11-01-05-58/olimpiada

PS - при работе возможно неправильное отображение в старых версиях ИЕ и Firefox.