2009-07-03 4 views
1

Я использую SIFR заменить мой навигационный текст с новым шрифтом:Вызов javascript из sifr заменил теги привязки?

<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 
}); 

Это работает просто отлично. Я тогда пытаюсь добавить некоторые действия для навигации с помощью JQuery: кажется, работает, хотя, потому что метки анкерные скрыты SIFR, когда содержимое заменяется

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

Эти действия не. Как добавить код jQuery для замеченных тегов? Я скорее бы не сделать что-то вроде следующего (и пусть Javascript вызывается из Flash), поскольку это своего рода поражения вся цель ненавязчивого JavaScript:

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

Edit (генерируется 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> 

ответ

2

Согласно 626595 и 801642, событие click не распространяется. Если вы используете sIFR 3, есть обратный вызов onRelease, который вы можете передать в sIFR.replace(), которому присваивается объект FlashInteractor. Оттуда вы можете использовать getAncestor(), чтобы получить доступ к замененному элементу.

Итак, ваш код, вероятно, будет выглядеть примерно так. (это не тестировалось мной)

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 
} 

Марк Wubben answer в-х this сообщения форума был очень поучителен для и onRelease

+0

Ниццы! Это очень помогает. Есть ли способ отменить действие по умолчанию тега привязки (event.preventDefault или вернуть false) в этом контексте? – typeoneerror

+0

Честно говоря, я не совсем уверен, я раньше не использовал sIFR со ссылками. Есть несколько удобных обратных вызовов в http://wiki.novemberborn.net/sifr3/JavaScript%2BMethods - modifyContentString или modifyContent, вероятно, можно использовать для замены ссылок с помощью пробелов, прежде чем sIFR их использует, таким образом они не будут в конечном итоге как элементы навигации в фильме. Это стоит сделать :-) –

0

Вы пробовали использовать метод .live? Live method docs

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

Это может быть случай взлома вокруг немного, возможно, добавление событий к .sifr замененный элементов. Я не использовал sifr в то время, поэтому моя память немного ржаветь на том, что она вставляет.

Возможно опубликовать образец сгенерированного HTML.

Надеюсь, что это поможет.