Простой пример показвающий как внедрить визуальный JQuery-эффект в плагин формы обратной связи.
Задача простая: по клику на заголовок формы она должа скрыться (при повторном соотвественно открыться).
Примерно также работают виджеты и инфо-блоки в Яндекс.Почте, например.
Апгрейдить будем плагин «Simple contact form»
Откроем основной файл плагина simple-contact-form.php, найдем блок формирования самой формы для связи и внесем следующие изменения:
/* Загружаем библиотку JQuery */
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
/* Открываем блок функций JQuery */
<script language="javascript" type="text/javascript">
function gcf_show() {
<?php if (1==1) echo 'jQuery("#gcf-block").fadeIn();';
else echo 'jQuery("#gcf-block").show();'; ?>
}
function gcf_hide() {
<?php if (1==1) echo 'jQuery("#gcf-block").fadeOut();';
else echo 'jQuery("#gcf-block").hide();'; ?>
}
function gcf_toggle() {
if (jQuery("#gcf-block").css("display") == "none") {
gcf_show();
}
else {
gcf_hide();
}
}
/* При клике на ссылку с id = gcf-toggle запускаем функцию-переключатель */
jQuery(function() {
jQuery("#gcf-toggle").click(function(){
gcf_toggle();
return false;
});
});
</script>
<form action="#" name="gcf" id="gcf">
<!-- Добавляем заголовок блока формы контакта -->
<h2><a id='gcf-toggle'>Title</a></h2>
<!-- Добавляем тег-контейнер блока формы контакта -->
<div id="gcf-block">
<div style='padding-top:4px;'> <span id="gcf_alertmessage"></span> </div>
<div style='padding-top:4px;' class="gcf_title"> Your name </div>
<div><input name="gcf_name" class="gcftextbox" type="text" id="gcf_name" maxlength="120"></div>
...
</div>
</form> |
Примечание:
В JQuery-функциях остался условный оператор if и PHP-теги от предыдущего использования как напоминание о возможности задания условия для вызова в зависимости, например, от настроек плагина. То есть, например, можно вызывает или JQuery-функции или функции обычного JavaScript.
