Вы находитесь здесь:Плагины jQuery»liStepSelection - jQuery Step Selection или пошаговая выборка

liStepSelection - jQuery Step Selection или пошаговая выборка

Пятница, 14 Сентябрь 2012 16:53 Автор 
jQuery Плагин liStepSelection позволяет организовать пошаговый переход между информационными блоками. Ниже приведено несколько примеров использования плагина liStepSelection в качестве пошаговой формы, текстового лабиринта, и пошаговой выборки

Пример работы на JSFIDDLE

Багфиксы

19.03.13 - Добавлен динамический расчет высоты блоков, добавлена работа с куками (теперь положение шагов будет восстановлено после обновления страницы)

Прочитано 13387 раз Последнее изменение Воскресенье, 30 Март 2014 17:23
Оцените материал
(2 голосов)

Комментарии   

 
Антон
# Антон 18.03.2013 22:00
Спасибо! Скрипт действительно очень хороший и нужный. Уже применил его на одном сайте в разделе контактов для организации точек продаж в разных городах, по метро, по типу продаж (опт\розница), получилось весьма здорово.

Вот только ни как не могу побороть неприятность с height. Дело в том, что высота блоков автоматом ставиться максимальная кого то одного блока. Дико смотрится когда портянка сайта пустая если в блоке (на одном из шагов) всего пару пунктов.

Скажите, как сделать, чтобы скрипт высчитывал высоту каждого блока в отдельности? А остальные блоки скрывал например display:none;
Ответить | Ответить с цитатой | Цитировать
 
 
Антон
# Антон 18.03.2013 22:03
И еще хотелось бы видеть поддержку jquery 1.9 =)
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 19.03.2013 11:02
Цитирую Антон:
Спасибо! Скрипт действительно очень хороший и нужный. Уже применил его на одном сайте в разделе контактов для организации точек продаж в разных городах, по метро, по типу продаж (опт\розница), получилось весьма здорово.

Вот только ни как не могу побороть неприятность с height. Дело в том, что высота блоков автоматом ставиться максимальная кого то одного блока. Дико смотрится когда портянка сайта пустая если в блоке (на одном из шагов) всего пару пунктов.

Скажите, как сделать, чтобы скрипт высчитывал высоту каждого блока в отдельности? А остальные блоки скрывал например display:none;

Сегодня ближе к ночи
Ответить | Ответить с цитатой | Цитировать
 
 
Антон
# Антон 19.03.2013 17:10
Спасибо! Буду ждать.

p.s. Нажал подписаться на комментарии, а уведомлений не было. Просто решил сам проверить, ответили вы или нет.
Ответить | Ответить с цитатой | Цитировать
 
 
Антон
# Антон 19.03.2013 17:28
И еще хотелось бы дать совет тем, кто будет пользоваться данным скриптом.

Разделяйте структуру шагов (step) по принципу step_1 -> step_1_2;step_1 _3 -> step_1_2_1 и т.д.

Так вы точно не запутаетесь и не будете каждый раз листать код вспоминая какой шаг ссылается на какой по счету =)


Обращение к автору.
Хоть скрипт и так хорош, но вы развивайте его. По мимо поддержки jquery 1.9 хотелось бы видеть также jquery.coockie (опционально) и чтобы класс подсветки выбранного пункта сохранялся на протяжении всей цепочки. Сейчас если выбрать что-то, то выбранный элемент выделяется фоном, далее идет очередной выбор и после чего если нажать кнопку назад то начинаешь теряться какой элемент выбран т.к. ни один уже не подсвечен (браузер: firefox(last), chrome(last)).

* И тогда на этом скрипте можно делать целый пошаговые инструкции, да и вообще много чего...
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 19.03.2013 17:48
Цитирую Антон:
И еще хотелось бы дать совет тем, кто будет пользоваться данным скриптом.

Разделяйте структуру шагов (step) по принципу step_1 -> step_1_2;step_1_3 -> step_1_2_1 и т.д.

Так вы точно не запутаетесь и не будете каждый раз листать код вспоминая какой шаг ссылается на какой по счету =)


Обращение к автору.
Хоть скрипт и так хорош, но вы развивайте его. По мимо поддержки jquery 1.9 хотелось бы видеть также jquery.coockie (опционально) и чтобы класс подсветки выбранного пункта сохранялся на протяжении всей цепочки. Сейчас если выбрать что-то, то выбранный элемент выделяется фоном, далее идет очередной выбор и после чего если нажать кнопку назад то начинаешь теряться какой элемент выбран т.к. ни один уже не подсвечен (браузер: firefox(last), chrome(last)).

* И тогда на этом скрипте можно делать целый пошаговые инструкции, да и вообще много чего...

Спасибо, я учту
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 20.03.2013 11:35
19.03.13 - Добавлен динамический расчет высоты блоков, добавлена работа с куками (теперь положение шагов будет восстановлено после обновления страницы)
Скачайте заново архив с демо /files/zip/liStepSelection.zip
Ответить | Ответить с цитатой | Цитировать
 
 
Антон
# Антон 20.03.2013 18:18
Спасибо огромное. Теперь это самый лучший скрипт!
Ответить | Ответить с цитатой | Цитировать
 
 
Павел
# Павел 04.11.2014 12:27
Подскажите, есть ли какой нибудь готовый скрипт для создания карточек вопросами? Для закрепления учебного материала. Прочел статью - при желании открыл оверлей и прошел вопросы?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 04.11.2014 14:14
Цитирую Павел:
Подскажите, есть ли какой нибудь готовый скрипт для создания карточек вопросами? Для закрепления учебного материала. Прочел статью - при желании открыл оверлей и прошел вопросы?

Что-то типа этого?
http://demo.masscode.ru/phraser/index.html
Писал для себя чтобы закрепить английский.
Ответить | Ответить с цитатой | Цитировать
 
 
Павел
# Павел 15.11.2014 18:59
Цитирую LiMasscode:
Цитирую Павел:
Подскажите, есть ли какой нибудь готовый скрипт для создания карточек вопросами? Для закрепления учебного материала. Прочел статью - при желании открыл оверлей и прошел вопросы?

Что-то типа этого?
http://demo.masscode.ru/phraser/index.html
Писал для себя чтобы закрепить английский.


Нет, немного не то.
По сути это как в учебниках но с вариантами ответов.
Вопрос: 5+5=?
Ответы:
5
6
8
10
20

Где при выборе ответа верный подсвечивается зеленым, а если вдруг выбор пал на неверный, то красным выбранный ответ. Ну и кнопка далее.

Такой маленький текст получается.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 15.11.2014 21:19
Цитирую Павел:
Цитирую LiMasscode:
Цитирую Павел:
Подскажите, есть ли какой нибудь готовый скрипт для создания карточек вопросами? Для закрепления учебного материала. Прочел статью - при желании открыл оверлей и прошел вопросы?

Что-то типа этого?
http://demo.masscode.ru/phraser/index.html
Писал для себя чтобы закрепить английский.


Нет, немного не то.
По сути это как в учебниках но с вариантами ответов.
Вопрос: 5+5=?
Ответы:
5
6
8
10
20

Где при выборе ответа верный подсвечивается зеленым, а если вдруг выбор пал на неверный, то красным выбранный ответ. Ну и кнопка далее.

Такой маленький текст получается.

Такого скрипта готового у меня нет, но можно написать
Ответить | Ответить с цитатой | Цитировать
 
Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="/" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Вы находитесь здесь:   ГлавнаяjQueryliStepSelection - jQuery Step Selection или пошаговая выборка