Колонка редактора
Мои знакомые скинхеды
© mrSiricks
Загораю как хочу
© mrSiricks
Оружие для всех
© mrSiricks
Сколько пива выпито за лето?
© mrSiricks

Облако тегов

Категории раздела
Видео игры [9]
Футбольное обозрение [10]
Созидательство [1]
Обзоры [2]
Философия [0]

Интересности
Интересная запись
в блоге:
У меня ружье, у тебя - собака [mrSiricks]

Статистика

LI.ru
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Топ-3
Тайм менеджмент - что за зверь и чем приправлять.
© LeNiN
Wow. Игра или наркотик?
© VelikiyKtulxu
Современная школа: что в ней нужно менять, а что сохранять?
© mrSiricks

Новости

Главная » 2011 » Январь » 31 » Красивые выпадающие блоки.
12:07
Красивые выпадающие блоки.
В общем, дело было так - кликнул по закладке, а открывается что-то убогое. Потом я вспомнил про то, что сайт-то я немного забросил и решил немного исправить положение... Правда исправление несколько затянулось - мысль была сначала такае - раскрытие и закрытие по клику, а не по наведению - для удобства. Но потом вспонился jQuery - и через две минуты готова однострочная реализация этого замысла с очень плавным раскрытием.

Code
function slide(id){
  $("#" + id).slideToggle("slow");
}

Самое интересное, что за несколько месяцев не работы с javascript'ом основы вспоминались сами собой... Странно, не правда ли?.. Ну... Результат был очень и очень красивый - но не безупречный... Не знаю зачем (не, серьёзно, зачем?), я решил сделать закрытие последнего открытого (если такое есть) блока. Проблема оказалось в том, что погубленные нервные клетки решили, как видимо, отомстить - я ни в какую не хотел вводить ещё одну переменную. Зачем-то сделал цикл, пробегающий по всем (!) элементам на странице и закрывающий, при новом "открытии", все "открытые" блоки. Не знаю, почему мне данная реализация не понравилась, но после написания пришёл немедленный ctrl+a, del. Удивительно, но перейдя через себя, я быстро (слишком быстро), введя переменную, сделал простую и логичную реализацию данной проблемы:

Code
var last = 0;

function slide(id){ //ну, id... да... но пишите в вызове функции класс без '#'
  $("#" + id).slideToggle("slow");
  if(last != 0 && last != id){
  $("#" + last).slideToggle("slow");
  }if(last != id)
  last = id;
  else
  last = 0;
}

Ну... А чтобы использовать чудо сие - вызываем данную функцию как-то так:

Code
<div class="title" onclick="slide(block);">TITLE</div>
<div class="block">$$$-MESG-$$$</div>

В обещем - всё слишком просто, чтобы разбираться, при базовых знания javaScript можно без труда разобраться!!! Ну, посдкажу разве, что в CSS у раскрываемого блока изменяется параметр display с block на none и обратно.




Категория: Созидательство | Просмотров: 2507 | Добавил: LeNiN | Теги: Design, jQuery, JavaScript, coding | Рейтинг: 0.0/0
Всего комментариев: 2


+1  
[1] mrSiricks   (04.02.2011 22:11) [Материал]
ммм четко

0  
[2] LeNiN   (12.02.2011 18:27) [Материал]
LeNiNЫГЫ!!!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Случайный афоризм
mrSiricks:
Что отличает СМИ от городской площади? Тематическая направленность и редакторский надзор
© мудрый журналист
Reклама

Поиск

Виджет яндекса!
Виджет Rндекс.Яu

добавить на Яндекс

Футбольное обозрение
ЦСКА: повод забить всегда найдется!
Зенит: путь к "Новому Марибору"
Жеребьевка ЛЧ: пусть все решит жребий.
Локомотив: не удержавшись на рельсах...
Сибирь: галопом по Лиге Европы.
Жеребьевка ЛЕ: а россиян только двое.
Чемпионат России. 19 тур: ухабы на дорогах лидеров.
ЕВРО 2012: Поехали!
ЕВРО 2012: Ошибка ценой в матч.
ЕВРО 2012: Два лица российского футбола.

Архив записей

Друзья сайта
Пять углов Стихи.ру
Сергей Прокопьев 1 на сервере Проза.ру
Живой Журнал
Журнал "Самиздат"

про ИГРЫ
Mount & Blade – Эпоха турниров. Похождения Оленевода с большим резаком
© mrSiricks
Mount & Blade: Warband - Корсары на суше?
© LeNiN
StarCraft II - Дело Сделано!
© LeNiN
StarCraft II: Wings of Liberty. И повторилось все как встарь
© mrSiricks

Новости Интернета


CopyRIGTH -=INTELECT Station=-
ALL RiGTH Reserved
Копирование с сайта допускается ТОЛЬКО при наличии в скопированном тексте активной (работающей) гиперссылки на его исходник размещенный на сайте IS.