Specificarea proprietății href a casetei de culoare când se declanșează o casetă de culoare

Este posibil să specificați adresa URL țintă pentru cutia de culori în momentul clicului pe butonul real care declanșează caseta de culori.

În momentul de față am funcția de legare a documentelor:

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

Cu toate acestea, proprietatea href depinde de valoarea unei liste derulante pe care nu o cunosc atunci când mai întâi leagă culoarea cu butonul.

0

2 răspunsuri

As mentioned in the Colorbox Docs

puteți seta apelul "onOpen" (și "onLoad", de asemenea), care ar trebui să se declanșeze înainte ca colorbox-ul să înceapă încărcarea conținutului specificat în țintă, oferindu-vă șansa de al modifica

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

UPDATE Probably simpler solution - colorbox allows use of function instead of static value

$(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
    });
});
0
adăugat
Hi Peter, cum specificați adresa URL în cadrul evenimentului onOpen?
adăugat autor FloatLeft, sursa

Ați reușit acest lucru ... Această abordare ocolește manevrarea automată onClick a pluginului. Apelați plugin-ul la propriul dvs. eveniment după ce ați dat seama ce valoare href doriți să utilizați.

În fragmentul de cod de mai jos, var myHref este static, dar ați putea scrie un pic de JS pentru al seta din sursa de date.

BTW, cred că aveți o greșeală pe proprietatea înălțime - semnele de duplicat%?

<script>
        $(document).ready(function(){
            $('.button').click( function() {
                var myHref = "/someHREF";
                $.colorbox({
                    width: "50%", 
                    height: "50%", 
                    iframe: true, 
                    href: myHref, 
                    opacity: 0.6
                });             
            });
        });             
</script>
0
adăugat
Adăugat e.preventDefault (); pentru link-urile .
adăugat autor AfromanJ, sursa
Bună Kevin, da, ai dreptate. Cea mai ușoară cale este ca proprietatea href să obțină valoarea de la o funcție: href: function() {return "/ hRef"},
adăugat autor FloatLeft, sursa