0

このサイトのようにスライド パネルを使用して UI を作成しています: http://smithandhawken.catalogs.target.com/#/intro-cover

ただし、ページを変更するには、列ごとと行ごとの 2 つの方法があります。ユーザーは、キーボードといくつかの視覚要素を使用してページをナビゲートできます。移動は、次のような関数によって処理されます。

function moveDown()
{
unbindAll();
currentPage = 1;

$('div.section').each(function(index, element) {
    if(index+1 == currentSec) {
        console.log($(this));
        $(this).css({ 'margin-top': 0, 'z-index': (storyCount-1)*100 });
        if($(this).next().size()) {
            populate(currentSec+1, currentPage);
            $(this).next().children('div.page').css('left', $(window).width());
            $(this).next().children('div.page').eq(0).css('left', 0);
            console.log(storyCount);
            $(this).next().css({ 'margin-top': $(window).height(), 'z-index': storyCount*100 }).stop().animate({marginTop:0}, 500, function() { 
                currentSec++;
                bindAll();
            });
        }
        else {
            populate(1, currentPage);
            $(this).parent().children().first().children('div.page').css('left', $(window).width());
            $(this).parent().children().first().children('div.page').eq(0).css('left', 0);
            $(this).parent().children().first().css({ 'margin-top': $(window).height(), 'z-index': storyCount*100 }).stop().animate({marginTop:0}, 500, function() {
                currentSec = 1;
                bindAll();
            });
        }
    }
    else if(index != currentSec) {
        $('#section'+(index+1)).css({ 'margin-top': 0, 'z-index': 100 });
    }
    });
}

上記の行は、100% の確率で同じようには機能しません - $(this).css({ 'margin-top': 0, 'z-index': (storyCount-1)*100 });

ユーザーがキーボードと左右の視覚要素を使用すると、すべてが正常に機能します。各行間を変換する視覚要素を使用すると (up/down メソッドのみ)、関数は起動しますが、すべての CSS プロパティが適用されるわけではありません。私が話している視覚要素の機能は次のとおりです。

function mdlButton(btnHit)
{
btnLabel = btnHit.attr('id').substr(3);
console.log('enter first swtich '+currentSec);
switch(currentSec)
{
    case 1:
        console.log('enter second switch '+btnLabel);
        if (btnLabel == 1) {
            console.log('dont do anything');
        }
        else if (btnLabel == 2) {
            console.log('move down one');
            moveDown();
        }
        else if (btnLabel == 3) {
            console.log('move down two');
            moveDown();
            moveDown();
        }
        break;
    case 2:
        console.log('enter second switch');
        if (btnLabel == 1) {
            console.log('move up');
            moveUp();
        }
        else if (btnLabel == 2) {
            console.log('dont do anything');
        }
        else if (btnLabel == 3) {
            console.log('move down one');
            moveDown();
        }
        break;
    case 3:
        console.log('enter second switch');
        if (btnLabel == 1) {
            console.log('move up two');
            moveUp();
            moveUp();
        }
        else if (btnLabel == 2) {
            console.log('move up');
            moveUp();
        }
        else if (btnLabel == 3) {
            console.log('dont do anything');
        }
        break;
}

if(!btnHit.hasClass('mdlSelected')) {
    $('div.mdlSec').removeClass('mdlSelected');
    $('div.mdlSec').find('#selected').remove();
    btnHit.addClass('mdlSelected');
    btnHit.find('div.divider').after('<div id="selected"></div>');
    reSize();
}
}

キーボードだけではなく、上記の関数から呼び出されたとき、または左/右が moveDown()/moveUp() メソッドを呼び出したときに z-index が変更されない理由がわかりません。念のため、左/右は次のようになります。

function moveLeft()
{
unbindAll();
$('#section'+currentSec+' div.page').each(function(index, element) {
    if(index+1 == currentPage) {
        if($(element).prev().size()) {
            populate(currentSec, currentPage-1);
            $(this).animate({'left': $(window).width()}, 500, function() {
                currentPage--;
                bindAll();
            });
        }
        else {
            moveUp();
        }
    }
    });
}

どんな助けでも大歓迎です！ありがとう

4

1 に答える 1

0

z-index は、フッター ボタンのサイズを変更するために呼び出された reSize() 関数によって別の値にリセットされていました。サイズ変更機能を分離したところ、問題はなくなりました。コード自体に問題はなく、実行順序だけです。

助けてくれてありがとう！

于 2012-09-18T19:08:40.283 に答える