Внедрение JQuery в плагины WordPress

WordPress | 21.03.2010 | Метки:
jQuery

Простой пример показвающий как внедрить визуальный 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.


Добавление комментария:

Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">