使用原型和scriptaculous隐藏和显示div元素

时间:2008-12-14 06:58:33

标签: prototypejs

我正在尝试使用原型和scriptaculous来隐藏和显示div元素,但是利用原型setStyle属性的函数(下面)不起作用,我不确定是什么问题。

<script type="text/javascript" language="javascript">
    function bodyOnload() {
            $('content1').setStyle({ display: 'none' });
            $('content2').setStyle({ display: 'none' });
    }
</script>    



<script type="text/javascript" language="javascript">

    var currentId = null;

    Effect.Accordion = function (contentId) {
        var slideDown = 0.5;
        var slideUp = 0.5;

        contentId = $(contentId);

        if (currentId != contentId) {
            if (currentId == null) {
                new Effect.SlideDown(contentId, {duration: slideDown});
                } else {
                new Effect.SlideUp(currentId, {duration: slideUp});
                new Effect.SlideDown(contentId, {duration: slideDown});
            }
            currentId = contentId; 
        } else {
            new Effect.SlideUp(currentId, {duration: slideUp});
            currentId = null;
        }
    };
    </script>

前面的函数被这样调用:

<div id="accordion">
    <div id="part1">
        <div id="nav1" onclick="new Effect.Accordion('content1');">
            Post a comment 1
        </div>
        <div id="content1">
            <form id="form" name="form" action="post.php" method="post">
            <textarea name="commentbody" cols="20" rows="10"></textarea>
            <button type="submit">Post Comment</button>
            <input type="hidden" name="blogID" value="1" />
            <input type="hidden" name="userID" value="3" />
            <input type="hidden" name="parentID" value="7" />
            <div class="spacer"></div></form>
        </div>
    </div>
        <div id="part2">
        <div id="nav2" onclick="new Effect.Accordion('content2');">
            Post a comment 2
        </div>
        <div id="content2">
            <form id="form" name="form" action="post.php" method="post">
            <textarea name="commentbody" cols="20" rows="10"></textarea>
            <button type="submit">Post Comment</button>
            <input type="hidden" name="blogID" value="1" />
            <input type="hidden" name="userID" value="3" />
            <input type="hidden" name="parentID" value="7" />
            <div class="spacer"></div></form>
        </div>
    </div>
</div>

这是代码发生的事情。

  • 在ie和firefox中它什么也没做,但是当你点击调用effect.accordion方法的链接时,该方法按预期工作。问题在于原型功能不会隐藏元素。非常感谢任何帮助。

4 个答案:

答案 0 :(得分:10)

maxnk已涵盖主要问题。

但是,Prototype建议使用dom:loaded事件而不是window.onload

document.observe("dom:loaded", bodyOnload);

此外,您可以尝试使用Prototype的Element#toggleElement#hide而不是Element#setStyle(除非每个页面上的警告都适用于您的CSS)。

function bodyOnload() {
    $('content1').hide();
    $('content2').hide();
}

答案 1 :(得分:1)

如果你想最初隐藏元素,它就不足以编写“function bodyOnload”。 应该在页面加载时使用类似的东西调用此函数:

window.onload = bodyOnload;

当然,我建议你试试jQuery:)

答案 2 :(得分:0)

感谢SlideUp和SlideDown的这些应用。

一个重要的评论:如果没有为要显示或隐藏的div设置宽度,它在ie7和ie8下不起作用。

文森特

答案 3 :(得分:0)

大!它现在有效。你知道这是我试图从中学到的一本书中的一个例子。作者误解了这个非常重要的部分,正如他误导说在scriptaculous中引用效果库的最佳方式是这样的:

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>

而不是像:

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>

这本书对亚马逊有很好的评论,但我认为没有任何评论者试图使用这本书。他们都审查了它的数量而不是本书的内容。我试图在本书中使用的所有例子都没有奏效。我必须自己解决这个问题。我想你可以说我必须阅读本书的其他部分才能理解某个例子,但是对于一本很大的书,一个人真的能这样做吗?如果我必须知道作者之前提到过的东西,我不应该提醒它,至少在一本如此大的书中,实际上是一本参考书吗?如果你想知道:Ajax: The Definitive Guide, by Anthony T. Holdener III

更新:作者使用旧版本的Scriptaculous和Prototype库,这就是为什么会出现误解的原因。如果你得到这本书,试着记住这一点。实际上,我现在非常尊重这本书,只是因为它的剪切量。