JQuery с Wordpress Loop. Показать / Скрыть содержимое? - PullRequest
Новая
       0

JQuery с Wordpress Loop. Показать / Скрыть содержимое?

0 голосов
/ 17 августа 2011

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

Рабочий пример можно посмотреть здесь: http://mathewhood.com/sitefiles/

Что я хочу сделать, так это каким-то образом добавить функциональность в мой цикл, что позволит мне сделать это так, чтобы при нажатии на один из этих элементов списка он отображал the_content (); за каждый элемент.

Я нашел это - http://gsgd.co.uk/sandbox/jquery/easing/ Что, я думаю, может обеспечить нужную мне функциональность (в идеале - вхождение и выход), но я изо всех сил пытаюсь реализовать это! Если кто-нибудь знает, как я могу это сделать, пожалуйста, ответьте на это и получите заслуженные положительные голоса!

http://jsfiddle.net/XzJgU/ - Вот мой текущий цикл, любая помощь будет принята с благодарностью !!!!!!!!!

Ответы [ 5 ]

2 голосов
/ 17 августа 2011

Вот мое решение вашей проблемы. Я привожу пример реализации JQuery Easing.

EDIT пересмотрел мой пост, пожалуйста Просмотреть пересмотренный образец здесь Надеюсь, это поможет. 

$('.thumbs').click(function(e){
    e.preventDefault();
    var contents = $(this).closest('.recentPost').find('.caption').html();
    var $container = $('#theContainer').html(contents);
    $container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:100}, {duration: 1000, easing: 'easeInOutCirc'});
    $container.click(function(){
        $container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
        $container.fadeOut('slow');
        $container.html('');
    });
});
1 голос
/ 17 августа 2011

Попробуйте это: 

<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
width: 203px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background: #c1e0fb;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
}
div.panel
{
height: 288px;
display: none;
border-top: 1px dashed #aaa;
}
p.flip
{
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
}
</style>
</head>

<body>

<div class="panel">
<b>sclughslru</b>
<br><br>
ertljhvij3p
<br><br>
<b>veuywihtp</b>
<br><br>
ghdjhrntnd
<br><br>
<b>ehv3rtv</b>
<br><br>
vt4k4kb76kb5
<br><br>
<b>edb3jrr3n54</b>
<br><br>
skcehgkheone
</div>

<p class="flip"><img src="https://dl-web.dropbox.com/get/Pictures/Other/up-down.jpg?w=f17ee285" style="width: 12px; height: 10px; margin-right: 10px;" />Information</p>

</body>
1 голос
/ 17 августа 2011

Есть несколько способов добиться этого. Вероятно, наиболее эффективным будет полное решение AJAX, но для этого потребуется плагин Wordpress и некоторые сложные сценарии.

Наиболее простым решением было бы добавить поле для динамического содержимого, вывести содержимое для каждого сообщения в скрытом DIV под его постоянной ссылкой / изображением, а затем использовать javascript для перемещения содержимого из скрытых DIV в поле динамического содержимого, когда постоянная ссылка нажата. Я работал над кодом на http://jsfiddle.net/HF9Pr/.

1 голос
/ 17 августа 2011

Я не совсем понимаю, как вы хотите, чтобы это работало - ищете ли вы решение PHP, JavaScript или одно из двух. У меня есть два предложения о том, как вы можете заставить это работать. Также обратите внимание, что библиотека jQuery, на которую вы ссылаетесь, добавляет в jQuery только параметры замедления, т. Е. Она работает только с анимацией, а не с бизнес-логикой и поведением вашего кода.

  1. Использование ajax
    Это должно работать в этом случае, так как вы не делаете междоменных запросов. По сути, вы перехватываете щелчок по ссылке, выясняете, куда она указывает, а затем делаете запрос GET на эту страницу. Затем вы отфильтруете соответствующий HTML-код из ответа и поместите его на свою страницу. Примерно так: 

    $('.recentPost a').click(function(){
    $.get($(this).attr('href'), function(data){
        //make a get request to the page the link linked to
        //and extract the blog content div
        $("placeholder").html($(data).filter(".blogRight"));
    });
    return false; //cancel the browser's default action on click to keep user on page
});

    где у вас есть <div id="placeholder" /> на вашей HTML-странице, где вы хотите, чтобы контент отображался.

  2. Использование PHP + JavaScript
    Вместо того, чтобы извлекать контент по запросу, вы генерируете его при загрузке страницы, но держите его скрытым. Вы снова перехватываете клики, но на этот раз вы найдете и отобразите соответствующий, существующий div на странице.

    Итак, ваша сгенерированная страница будет выглядеть примерно так: 

    <div id="contentWrap">
        <div class="hidden-featured-content" id="content-f12">
            <div>Your content here</div>
        </div>
        <div class="hidden-featured-content" id="content-f11">
            <div>Your content here</div>
        </div>

        <div id="newBanner"></div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=35" id="link-f12"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
                <div class="captionTitle">Hello World 12!</div>
                <p></p>
            </div></a>
        </div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=32" id="link-f11"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
                <div class="captionTitle">Hello World 11!</div>
                <p></p>
            </div></a>
        </div>
     ...

    Затем вы можете использовать что-то вроде переключения соответствующего содержимого 

    $('.recentPost a').click(function(){
    if($(this).attr('id')){
        var x = /link-(.*)/.exec($(this).attr('id')); //figure out which content- div to display
        $('.displayed').hide().removeClass('displayed'); //hide already displayed content
        $('#content-' + x[1]).show().addClass('displayed'); //show content and mark it as displayed
        return false;
    }
});
1 голос
/ 17 августа 2011

Что-то подобное должно работать - http://jsfiddle.net/XzJgU/5/. Рендеринг контента для каждого сообщения в цикле, скрытого по умолчанию с использованием CSS.При нажатии на сообщение оно перемещает его содержимое в # display-post, делая его видимым.При щелчке другой записи она перемещается обратно в исходный контейнер, и содержимое новой записи перемещается туда.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...