从 sifr 调用 javascript 替换了锚标记？

发布于 2024-07-26 22:52:55 字数 8841 浏览 7 评论 0原文

我正在使用 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 添加一些操作到导航中：

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

这些操作似乎不起作用，因为替换内容时锚标记被 sIFR 隐藏。如何向替换标签添加一些 jQuery 代码？我不想做类似下面的事情（并让 JavaScript 从 Flash 中调用），因为它有点违背了不引人注目的 javascript 的全部目的：

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

编辑（生成的 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>

原文

I'm using sIFR to replace my navigation text with a new font:

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

That works just fine. I'm then trying to add some actions to the navigation using jQuery:

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

These actions don't seem to be working though because the anchor tags are hidden by sIFR when the content is replaced. How does one add some jQuery code to replaced tags? I'd rather not do something like the following (and let javascript be called from Flash) as it sort of defeats the whole purpose of unobtrusive javascript:

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

Edit (generated 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&content=%253Ca%2520href%253D%2522/home/about%2522%2520target%253D%2522%2522%253EABOUT%253C/a%253E&width=55&renderheight=37&link=/home/about&target=&size=26&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&cursor=pointer&tunewidth=0&tuneheight=0&offsetleft=&offsettop=&fitexactly=true&preventwrap=false&forcesingleline=true&antialiastype=&thickness=&sharpness=&kerning=&gridfittype=pixel&flashfilters=&opacity=100&blendmode=&selectable=true&fixhover=true&events=false&delayrun=false&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&content=%253Ca%2520href%253D%2522/home/reel%2522%2520target%253D%2522%2522%253EREEL%253C/a%253E&width=42&renderheight=37&link=/home/reel&target=&size=26&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&cursor=pointer&tunewidth=0&tuneheight=0&offsetleft=&offsettop=&fitexactly=true&preventwrap=false&forcesingleline=true&antialiastype=&thickness=&sharpness=&kerning=&gridfittype=pixel&flashfilters=&opacity=100&blendmode=&selectable=true&fixhover=true&events=false&delayrun=false&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&content=%253Ca%2520href%253D%2522/home/contact%2522%2520target%253D%2522%2522%253ECONTACT%253C/a%253E&width=76&renderheight=37&link=/home/contact&target=&size=26&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&cursor=pointer&tunewidth=0&tuneheight=0&offsetleft=&offsettop=&fitexactly=true&preventwrap=false&forcesingleline=true&antialiastype=&thickness=&sharpness=&kerning=&gridfittype=pixel&flashfilters=&opacity=100&blendmode=&selectable=true&fixhover=true&events=false&delayrun=false&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&content=%253Ca%2520href%253D%2522/archive%2522%2520target%253D%2522%2522%253EARCHIVE%253C/a%253E&width=72&renderheight=37&link=/archive&target=&size=26&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&cursor=pointer&tunewidth=0&tuneheight=0&offsetleft=&offsettop=&fitexactly=true&preventwrap=false&forcesingleline=true&antialiastype=&thickness=&sharpness=&kerning=&gridfittype=pixel&flashfilters=&opacity=100&blendmode=&selectable=true&fixhover=true&events=false&delayrun=false&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&content=%253Ca%2520href%253D%2522/login%2522%2520target%253D%2522%2522%253ELOGIN%253C/a%253E&width=50&renderheight=37&link=/login&target=&size=26&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&cursor=pointer&tunewidth=0&tuneheight=0&offsetleft=&offsettop=&fitexactly=true&preventwrap=false&forcesingleline=true&antialiastype=&thickness=&sharpness=&kerning=&gridfittype=pixel&flashfilters=&opacity=100&blendmode=&selectable=true&fixhover=true&events=false&delayrun=false&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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千里故人稀 2024-08-02 22:52:55

根据 626595 和 801642，点击事件不会传播出去。如果您使用 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
}

Mark Wubben 的答案< 此论坛帖子中的 /a> 对 getAncestor< 非常有启发/code> 和 onRelease

According to 626595 and 801642, the click event doesn't get propagated out. If you're using sIFR 3, there's an onRelease callback you can pass into sIFR.replace(), which gets given a FlashInteractor object. From there you can use getAncestor() to get access to the replaced element.

So, your code will probably look something like the following. (this is untested by me)

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's answer in this forum post was very enlightening for getAncestor and onRelease

回复收藏 0 原文

你丑哭了我 2024-08-02 22:52:55

您是否尝试过使用 .live 方法？实时方法文档

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

这可能是一个稍微修改一下的情况，也许添加事件到 .sifr 替换的元素。我有一段时间没有使用 sifr 所以我的记忆对它插入的内容有点生疏了。

也许可以发布生成的 HTML 示例。

希望有帮助。

Have you tried using the .live method? Live method docs

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

It may be a case of hacking around a little, maybe adding the events to the .sifr-replaced elements. I haven't used sifr in a while so my memory is a little rusty on what it inserts.

Maybe post a sample of the generated HTML.

Hope that helps.

回复收藏 0 原文

~没有更多了~