0

このNextLevelSearchのように、jqueryでアニメーション化された検索フォームを作成しました。検索フォームを開いてページを更新しても、これが閉じないようにしたいと思います。どうすればこれを達成できますか？

私は試してみましたが、うまくe.preventDefault();いきreturn false;ません。それは私の問題とは何の関係もないことを私は知っています。

これは私のコードです：

$globalsearch_submit.click(function(){
    $('#stat').hide();
    $('.wrapper-simple').animate({'width':'275px'})
        .end().find('.wrapper-simple input[type=text]').css({opacity: 0, visibility: "visible"}).animate({'width': '231px', opacity: 1}) 
        .end().find('.wrapper-simple .button').animate({ 'right': '40px' })
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'235px', opacity: 1}, 10)               
    return false;
}); 
$('.wrapper-simple input[type=submit]').click(function() {
    $('#stat').show();
    $('#stat').delay(500).css('opacity',0).show().animate({opacity:1},100); 

    $('.wrapper-simple').animate({'width':'40px'}) 
        .end().find('.wrapper-simple input[type=text]').animate({'width': '1px', opacity: 0})
        .end().find('.wrapper-simple .button').animate({ 'right': '0' })
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'0', opacity: 0}).attr('value', ''); 
    return false;
});

助けてください！ありがとうございました。

（英語が下手でごめんなさい）

4

1 に答える 1

2

ドキュメント ハッシュ (window.location.hash) を使用して、ページの現在の状態を保存します。

$('.wrapper-simple input[type=submit]').click(function() {
    $('#stat').show();
    $('#stat').delay(500).css('opacity',0).show().animate({'opacity':1},100); 

    $('.wrapper-simple').animate({'width':'40px'}) 
        .end().find('.wrapper-simple input[type=text]').animate({'width': '1px', 'opacity': 0})
        .end().find('.wrapper-simple .button').animate({'right': 0})
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft': 0, 'opacity': 0}).attr('value', '');

    document.location.hash='form';

    return false; // not related to this, but needed for other reasons
});

（この例では「フォーム」に設定しているため、ボタンをクリックするとページの URL は「mysite.com/mypage.htm#form」と表示されます。使用できる文字には一定の制限がありますが、好きなものを使用できます。 — この回答を参照してください: List of valid characters for the fragment identifier in an URL? )

ページが読み込まれると、このタグを検出できます。

$(document).ready(function(){
    var h=window.location.hash.replace(/^#/,'');
    if(h==='form'){
        $('#stat').css({'opacity':1}).show(); 

        $('.wrapper-simple').css({'width':'40px'}) 
            .end().find('.wrapper-simple input[type=text]').css({'width': '1px', 'opacity': 0})
            .end().find('.wrapper-simple .button').css({'right': 0})
            .end().find('.wrapper-simple input[type=submit]').css({'marginLeft': 0, 'opacity': 0}).attr('value', '');
    }
}

コードをコピーしましたが、アニメーション呼び出しを単純な css 呼び出しに変更して、すぐに変更したことに注意してください。

これは、ユーザーがボタンをクリックすると、ページの更新、またはブックマーク、閉じ、ブックマークからの再起動などにより、フォームがすぐに開かれることを意味します (ページが読み込まれるとわずかなちらつきが発生します)。避けるべきより多くの作業）。また、これはますます問題になっている Cookie を使用しません。フォームを再び閉じたものとしてマークするには、ハッシュを別のもの (空の文字列など) に設定するだけです。

Twitter、Google、Facebook、その他多くの企業がこの手法を使用しています。

于 2013-03-03T17:09:05.597 に答える