ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Создание страницы Часто задаваемые вопросы(ЧАВо)

ЧАВо

Раздел "Часто задаваемые вопросы (ЧАВо)" встречается на многих сайтах. Это помогает улучшить качество обслуживания с помощью ответов на вопросы волнующие большинство посетителей. Для того, чтобы страница с вопросами и ответами не была слишком длинной, необходимо создать управляемую JavaScript страницу, где все вопросы будут видны при загрузке, а ответы будут открываться по щелчку на вопрос.

Для решения поставленной задачи JavaScript код должен обеспечить следующее:

  1. При щелчке по вопросу должен появиться соответствующий ответ.
  2. При следующем щелчке по вопросу ответ должен исчезнуть.

Прежде всего, для выполнения поставленной задачи, создадим HTML-код, где вопросы будут обрамлены тегом <h3>, а ответы тегом <div>, которому присвоим класс answer. Данная строка кода выбирает каждый такой элемент div и скрывает его с помощью функции hide.

<h3>Вопрос</h3>
<div>Ответ</div>
<h3>Вопрос</h3>
<div>Ответ</div>
<h3>Вопрос</h3>
<div>Ответ</div>

Следующим шагом является определение элементов, которым необходимо добавить обработчики событий.


$(document).ready(function() {
$(".answer").hide();
$(".main h3")
});

В качестве такого элемента у нас назначен h3 с классом main. Теперь пришло время добавить обработчик событий. Наилучши вариантом в этом случае является функция click(), при которой по щелчку вопроса либо отражается либо скрывается ответ.


$(document).ready(function() {
$(".answer").hide();
$(".main").click(function(e) {

});
});

В пустой строке внутри функции введем следующий код:

var $answer = $(this).next(".answer");

Здесь мы создали переменную $answer, которая будет содержать объект jQuery. Объект $(this) относится к элементу, в данный момент реагирующий на событие. В нашем примере это элемент h3. Функция .next() находит элемент, который следует непосредственно за текущим элементом. Другими словами, она находит элемент, следующий за элементом h3. Мы можем уточнить поиск, передав дополнительный селектор функции .next(). Код .next(".answer") находит первый элемент после элемента h3.

И так, что мы имеем. Вместо того, чтобы снова и снова повторять одни и те же шаги, мы просто сохраняем результат их выполнения в переменной, а затем будем использовать эту переменную для указания на элемент div, который необходимо скрыть или отобразить.

Переменная начинается с символа $ ($answer), это указывает на то, что мы сохраняем объект jQuery в результате выполнения функции $().

Перед именем переменной не обязательно ставить символ $, это просто правило, распространенное среди программистов jQuery.

Добавим в свой код пустое условиеif/else.


$(document).ready(function() {
$(".answer").hide();
$(".main").click(function(e) {
if(() {

}else {

}
});
});

Теперь введем в if()следующий код:

if($answer.is(':hidden'))

Здесь мы используем метод is()? чтобы проверить, не является ли конкретный элемент скрытым. Этот метод позволяет проверить, соответствует ли текущий элемент конкретному селлектору. Если да, функция возвращает значение true, если нет - false

Используемый в коде селектор :hidden является особым селлектором, который определяет скрытые элементы. В данном случает проверяет, не скрыт ли ответ. Если нет, отобразить его.

Добавим строку $answer.slideDown() в свою программу.


$(document).ready(function() {
$(".answer").hide();
$(".main").click(function(e) {
if($answer.is(":hidden")){
$answer.slideDown();

}else {

}
});
});

При использовании функции slideDown() скрытые элементы отображаются на странице. Если посмотреть страницу в веб-браузере, то можно увидеть символ "+" слева от каждого вопроса. Это обычный символ обозначающий закрытие и открытие текста, когда "+" меняется на минус "-".

После строки кода, добавленной в предыдущем шаге, введем следующее:

$(this).addClass("close");

Объект $(this) относится к элементу, реагирующему на событие. В данном случае это элемент h3. Таким образом, эта новая строка добавляет класс close, когда ответ отображен. Значок "-" определяется в рамках таблицы стилей как фоновое изображение.

В части else управляющей инструкции добавим еще две строчки кода:

$answer.fadeOut();
$(this).removeClass('close');

Код теперь будет выглядеть следующим образом:


$(document).ready(function() {
$(".answer").hide();
$(".main").click(function(e) {
var $answer = $(this).next(".answer");
if($answer.is(":hidden")){
$answer.slideDown();
$(this).addClass("close");
}else{
$answer.fadeOut();
$(this).removeClass("close");

}
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Создание страницы Часто задаваемые вопросы(ЧАВо)</title>
<style>
h3.main{background:url(images/collapsed.png) no-repeat center left; padding:0 15px; color:#3A3838; font-size:16px}
h3.close{color:#091DF4; background:url(images/expanded.png) no-repeat center left ; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".answer").hide();
$(".main").click(function(e) {
var $answer = $(this).next(".answer");
if($answer.is(':hidden')){
$answer.slideDown();
$(this).addClass("close");
}else{
$answer.fadeOut();
$(this).removeClass('close');

}
});
});
</script>
</head>

<body>
<h2>Вопросы по PHP</h2>
<h3 class="main">Как правильно использовать MySQL с PHP?</h3>
<div class="answer">Для начала создайте два файла: db.php и dbclose.php --db.php $hostname = "имя хоста базы данных"; <br>
$user = "ваш_логин"; $password = "ваш_пароль"; $db = "ваш_логин";<br>
mysql_connect($hostname, $user, $password); mysql_select_db ($db); -- --dbclose.php mysql_close(); -- db.php нужно вставлять в PHP скрипты в начале include "db.php"; , а dbclose.php также вставлять в конце скриптов. <br>
Теперь как лучше направлять запросы: вот так не верно $rc = mysql($db , "select 1"); хотя работать тоже будет, но Вы каждый раз будете делать выборку базы данных. Делайте просто $rc = mysql_query ("select 1"); А результат можно извлечь простым путем, например echo mysql_result($result,0);</div>
<h3 class="main">Права доступа к php-скриптам.</h3>
<div class="answer">Атрибуты к php, так же как и к html, должны быть 640 (-rw-r-----). Запись-чтение для владельца и только чтение для группы. Минимально для работы - у группы должны быть права на чтения.</div>
<h3 class="main">Как изменить конфигурацию PHP?</h3>
<div class="answer"><p>Мы предоставляем пользователям возможность изменять некоторые параметры конфигурации PHP,
для этого необходимо добавить соответствующие директивы php_value в файл конфигурации
веб-сервера .htaccess, например:</p>
php_value default_mimetype "text/html" - изменяем тип выдаваемого документа <br>
php_value default_charset "windows-1251" - изменяем кодировку по умолчанию.<br>
php_value register_globals 0 - отключить Register Globals<br>
php_value allow_call_time_pass_reference 1 - включить параметр<br>
php_value mbstring.internal_encoding utf-8 - настройка библиотеки mbstring<br>
php_value upload_max_filesize 10M - максимальный размер загружаемого файла 10Мб<br>
php_value max_input_vars 10000 - Сколько входных переменных может быть принято в одном запросе.<br>
php_value pcre.recursion_limit 10000 - Лимит на рекурсию.<br>
php_value opcache.revalidate_freq 0 - Постоянная проверка даты изменения файла.<br>
php_flag display_errors off - Откючение вывода ошибок.</div>

</body>
</html>