1

メニューボタンをクリックすると、コンテンツがスライド（およびイージング）する効果を実現しようとしています。これは、さまざまなコンテンツ (ギャラリー、ポートフォリオ、ビデオなど) とスライドインするいくつかのページのサブメニューを備えた通常のサイト用です。

プリロードされた非表示の div をスライドするすべてのスライド プラグイン (coda スライダーなど) について学びました。しかし、最初のページにウェブサイト全体をロードすると、それは間違っているように聞こえるのではないかと心配しています。一方、iframes でそれを行い、load() でデータをロードすると、データをスライドして緩和できるかどうかわかりません (coda スライダーの例 8 のように)。

誰かが以前にこれをやったことがありますか、または同じ考えを持っていて、共有してもかまいませんか? 大歓迎です！

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

4

2 に答える 2

0

私は Coda Slider を書きましたが、最近はCoda Slider のレスポンシブ バージョンであるLiquid Sliderも書きました。

また、Ajax を使用して、パネルがクリックされた後に Twitter フィードをロードする方法についての短いチュートリアルも書きました。これが役立つことを願っています...

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

于 2013-01-05T02:24:24.333 に答える
0

私は現在、API の同様の機能に取り組んでいます。ajaxコンテンツを「ビュー」divにプルするリンクの行を含むメニューdivをロードしてから、メニューをアニメーション化してから、ビューをメイン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 は、ロードされたコンテンツを表示するために使用され、-600px の位置が与えられるため、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() {

        });
    });
}

現時点ではすべて非常に大まかにまとめられていますが、これがどこから始めるべきか、そしてそれが可能であることを示してくれることを願っています. ありがとう。

于 2011-12-05T07:46:16.890 に答える