1

jQueryロード関数を使用してページの一部をロードし、カラーボックスを使用して表示しようとしています。私は現在使用しています

       $(document).ready(function()
       {
          $(".rest-menuitem a").click(function(event) 
          {
                event.preventDefault();
                var elementURL = $(this).attr("href");
                $.colorbox({ html: $.load(elementURL+ " .product" ) , width:'1000px',height:'80%', href: finalURL);
});
});

ロード機能用のセレクターが必要なため、これは機能しません。負荷を使用して問題を解決する方法はありますか？そうでない場合、代替の解決策はありますか？

4

3 に答える 3

4

お世話になっているのは.get（）メソッドだと思います。指定されたURLからデータをロードし、データが利用可能になるとコールバックを実行します。次に、受信したhtmlを自分でフィルタリングし、カラーボックスプラグインを使用できます。

このようなもの：

$(document).ready(function() {
    $(".rest-menuitem a").click(function(event) {
        event.preventDefault();
        $.get($(this).attr("href"), function(data) {
            $.colorbox({
                html: $(data).find('.product'),
                width: '1000px',
                height: '80%',
                href: finalURL);
            });
        });;
    });
});
于 2012-01-20T21:33:26.563 に答える
1

ajax情報が返される前または後に、カラーボックスのオープンを開始できます。前はおそらくユーザーにとってより理にかなっていますが、後は​​コードを適応させるのが簡単です。

$(document).ready(function()
{
    $(".rest-menuitem a").click(function(event) 
    {
        var elementURL = $(this).attr("href");
        var $html = $('<div />');
        $.when( $html.load(elementURL+ " .product" ) ).done(function(){
            $.colorbox({ html: $html.html() , width:'1000px',height:'80%', href: finalURL);
        });
        event.preventDefault();
    });
});

クリックすると、DOMに接続されていないdivにコンテンツが追加されます。そのajaxが完了すると、カラーボックスが起動され、ホームレスのdivの内容が入力されます。雄弁？番号。しかし、それはあなたがすでに行っていることに最も近い解決策です。

于 2012-01-20T21:28:19.087 に答える
0

あなたの質問から、外部ページの一部をカラーボックスにロードしようとしているようです。$ .get（）ではそれが可能だとは思いませんでした。

私はクライアントのためにこれをしなければなりませんでした、そしてこれは私が思いついた解決策です：

$('.popup-link').click(function(e) {
    e.preventDefault();

    var url = $(this).attr('href').replace('#', ' #');

    $('body').append('<div id="ajax-load-element-wrapper" style="display:none;"><div id="ajax-load-element" style="padding: 20px;"></div></div>');

    $('#ajax-load-element').load(url, function() {
        $.colorbox({
            href: '#ajax-load-element',
            width: 600,
            height: 400,
            inline: true,
            opacity: .7
        });
    }); 
});

これにより、$。load（）関数で必要とされるように、URL内の要素が自動的に分離されます。

これは、タグで次のようなURLを使用することにより、適切な劣化を維持できることを意味します。

/test.html#div

$ .load（）で要求されるように、JSは#divの前にスペースを自動的に追加するためです。

于 2013-06-04T12:01:16.757 に答える