Question

我正在使用ajax工具包手风琴扩展器，当我尝试在内容部分中嵌入一些闪光灯时，我发现它表现得有点“时髦”。

您可以在http://kristinsconfections.com/gallery.aspx看到我现在所做的工作。正如你可以看到当你切换手风琴时，它有点不稳定。我正在从flickr中拉动闪光幻灯片，所以我根本无法控制它。该网站仅适用于想要成为面包师的朋友，所以它不是高优先级，只是非常令人沮丧!!我能用javascript，.net甚至jquery做什么吗？

以下是我在该页面上使用的确切代码：

<cc1:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
        HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"
        FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None">
        <Panes>
            <cc1:AccordionPane ID="pnlCakes" runat="server">
                <Header><div ><span style="float:left;">Cakes</span></div></Header>
                <Content>
                    <object width="572" height="429" type="application/x-shockwave-flash"
                     data="http://www.flickr.com/apps/slideshow/show.swf?v=67089"> 
                    <param name="flashvars" value="&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640424865%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640424865%2F&set_id=72157612640424865&jump_to=" />
                    <param name="allowFullScreen" value="true" />
                    <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=67089" />
                    </object>
                </Content>
            </cc1:AccordionPane>
             <cc1:AccordionPane ID="pnlCookies" runat="server">
                <Header><div ><span style="float:left;">Cookies</span></div></Header>
                <Content>
                 <object width="572" height="429"  type="application/x-shockwave-flash"
                 data="http://www.flickr.com/apps/slideshow/show.swf?v=67089"> 
                <param name="flashvars" value="&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640405779%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640405779%2F&set_id=72157612640405779&jump_to=" />
                <param name="allowFullScreen" value="true" />
                <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=67089" />
                </object>
                </Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane ID="pnlCupcakes" runat="server">
                <Header><div ><span style="float:left;">Cupcakes</span></div></Header>
                <Content>
                <object width="572" height="429"  type="application/x-shockwave-flash"
                 data="http://www.flickr.com/apps/slideshow/show.swf?v=67089"> 
                <param name="flashvars" value="&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612589253131%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612589253131%2F&set_id=72157612589253131&jump_to=" />
                <param name="allowFullScreen" value="true" />
                <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=67089" />
                </object>
                </Content>
            </cc1:AccordionPane>
        </Panes>
</cc1:Accordion>

Answer 1

我发现Ajax工具包的东西太笨重了。 JQuery易于使用，具有良好的跨浏览器支持和可扩展性，我们优先使用它，我建议你也这样做。 JQuery UI套件中有一个accordian widget，可以满足要求。

如果将所有Flash影片加载到隐藏的div中会导致性能不佳，则可以在可以加载Flash的位置进行更改。这是在手风琴页面上记录的（可以使用JQuery轻松完成）。

Answer 2

在firefox中似乎是一个长期存在的bug并非特定于任何特定小部件。我最好的尝试：

<script type="text/javascript">
    function pageLoad() {
        var acc = $find('<%= MyAccordion.ClientID %>_AccordionExtender');
        acc.add_selectedIndexChanged(MyAccordion_SelectedIndexChanged);
    }
    function MyAccordion_SelectedIndexChanged(sender) {
        $("object").css("visibility", "hidden");
        setTimeout(
            function() { 
                $("object").eq(sender.get_SelectedIndex()).css("visibility", "visible"); 
            }, 1000);
    }
</script>

隐藏对象可见性，以便手风琴动画播放
等待1秒 - 希望足够长的时间让动画完成，但不要太长以至于明显滞后
显示隐藏的对象

这可以修复闪烁，但动画播放时flash对象会消失

Answer 3

我在FireFox3，IE8和Chrome下进行了测试，它实际上似乎在IE（版本8）中运行良好，在FF3和Chrome中效果不是很好。

我确实找到了某个遇到同样问题的this post，似乎将FadeTransitions属性设置为'False'修复了它，但我敢打赌它不是你希望的解决方案。

Answer 4

您是否尝试暂时将预览图像放入手风琴中？然后，当用户使用javascript点击图像以将其替换为闪存？我觉得那会好得多。

当有人选择手风琴中的不同窗格时（不确定要监视的事件 - 查看AccordionBehavior.js），然后你可以移除闪光灯，用图像替换它并继续。

我认为您不必担心导致问题的Flash /浏览器交互。

Answer 5

我建议也使用jQuery accordion widget。我已经使用它，它非常容易使用，重量轻，适用于所有浏览器，我发现没有任何错误。你可以选择很多皮肤，如果推动皮肤，那么制作你自己的皮肤并不是那么痛苦。

除此之外，请查看嵌入SWF的方式，尤其是wmode属性。有一篇很好的解释性文章here，你可以从那开始。您可以忽略GPU和direct模式，因为我认为您没有使用为Flash Player 10编译的SWF。

当然，您应该卸载不可见的Flash影片。

在asp.net中嵌入Flash的手风琴表现不佳

5 个答案: