Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Раскрывающиеся пункты сайта

Автор: SoWa 20.7.2009, 16:36

Не знал, в какой раздел вопрос положить- вроде как надо DHTML, а это с JS связано.
В общем, необходимо реализовать следующую конструкцию на сайте:
Краткий текст(пару строк), а слева от него маленькая кнопочка-плюсик, при нажатии на которую бы вниз раскрывалась статья, находящаяся под этим текстом.
Нужна именно такая реализация, чтобы клиенты фирмы могли просмотреть характеристики сразу нескольких товаров. Вот так заказчик так попросил :(

Автор: diadiavova 20.7.2009, 19:04

Что-то типа такого?

Код


<html>
<head>
    <title>Plus open</title>

    <script type="text/javascript">
        function togle(src)
        {
            src.innerHTML = src.innerHTML == "+" ? "-" : "+";
            var divs = src.parentNode.parentNode.getElementsByTagName("div");
            var exp = divs[divs.length - 1];
            exp.className = exp.className == "expandableopen" ? "expandableclose" : "expandableopen";

        }    
        
    </script>

    <style type="text/css">
        .expandableclose
        {
            display: none;
        }
        .expandableopen
        {
            display: block;
        }
        .plusminus
        {
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="aaa">
        <div>
            <span onclick="togle(this);" class="plusminus">+</span><span>Заголовок 1</span>
        </div>
        <div class="expandableclose">
            Раскрывающееся содержимое 1
        </div>
    </div>
    <div>
        <div>
            <span onclick="togle(this);" class="plusminus">+</span><span>Заголовок 2</span>
        </div>
        <div class="expandableclose">
            Раскрывающееся содержимое 2
        </div>
    </div>
</body>
</html>

Автор: SoWa 20.7.2009, 19:18

Класс!!! Спасибо большое! Держи плюсик smile

//А как можно заменить плюсик и минусик на картиночки? ^_^ В скрипте же нельзя в функции в кавычках вместо значения вставить хтмл тэг?

Автор: Itsys 20.7.2009, 19:34

Цитата(SoWa @ 20.7.2009, 19:18

)

В скрипте же нельзя в функции в кавычках вместо значения вставить хтмл тэг

Можно

Автор: diadiavova 20.7.2009, 19:48

Цитата(Itsys @ 20.7.2009, 20:34

)

Можно

Но не нужно. В этом случае плюсики надо отображать не при помощи span, а как картинку, а менять её присвоив её свойству src нужное значение.

тое сть сами блоки будут выглядеть так

Код


    <div>
        <div>
            <input onclick="togle(this);" type="image" src="plus.jpg" /><span>Заголовок</span>
        </div>
        <div class="expandableclose">
            Раскрывающееся содержимое
        </div>
    </div>

А функция так

Код


    function togle(src)
    {
        src.src = src.src == "plus.jpg" ? "minus.jpg" : "plus.jpg";
        var divs = src.parentNode.parentNode.getElementsByTagName("div");
        var exp = divs[divs.length - 1];
        exp.className = exp.className == "expandableopen" ? "expandableclose" : "expandableopen";

    }

Добавлено через 4 минуты и 49 секунд
Это конечно примерно, потомучто тут могут возникнуть проблемы с абсолютным/относительным адресом, разные браузеры могут по-разному реагировать, но в принципе, если проблема возникнет, то решить её можно, например введя дополнительный атрибут, который будет показывать какую картинку ставить или что-то в этом роде. smile

Автор: SoWa 20.7.2009, 19:53

Во, спасибки! Я так и подумал, что это не ПХП, где можно напрямую воткнуть тэг.

Автор: diadiavova 20.7.2009, 19:56

Тэг воткнуть можно. Но это не лучшее решение. Конечно при таких условиях к серьёзным тормозам это не приведёт, но всё же, надо понимать, что всякий раз при создании элемента при помощи innerHTML сначала происходит разбор текста, а это ни к чему

Автор: SoWa 20.7.2009, 20:01

Цитата(diadiavova @ 20.7.2009, 19:48

)

src.src = src.src == "plus.jpg" ? "minus.jpg" : "plus.jpg";

Все-же продолжу вопросы smile

Объясни мне плиз эту строку. Ибо хочется разобраться... ну и при сворачивании содержимого минус не меняется на плюс.

Автор: diadiavova 20.7.2009, 20:20

"minus.jpg" и "plus.jpg" - это адреса картинок.
Параметр функции src это ссылка на элемент, отображающий плюсик. Можно получить её и по-другому, но там в разных браузерах способ отличается, вот я и не стал заморачиваться. То есть, когда клацаешь по плюсику в функции-обработчике проверяется значение свойства src и меняется на другое.
Я не проверял как это работает, но написал, что могут быть проблемы. Когда свойству присваивается значение оно может быть и относительным адресом картинки, а будет ли этот элемент возвращать его в такожем виде - хз, надо пробовать.

Можно такой вариант попробовать

Код


    function togle(src)
    {
        var divs = src.parentNode.parentNode.getElementsByTagName("div");
        var exp = divs[divs.length - 1];
        exp.className = exp.className == "expandableopen" ? "expandableclose" : "expandableopen";
        src.src = exp.className == "expandableopen" ? "minus.jpg" : "plus.jpg";
    }

Он, видимо, понадёжнее.

Автор: SoWa 20.7.2009, 20:25

А можно ли вместо строки, меняющей плюс на минус написать примерно такую конструкцию, как по старинке делали в Паскале:

Код


if (src=='plus.jpg') {src='minus.jpg'} else {src='plus.jpg'}

ибо меня пугают этот вопросительный знак и двоеточие smile

Цитата(diadiavova @ 20.7.2009, 20:20

)

"expandableopen" ? "minus.jpg" : "plus.jpg";

Автор: Itsys 20.7.2009, 20:36

SoWa, можно и без фигурных скобок

Добавлено через 1 минуту и 1 секунду
а так запись элементарная: <условие>?<тогда>:<иначе>

Автор: diadiavova 20.7.2009, 20:39

Цитата(SoWa @ 20.7.2009, 21:25

)

ибо меня пугают этот вопросительный знак и двоеточие

Это то же самое. И на сколько мне известно существовало всегда в си-подобных язык. Дело вкуса.

Добавлено через 4 минуты и 46 секунд
Правда последний вариант будет выглядеть так

Код


if( exp.className == "expandableopen") src.src ="minus.jpg" else src.src = "plus.jpg";

Автор: SoWa 20.7.2009, 20:43

Itsys, люблю порядок.
diadiavova, никогда не использовал такого, не привык такое читать smile

Но все работает, спасибо!
После поступления займусь JS- буду чаще появляться