2009-07-03 2 views
1

ich sIFR bin mit meinem Navigations Text mit einer neuen Schriftart ersetzen:Aufruf von JavaScript von Sifr ersetzt Anker-Tags?

<ul> 
    <li><a href="#">about</a></li> 
    <li><a href="#">reel</a></li> 
    <li><a href="#">contact</a></li> 
    <li><a href="#">archive</a></li> 
    <li><a href="#">login</a></li> 
</ul> 

sIFR.replace(futura, { 
    css: [ 
     '.sIFR-root { background-color:transparent; color: #999999; cursor:pointer; font-size:26px; text-transform:uppercase; }', 
     'a { color: #999999; text-decoration:none; }', 
     'a:hover { color: #CCCCCC; text-decoration:none; }' 
    ], 
    fitExactly:true, 
    forceClear:true, 
    forceSingleLine:true, 
    selector: '#navigation ul li', 
    transparent:true 
}); 

Das funktioniert gut. Ich versuche dann einige Aktionen auf die Navigation hinzufügen jQuery:

$(document).ready(function(){ 
    $("#navigation ul li a").click(function(event){ 
     event.preventDefault(); 
     alert("nav clicked"); 
    }); 
}); 

Diese Maßnahmen scheinen nicht, obwohl zu arbeiten, weil die Anker-Tags von sIFR versteckt werden, wenn der Inhalt ersetzt. Wie fügt man einigen ersetzten Tags einen jQuery-Code hinzu? Ich möchte lieber nicht so etwas wie die folgenden (und lassen Sie Javascript aus dem Flash aufgerufen werden), wie es Art der ganze Zweck der unaufdringliche Javascript besiegt:

<a href="javascript:gotoSection('about');">about</a> 

Edit (erzeugte HTML):

<ul> 
    <li style="" class="sIFR-replaced"><object width="88" height="37" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_0" name="sIFR_replacement_0" data="/swf/bfuturah.swf" style=""><param name="flashvars" value="id=sIFR_replacement_0&amp;content=%253Ca%2520href%253D%2522/home/about%2522%2520target%253D%2522%2522%253EABOUT%253C/a%253E&amp;width=55&amp;renderheight=37&amp;link=/home/about&amp;target=&amp;size=26&amp;css=.sIFR-root%257Bcolor%253A%2523999999%253B%257Da%257Bcolor%253A%2523999999%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523CCCCCC%253Btext-decoration%253Anone%253B%257D&amp;cursor=pointer&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=true&amp;preventwrap=false&amp;forcesingleline=true&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/><param name="wmode" value="transparent"/><param name="bgcolor" value="transparent"/><param name="allowScriptAccess" value="always"/><param name="quality" value="best"/></object><span class="sIFR-alternate" id="sIFR_replacement_0_alternate"><a href="/home/about">about</a></span></li> 
    <li style="" class="sIFR-replaced"><object width="58" height="37" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_1" name="sIFR_replacement_1" data="/swf/bfuturah.swf" style=""><param name="flashvars" value="id=sIFR_replacement_1&amp;content=%253Ca%2520href%253D%2522/home/reel%2522%2520target%253D%2522%2522%253EREEL%253C/a%253E&amp;width=42&amp;renderheight=37&amp;link=/home/reel&amp;target=&amp;size=26&amp;css=.sIFR-root%257Bcolor%253A%2523999999%253B%257Da%257Bcolor%253A%2523999999%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523CCCCCC%253Btext-decoration%253Anone%253B%257D&amp;cursor=pointer&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=true&amp;preventwrap=false&amp;forcesingleline=true&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/><param name="wmode" value="transparent"/><param name="bgcolor" value="transparent"/><param name="allowScriptAccess" value="always"/><param name="quality" value="best"/></object><span class="sIFR-alternate" id="sIFR_replacement_1_alternate"><a href="/home/reel">reel</a></span></li> 
    <li style="" class="sIFR-replaced"><object width="116" height="37" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_2" name="sIFR_replacement_2" data="/swf/bfuturah.swf" style=""><param name="flashvars" value="id=sIFR_replacement_2&amp;content=%253Ca%2520href%253D%2522/home/contact%2522%2520target%253D%2522%2522%253ECONTACT%253C/a%253E&amp;width=76&amp;renderheight=37&amp;link=/home/contact&amp;target=&amp;size=26&amp;css=.sIFR-root%257Bcolor%253A%2523999999%253B%257Da%257Bcolor%253A%2523999999%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523CCCCCC%253Btext-decoration%253Anone%253B%257D&amp;cursor=pointer&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=true&amp;preventwrap=false&amp;forcesingleline=true&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/><param name="wmode" value="transparent"/><param name="bgcolor" value="transparent"/><param name="allowScriptAccess" value="always"/><param name="quality" value="best"/></object><span class="sIFR-alternate" id="sIFR_replacement_2_alternate"><a href="/home/contact">contact</a></span></li> 
    <li style="" class="sIFR-replaced"><object width="110" height="37" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_3" name="sIFR_replacement_3" data="/swf/bfuturah.swf" style=""><param name="flashvars" value="id=sIFR_replacement_3&amp;content=%253Ca%2520href%253D%2522/archive%2522%2520target%253D%2522%2522%253EARCHIVE%253C/a%253E&amp;width=72&amp;renderheight=37&amp;link=/archive&amp;target=&amp;size=26&amp;css=.sIFR-root%257Bcolor%253A%2523999999%253B%257Da%257Bcolor%253A%2523999999%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523CCCCCC%253Btext-decoration%253Anone%253B%257D&amp;cursor=pointer&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=true&amp;preventwrap=false&amp;forcesingleline=true&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/><param name="wmode" value="transparent"/><param name="bgcolor" value="transparent"/><param name="allowScriptAccess" value="always"/><param name="quality" value="best"/></object><span class="sIFR-alternate" id="sIFR_replacement_3_alternate"><a href="/archive">archive</a></span></li> 
