Скрыть и показать элемент div с прототипом и сценарием

Я пытаюсь использовать прототип и 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, метод работает, как и ожидалось. Проблема в функции-прототипе, которая не скрывает элементы. Любая помощь будет принята с благодарностью.

person hoyt.dev    schedule 14.12.2008    source источник


Ответы (4)


maxnk уже рассмотрел основную проблему.

Но Prototype рекомендует использовать событие dom:loaded вместо window.onload:

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

Кроме того, вы можете попробовать Prototype Element#toggle или Element#hide вместо Element#setStyle (если только предупреждение на каждой странице не относится к вашему CSS).

function bodyOnload() {
    $('content1').hide();
    $('content2').hide();
}
person Jonathan Lonowski    schedule 14.12.2008
comment
О, я просто не знал, как это правильно сделать в прототипе :( Теперь знаю, спасибо! - person maxnk; 14.12.2008

Если вы хотите изначально скрыть элементы, недостаточно написать «функцию bodyOnload». Эту функцию следует вызывать при загрузке страницы, используя что-то вроде этого:

window.onload = bodyOnload;

И, конечно, советую попробовать jQuery :)

person maxnk    schedule 14.12.2008

Спасибо за эти приложения SlideUp и SlideDown.

Важное замечание: это не работает в ie7 и ie8, если вы не установите ширину для div, который хотите показать или скрыть.

Винсент

person Community    schedule 24.09.2009

Здорово! теперь это работает. Вы знаете, что это пример из книги, из которой я пытался извлечь уроки. Автор пренебрег этой очень важной частью, поскольку он вводил в заблуждение, говоря, что лучший способ сослаться на библиотеку эффектов в 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>

Книга имеет отличные отзывы на Amazon, но я не думаю, что кто-либо из рецензентов пытался использовать книгу. Все они оценивают объем, а не содержание книги. Ни один из примеров, которые я пытался использовать в книге, не сработал. Я должен был понять это для себя. Я думаю, вы могли бы сказать, что мне нужно прочитать другие части книги, чтобы понять определенный пример, но для такой большой книги можно ли это сделать? Если мне нужно узнать что-то, о чем упоминал автор ранее, не следует ли мне об этом напомнить, по крайней мере, с точки зрения такой большой книги, которая фактически является своего рода справочником? Если вам интересно: Ajax: полное руководство, автор Энтони Т. Холденер III

Обновление: автор использовал более старые версии библиотек Scriptaculous и Prototype, поэтому возникло недопонимание. Если вы получите эту книгу, постарайтесь помнить об этом. На самом деле я теперь глубоко уважаю книгу, хотя бы за ее объем.

person hoyt.dev    schedule 14.12.2008