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

Я пытаюсь использовать prototype и 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, метод работает как положено. Проблема в функции прототипа, которая не скрывает элементы. Любая помощь с благодарностью.
14.12.2008 06:58:32
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();
}
10
23.05.2017 12:17:05
О, я просто не знал, как сделать это правильно в прототипе :( Теперь я знаю, спасибо!
maxnk 14.12.2008 08:46:52

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

window.onload = bodyOnload;

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

1
14.12.2008 08:17:47

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

0
25.04.2013 00:04:36

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

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

Винсент

0
24.09.2009 16:27:03