使用Fx.Slide效果加载iframe

时间:2010-11-27 11:44:30

标签: mootools

有人能说出我做错了什么吗?问题是我有在iframe中打开的链接,并且我希望在单击链接后(以及在内容加载到iframe之后)使用幻灯片效果打开此iframe。这是我的代码:

JS:

 window.addEvent('domready', function(){

 var mySlide = new Fx.Slide('slider').hide();

 $$('.cal_titlelink').addEvent('click', function(e) {
         e = new Event(e);
     mySlide.slideIn();
     e.stop();
});
});

HTML:

    <a class="cal_titlelink" target="details" href="//address is created dynamically by php//">Link 1</a>
    <a class="cal_titlelink" target="details" href="//address is created dynamically by php//">Link 2</a>
....
    <div id="slider"><iframe name="details"></iframe></div>

在这里你可以看到它的工作原理http://wisko.pl/这是左边的日历。幻灯片效果有效,但iframe为空。当我删除滑块然后iframe加载但没有效果。如何使用幻灯片效果加载iframe内容?请帮忙。

1 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/ZJzjV/114/

var mySlide = new Fx.Slide('slider').hide(),
    myFrame = $('myFrame');


$$('.cal_titlelink').addEvent('click', function(e) {

    myFrame.innerHTML = '';

    e = new Event(e);
    mySlide.hide();
    e.stop();

    if (!myFrame.getProperty("src")) {
         myFrame.addEvent("load", function() {
            mySlide.slideIn();
            console.log("loaded");
        });
    }

    myFrame.setProperty('src',this.getProperty('href'));
});

通过添加一次加载事件来更新此功能,并在加载iframe后将其滑入。