<a href="/archive"> </a><li style="" class="sIFR-replaced"><object width="80" height="37" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_4" name="sIFR_replacement_4" data="/swf/bfuturah.swf" style=""><param name="flashvars" value="id=sIFR_replacement_4&amp;content=%253Ca%2520href%253D%2522/login%2522%2520target%253D%2522%2522%253ELOGIN%253C/a%253E&amp;width=50&amp;renderheight=37&amp;link=/login&amp;target=&amp;size=26&amp;css=.sIFR-root%257Bcolor%253A%2523999999%253B%257Da%257Bcolor%253A%2523999999%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523CCCCCC%253Btext-decoration%253Anone%253B%257D&amp;cursor=pointer&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=true&amp;preventwrap=false&amp;forcesingleline=true&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/><param name="wmode" value="transparent"/><param name="bgcolor" value="transparent"/><param name="allowScriptAccess" value="always"/><param name="quality" value="best"/></object><span class="sIFR-alternate" id="sIFR_replacement_4_alternate"><a href="/login">login</a></span></li> 
</ul> 

Antwort

2

Gemäß 626595 und 801642 wird das Klickereignis nicht weitergegeben. Wenn Sie sIFR 3 verwenden, gibt es einen onRelease Rückruf, den Sie an sIFR.replace() übergeben können, der ein FlashInteractor Objekt erhält. Von dort können Sie getAncestor() verwenden, um Zugriff auf das ersetzte Element zu erhalten.

So wird Ihr Code wahrscheinlich etwa wie folgt aussehen. (das von mir nicht getestet ist)

sIFR.replace(futura, { 
    /* the rest of your replace params */ 
    selector: '#navigation ul li', 
    transparent:true, 
    onRelease: function(fi) { liClick(fi.getAncestor()); } 
}); 

function liClick(li) { 
    var $li = $(li), 
     $a = $(li).find('a'); 
    //$li points at a jQuery'd list item 
    //$a points at the original anchor 
} 

Mark Wubben answer in this Forum Post für und onRelease

+0

Nizza sehr aufschlussreich war! Das hilft sehr. Gibt es eine Möglichkeit, die Standardaktion des Anchor-Tags in diesem Kontext (event.preventDefault oder false) abzubrechen? – typeoneerror

+0

Um ehrlich zu sein, bin ich mir nicht ganz sicher, ich habe sIFR nicht mit Links zuvor benutzt. Es gibt ein paar handliche Callbacks auf http://wiki.novemberborn.net/sifr3/JavaScript%2BMethods - modifyContentString oder modifyContent könnte wahrscheinlich verwendet werden, um die Links mit Spannen zu ersetzen, bevor sIFR sie verwendet, auf diese Weise werden sie nicht enden als Navigationselemente im Film. Einen Versuch ist es wert :-) –

0

Haben Sie versucht, die .live-Methode zu verwenden? Live method docs

$("#navigation ul li a").live('click', function(e){ 
//Code here 
}); 

Es kann ein Fall von Hacking um ein wenig, vielleicht die Ereignisse auf die .sifr-ersetzte Elemente hinzufügen. Ich habe Sifr seit einiger Zeit nicht mehr benutzt, so dass mein Gedächtnis ein wenig eingerostet ist.

Vielleicht ein Beispiel für die generierte HTML-Post.

Hoffnung, das hilft.