1.7 Подключение форума
В работе используется форум PhpBB.
PhpBB - популярный скрипт форума (конференции). PhpBB создан в 2000 году и на сегодняшний день является самым используемым в мире форумом с открытым исходным кодом.
Процесс установки phpBB3 проходит по этапам, рассмотрим их:
Скопируйте файлы на сервер
Через браузер заходим на наш будущий форум, переходим на закладку "Инсталляция"
Дальше следуем указанием установщика, задаем необходимые параметры форума
Задаем необходимые данные об администраторе
Дальше необходимо удалить или переименовать директорию install/ на сервере.
Жмем на кнопку «Войти» и мы оказываемся на форуме(рис. 8)
Рисунок 8 – форум
Форум будет запускаться из навигационного меню, при нажатии соответствующей кнопки.
1.8 Написание функций для веб-страницы
Теперь, когда документ отформатирован и созданы таблицы стилей необходимо добавить сайту элементы интерактивности, т.е. незамедлительно отвечать на действия пользователя.
Начнем с навигационного меню. Сделаем так, чтобы при прокрутки страницы, меню становилось прозрачным, и непрозрачным, при наведении на него указателя мыши.
Вначале сделаем так, что при загрузке страницы меню непрозрачное, а прокрутке оно становилось прозрачным. В заголовке наших файлов пишем скрипт:
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
Далее необходимо использовать событие наведения указателя мыши на объект hover. Благодаря ему, мы сможем добиться желаемого эффекта:
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
В этом коде также используется анонимная функция. Если страница не прокручивается, то при наведении указателя мыши на меню, оно появиться. Если убрать указатель мыши, то меню обратно станет прозрачным.
Такой же эффект необходимо добавить и для информационных окон. Окна изначально будут полупрозрачными, при наведении указателя мыши на окно, оно станет не прозрачным. Для этого используем все тоже событие hover:
$('.a_first1').hover(
function() {
$('.a_first1').css('opacity','1');
},
function() {
$('.a_first1').css('opacity','0.5');
}
);
Так для каждого окна. Дальше нам необходимо добавить визуальный эффект появления, скрытия ответов на вопросы на странице с FAQ. Делается это при помощи события клика мыши toggle, которое меняет местами два состояния объекта:
$('.answer').hide();
$('#mainFAQ h2').toggle(
function() {
$(this).next('.answer').fadeIn();
$(this).addClass('close');
},
function() {
$(this).next('.answer').fadeOut();
$(this).removeClass('close');
}
);
Код вначале скрывает все ответы. Дальше при щелчке мыши по вопросу мы элементу answer следующем за данным вопросом присваиваем класс close, заранее заданный в таблице стилей и делаем ответ видимым. При повторном нажатии на этот вопрос, функция скроет ответ и удалит установленный класс.
Последний код, который необходимо добавить это код функции отображающей дату. В месте, где необходимо отображать дату вставляет код:
<script type="text/javascript">
var today = new Date();
var message = dateString(today, '%W: %d.%N.%Y');
document.write(message);
</script>
Код создает переменную, куда помещает информацию о дате, дальше эта информация передается в функцию dateString, возвращаемые результаты записываться на страницу.