загрузка jquery и анимация iframe с контентом - PullRequest
Новая
       32

загрузка jquery и анимация iframe с контентом

1 голос
/ 15 февраля 2010

Я пытаюсь добиться эффекта скольжения (и смягчения) содержимого в кнопке меню при ее нажатии. Это было бы для обычного сайта с другим содержанием (галерея, портфолио, видео и т. Д.) И подменю на некоторых страницах, которые могли бы скользить.

Я узнал обо всех скользящих плагинах (например, слайдер коды), которые скользят по предварительно загруженным и скрытым элементам div. но у меня есть опасения, что если я загружу весь сайт на первой странице, это будет звучать неправильно. с другой стороны, делая это с помощью iframes и загружая данные с помощью load (), я не уверен, что могу скользить и упростить данные (например, слайдер coda, пример 8).

Кто-нибудь делал это раньше или имел ту же идею и не против поделиться? будет принята с благодарностью!

http://www.ndoherty.biz/demos/coda-slider/2.0/#2

Ответы [ 2 ]

0 голосов
/ 05 января 2013

Я написал Coda Slider, а недавно также написал Liquid Slider , который является адаптивной версией Coda Slider.

Я также написал краткое руководство о том, как можно загружать каналы Twitter после нажатия на панель с помощью Ajax. Надеюсь, это поможет ...

http://liquidslider.kevinbatdorf.com/tutorials/dynamically-add-content-to-a-panel-when-clicked-using-ajax/

0 голосов
/ 05 декабря 2011

В настоящее время я работаю над аналогичной функцией для нашего API. Когда я загружаю div меню со строками ссылок, которые вытягивают содержимое ajax в div «view», я затем анимирую меню и затем анимирую представление в основной iFrame. Это было так легко сделать, посмотрите некоторые из моих javascript и html ниже. Когда я нажму на это, я вернусь и обновлю ответ, который вы можете найти в готовом продукте. Надеюсь, это поможет. 

<!-- list all the available matches first -->
    <div id="MatchContainer">
        <div id="spinner"></div>
        <div id="matchesListHolder">
            <% if @matches %>
                <% @matches.each do |match| %>
                    <%= render :partial => 'plugins/live/clubs/matches_list_item', :locals => {:match => match} %>
                <% end %>
            <% else %>
                There are currently no matches to display
            <% end %>
        </div>
        <div id="matchHolder">

        </div>
        <div id="closeMatchView">x</div>
    </div>

MatchHolder используется для отображения загруженного содержимого и имеет позицию -600 пикселей, поэтому он скрыт за пределами верхней части iFrame. Затем я звоню, чтобы получить карту результатов матча 

$(function() {

    // click event fired to change to the match view window
    $('.matchLink').click(function(event) {
        if (!clicked) {
            clicked = true; // stop click reptition
            event.preventDefault();
            var live = ($(this).attr('live') == 'true') ? true : false;
            var matchId = Number($(this).attr('id'));
            $('#matchesListHolder').animate({top: -600}, 500, function() {
                $(this).hide();
                $('#spinner').show();
                if (live) { 
                    displayLiveMatch(matchId);
                } else {
                    displayMatch(matchId);
                }
            });
        }
    });

    // click function on the close button when the match view window is open
    $('#closeMatchView').click(function() {
        closeMatchView();
    });

});

// display a scorecard for a finished match
function displayMatch(id) {
    $.get('/plugins/matches/scorecard/' + id, function(response) {
        $('#matchHolder').empty().html(response);
        moveDownMatchHolder();
    });
}

// move down the match holder container into the iframe
function moveDownMatchHolder() {
    $('#spinner').hide();
    $('#matchHolder').show().animate({top: 0}, 500, function() {
        $('#closeMatchView').show();
    });
}

// close the match view and re open the matches list
function closeMatchView() {
    $('#closeMatchView').hide();
    clicked = false;
    $('#matchHolder').animate({top: -600}, 500, function() {
        $(this).hide();
        $('#matchesListHolder').show().animate({top: 0}, 500, function() {

        });
    });
}

В данный момент все очень свободно, но я надеюсь, что это даст вам представление о том, с чего начать и что это можно сделать. Спасибо.

...