2

カラーボックスをトリガーする実際のボタンをクリックしたときに、カラーボックスのターゲット URL を指定することは可能ですか。

現時点では、ドキュメントバインド関数にこれがあります:

$(function () {
    $(".button").colorbox({ width: "50%", height: "50%%", iframe: true, href: "/abc", opacity: 0.6 });
});

ただし、href プロパティは、最初にカラーボックスをボタンにバインドしたときにわからないドロップダウン リストの値に依存します。

4

2 に答える 2

5

ColorboxDocsで述べたように

コールバック「onOpen」（およびおそらく「onLoad」）を設定できます。これは、カラーボックスがターゲットで指定されたコンテンツの読み込みを開始する前に起動して、変更する機会を与える必要があります。

$(function () {
    $(".button").colorbox({ 
        width: "50%", 
        height: "50%%", 
        iframe: true, 
        href: "/abc", 
        opacity: 0.6,
        onOpen: function(){
          // modify target here
        }
    });
});

更新 おそらくより単純な解決策-カラーボックスは静的な値の代わりに関数の使用を可能にします

$(function () {
    $(".button").colorbox({ 
        width: "50%", 
        height: "50%", 
        iframe: true, 
        href: function(){
            // Since I can't see your markup I can't provide exact solution
            // but if your .button elm is an anchor then use
            var url = $(this).attr('href');
            // if you are obtaining the url from diff. elm, grab it from there
            // such as $('#your_element).attr('href') 
            return url;
        }, 
        opacity: 0.6
    });
});
于 2012-06-04T19:08:25.130 に答える
4

このようにできます... このアプローチは、プラグインの自動 onClick 処理をバイパスします。使用する href 値を決定した後、独自のイベントでプラグインを呼び出します。

以下のコード スニペットでは、var myHrefは静的ですが、js を少し記述して、データ ソースから設定することができます。

ところで、高さのプロパティにタイプミスがあると思います - 重複する % 記号??

<script>
        $(document).ready(function(){
            $('.button').click( function() {
                var myHref = "/someHREF";
                $.colorbox({
                    width: "50%", 
                    height: "50%", 
                    iframe: true, 
                    href: myHref, 
                    opacity: 0.6
                });             
            });
        });             
</script>
于 2012-06-05T05:28:31.030 に答える