Взяв за основу базовую функцию jQuery, рассмотренную в предыдущей статье, мы напишем основную функцию, которой можно будет передавать не только обернутый набор jQuery, но и дополнительный параметр (селектор), что позволит нам легко получить дочерний div блок (или любую другую выборку).
...
//устанавливаем новую функцию плагина: authorHover
jQuery.fn.authorHover = function(applyTo) {
return this.each(function(){
//в цикле if/else проверяем, был ли передан параметр
//если никакого параметра не передано, находим дочерний div
if(applyTo){
obj = applyTo
}else{
obj = "div";
}
//скрываем дочерний div или переданный селектор
jQuery(this).find(obj).hide();
//Для основного обернутого набора устанавливаем hover
jQuery(this).css("cursor", "pointer").hover(function(){
//изменяем стили дочернего div или переданного селектора
//и применяем к нему эффект постепенного появления
jQuery(this).find(obj).css("position","absolute")
.css("margin-top","-10px").css("margin-left","-10px")
.css("width","400px")
.css("border", "1px solid #666").fadeIn("slow");
}, function(){
//постепенное исчезновение дочернего селектора
jQuery(this).find(obj).fadeOut("slow");
});
});
};
Теперь, когда мы создали скрипт jQuery плагина, давайте проверим его работу в нашей теме. Все, что нам потребуется сделать, это подключить новый плагин, названный jquery.authover.js, к теме. Следующий сниппет необходимо разместить ниже хука wp_head:
...
<script type="text/javascript">
jQuery(function(){
jQuery(".authorName").authorHover();
});
</script>
...
Два следующих скриншота демонстрируют постепенное появление блока div:
