Hover всплывающих плагинов желательно для Wordpress - PullRequest
Новая
       4

Hover всплывающих плагинов желательно для Wordpress

0 голосов
/ 01 апреля 2011

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

В тексте я хотел бы отметить отдельные слова как просто «ссылки для предварительного просмотра», к следующему: - фрагменты кода (предварительно или аналогичные) - изображений - div или фрейм с HTML и PHP - возможно аудио- и видеоклипы в виде небольших встроенных проигрывателей.

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

Я могу сделать это в php, но я бы хотел сэкономить немного времени на коде, а также легко вставлять вышеуказанные типы элементов.

Так что вы можете порекомендовать что-нибудь (плагин), например, для Wordpress или Movable Type? Я также принимаю ссылки на веб-сайты, на которых есть хорошие примеры техники «div visibility: скрытый» стиль «раскладывание и раскладывание».

Удобство вставки таких предметов является ключевым. Желательно просто Ctrl + V и отметить его тип.

1 Ответ

1 голос
/ 01 апреля 2011

Я бы порекомендовал создать короткий код для использования в пост-авторстве (т. Е. [toggle heading="Preview Link"]Hidden Content[/toggle]). Этот контент будет заключен в промежуток с классом, который вы определите, когда он появится на вашем сайте. Затем просто включите небольшой jQuery, чтобы забратьэтот класс и показать скрытый контент на click или mouseover или что-то еще.

Пример функции шорткода для functions.php

function toggle_content( $atts, $content = null ) {
    extract(shortcode_atts(array(
        'heading'      => '',
    ), $atts));

    $out .= '<span class="toggle"><a href="#">' .$heading. '</a></span>';
    $out .= '<div class="toggle_content" style="display: none;">';
    $out .= '<div class="toggleinside">';
    $out .= do_shortcode($content);
    $out .= '</div>';
    $out .= '</div>';

   return $out;
}
add_shortcode('toggle', 'toggle_content');
?>

jQuery может выглядеть следующим образом (например, для click): 

function sys_toggle() {
    jQuery(".toggle_content").hide(); 

    jQuery(".toggle").toggle(function(){
        jQuery(this).addClass("active");
        }, function () {
        jQuery(this).removeClass("active");
    });

    jQuery(".toggle").click(function(){
        jQuery(this).next(".toggle_content").slideToggle();
    });
}

jQuery(function(){
    sys_toggle();
});
...