Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 13.08.2008, 22:03
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

and50,
Сформулируйте задачу, я не понял что должен делать код.
Ответить с цитированием
  #12 (permalink)  
Старый 13.08.2008, 22:09
Новичок на форуме
Отправить личное сообщение для and50 Посмотреть профиль Найти все сообщения от and50
 
Регистрация: 13.08.2008
Сообщений: 4

код работает правильно просто я не разбираясь в JS написал как мог и он получился очень громоздко.
при на жатии на i-ю ссылку должно поднятся вверх и открытся i-е меню, открытся i-й div и спрятатся i- я ссылка.
заранее спасибо
Ответить с цитированием
  #13 (permalink)  
Старый 14.08.2008, 10:44
Интересующийся
Отправить личное сообщение для M.C. Посмотреть профиль Найти все сообщения от M.C.
 
Регистрация: 12.08.2008
Сообщений: 10

Андрей, пытаюсь сделать как тут: http://anton.shevchuk.name/wp-demo/j...ccordion1.html
там справа есть иконка, когда закрыто, она показывает вниз, когда открыто - наверх (это один gif-рисунок, просто он стилями меняет свое положение)

вот как я представил код скрипта:
// Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
            // Ссылка на текущий класс:
            var currentClass = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement, classElement) {
            	// Запоминаем и прячем класс:
            	currentClass = classElement;
            	currentClass = document.getElementByClass("bg_headers");
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement, classElement) {
            	// Показываем класс и "забываем":
                currentClass = document.getElementbyClass("bg_headers_active");
                currentAnchor = null;

                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID, classID) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                var classElement = document.getElementByClass(classID)
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт этот div, то просто закрываем.
                    if (divElement === currentDiv) {
                        close(currentDiv, currentClass);
                    // Если открыт другой div, то закрываем и открываем текущий:
                    } else if(currentDiv != null) {
                        close(currentDiv, currentClass);
                        open(divElement, classElement);
                    // Иначе - просто открываем:
                    } else {
                        open(divElement, classElement);
                    }
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();


вот что у меня в CSS:

.bg_headers {
	background: #e9e7e7 url(../images/icons/arrow-square.gif) no-repeat right -51px;
	border: solid 1px #c4c4c4;
	padding: 3px;
}
.bg_headers:hover {
	background-color: #e3e2e2;
}
.bg_headers_active {
	background-position: right 5px;
}


но что-то не работает
Ответить с цитированием
  #14 (permalink)  
Старый 14.08.2008, 12:10
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

M.C.,
Вам нужно примерно следующее:
// Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
            // Текущая ссылка:
            var currentAnchor = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement, linkElement) {
                // Запоминаем и прячем ссылку:
                currentAnchor = linkElement;
                // Прибавляем "_active" к имени класса:
                currentAnchor.className += "_active";
 
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement) {
                // Убираем "_active" и "забываем":
                currentAnchor.className = currentAnchor.className.replace("_active", "");
                currentAnchor = null;
 
                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID, link) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт какой-то div - закрываем.
                    if(currentDiv != null) close(currentDiv);
                    // Открываем вызваный.
                    open(divElement, link);
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();


Только учтите, что картинка должна находиться внутри ссылки, и стили прописываются для этой ссылки.
Ответить с цитированием
  #15 (permalink)  
Старый 14.08.2008, 13:19
Интересующийся
Отправить личное сообщение для M.C. Посмотреть профиль Найти все сообщения от M.C.
 
Регистрация: 12.08.2008
Сообщений: 10

а если стиль для тега <td> ? я так понял в этом и проблема была, что я сделал для тега стиль, а тут скрипт для ссылки...
Ответить с цитированием
  #16 (permalink)  
Старый 14.08.2008, 13:33
Интересующийся
Отправить личное сообщение для M.C. Посмотреть профиль Найти все сообщения от M.C.
 
Регистрация: 12.08.2008
Сообщений: 10

подумал немного, видимо для <td> тоже надо указывать id, чтобы знать какому <td> в данный момент присваивать тот или иной класс?
Ответить с цитированием
  #17 (permalink)  
Старый 14.08.2008, 13:45
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Выложите html кусок, который у вас под эту задачу. Я же не могу догадаться, какой именно элемент вы меняете при открытии\закрытии элемента.

В том примере, который вы давали, сверху большая ссылка, внутри которой уже отображается изображение. Ссылку можно сделать блоковым элементом и задать ей размеры через css:
.класс_ссылки {
    display: block;
    width: 100%;
    padding: 6px 0 6px 15px;
}
Ответить с цитированием
  #18 (permalink)  
Старый 14.08.2008, 13:50
Интересующийся
Отправить личное сообщение для M.C. Посмотреть профиль Найти все сообщения от M.C.
 
Регистрация: 12.08.2008
Сообщений: 10

да, извините, вот кусок кода, для которого это должно работать:
<table width="100%">
<tr><td id="td1" class="bg_headers">
<a href="#" onclick="toggle('div1')">Ссылка 1</a>
</td></tr>
</table>
<div id="div1" class="myDiv">
Содержание 1
</div>


<table width="100%">
<tr><td id="td2" class="bg_headers">
<a href="#" onclick="toggle('div2')">Ссылка 2</a>
</td></tr>
</table>
<div id="div2" class="myDiv">
Содержание 1
</div>


<table width="100%">
<tr><td id="td3" class="bg_headers">
<a href="#" onclick="toggle('div3')">Ссылка 3</a>
</td></tr>
</table>
<div id="div3" class="myDiv">
Содержание 3
</div>


это стили:

.bg_headers {
	background: #e9e7e7 url(../images/icons/arrow-square.gif) no-repeat right -51px;
	border: solid 1px #c4c4c4;
	padding: 3px;
}
.bg_headers:hover {
	background-color: #e3e2e2;
}
.bg_headers_active {
	background-position: right 5px;
}

Последний раз редактировалось M.C., 14.08.2008 в 13:54.
Ответить с цитированием
  #19 (permalink)  
Старый 14.08.2008, 16:43
Интересующийся
Отправить личное сообщение для M.C. Посмотреть профиль Найти все сообщения от M.C.
 
Регистрация: 12.08.2008
Сообщений: 10

Сообщение от Андрей Параничев Посмотреть сообщение
M.C.,
Вам нужно примерно следующее:

Только учтите, что картинка должна находиться внутри ссылки, и стили прописываются для этой ссылки.
попробовал этот вариант, не работает хотя в этом случае именно для ссылки и с тем вариантом стиля, как вы указали ниже... видимо в коде что-то не так, но знаний не хватает понять где чего.... (а вернее их отсутствие).
Ответить с цитированием
  #20 (permalink)  
Старый 20.08.2008, 00:02
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

M.C.,
Я предлагал вот такой вариант. Если использовать таблицы принципиально, то могу объяснить, как исправить/переделать. Дело в том, что я написал сначала просто как пример, а сейчас - под конкретную задачу, и оба варианта не универсальны.
Вложения:
Тип файла: zip вариант.zip (2.0 Кб, 27 просмотров)
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Требутся создать сайт для художника, в качестве онлайн-портфолио. kir12 Элементы интерфейса 1 14.05.2008 18:42