Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Раскрывающиеся пункты сайта 
:(
    Опции темы
SoWa
Дата 20.7.2009, 16:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Харекришна
****


Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74



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


--------------------
Всем добра smile
PM MAIL ICQ   Вверх
diadiavova
Дата 20.7.2009, 19:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Доктор Зло(диагност, настоящий, с лицензией и полномочиями)
****


Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 142



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

<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>



--------------------
Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile
PM   Вверх
SoWa
Дата 20.7.2009, 19:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Харекришна
****


Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74



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


--------------------
Всем добра smile
PM MAIL ICQ   Вверх
Itsys
Дата 20.7.2009, 19:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34



Цитата(SoWa @  20.7.2009,  19:18 Найти цитируемый пост)
В скрипте же нельзя в функции в кавычках вместо значения вставить хтмл тэг

Можно
PM MAIL WWW Skype   Вверх
diadiavova
Дата 20.7.2009, 19:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Доктор Зло(диагност, настоящий, с лицензией и полномочиями)
****


Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 142



Цитата(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 


--------------------
Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile
PM   Вверх
SoWa
Дата 20.7.2009, 19:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Харекришна
****


Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74



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


--------------------
Всем добра smile
PM MAIL ICQ   Вверх
diadiavova
Дата 20.7.2009, 19:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Доктор Зло(диагност, настоящий, с лицензией и полномочиями)
****


Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 142



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


--------------------
Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile
PM   Вверх
SoWa
Дата 20.7.2009, 20:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Харекришна
****


Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74



Цитата(diadiavova @  20.7.2009,  19:48 Найти цитируемый пост)
 src.src = src.src == "plus.jpg" ? "minus.jpg" : "plus.jpg";

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


--------------------
Всем добра smile
PM MAIL ICQ   Вверх
diadiavova
Дата 20.7.2009, 20:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Доктор Зло(диагност, настоящий, с лицензией и полномочиями)
****


Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 142



"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";
    }    

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

Это сообщение отредактировал(а) diadiavova - 20.7.2009, 20:20


--------------------
Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile
PM   Вверх
SoWa
Дата 20.7.2009, 20:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Харекришна
****


Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74



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

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

ибо меня пугают этот вопросительный знак и двоеточие smile
Цитата(diadiavova @  20.7.2009,  20:20 Найти цитируемый пост)
"expandableopen" ? "minus.jpg" : "plus.jpg";




--------------------
Всем добра smile
PM MAIL ICQ   Вверх
Itsys
Дата 20.7.2009, 20:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34



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

Добавлено через 1 минуту и 1 секунду
а так запись элементарная: <условие>?<тогда>:<иначе>
PM MAIL WWW Skype   Вверх
diadiavova
Дата 20.7.2009, 20:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Доктор Зло(диагност, настоящий, с лицензией и полномочиями)
****


Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 142



Цитата(SoWa @  20.7.2009,  21:25 Найти цитируемый пост)
ибо меня пугают этот вопросительный знак и двоеточие

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

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

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



--------------------
Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile
PM   Вверх
SoWa
Дата 20.7.2009, 20:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Харекришна
****


Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74



Itsys, люблю порядок.
diadiavova, никогда не использовал такого, не привык такое читать smile Но все работает, спасибо!
После поступления займусь JS- буду чаще появляться


--------------------
Всем добра smile
PM MAIL ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0554 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.