Свой первый хабратопик я хотел бы посвятить созданию простого, элегантного и привычного каждумо механизма — Wizard.
Думаю, что большинство из Вас не однократно сталкивался с этим в процессе работы и каждый придумывал что-то свое. Я хотел бы предложить на суд общественности решение свое легкое и в тоже время простое решение.
Перейдем от лирики к делу…
Для продолжения нам понадобится:
1. библиотека prototype.js
2. две картинки
… и все.
Вот так это будет выглядеть в процессе:

Рабочий пример находится здесь.
Идея очень простая: на каждом шаге визарда заменять list-style-image для элементов списка. Тривиально, но очень наглядно. + Ко всему решение получилось достаточно гибкое и может быть легко встроено в существующие приложения.
P.S. Все выше описанное было сделано специально для первого хабратопика и не является законченным приложением. ;) имейте это пожалуйста ввиду при оценке материала.
Думаю, что большинство из Вас не однократно сталкивался с этим в процессе работы и каждый придумывал что-то свое. Я хотел бы предложить на суд общественности решение свое легкое и в тоже время простое решение.
Перейдем от лирики к делу…
Для продолжения нам понадобится:
1. библиотека prototype.js
2. две картинки
… и все.
Вот так это будет выглядеть в процессе:

Рабочий пример находится здесь.
Идея очень простая: на каждом шаге визарда заменять list-style-image для элементов списка. Тривиально, но очень наглядно. + Ко всему решение получилось достаточно гибкое и может быть легко встроено в существующие приложения.
P.S. Все выше описанное было сделано специально для первого хабратопика и не является законченным приложением. ;) имейте это пожалуйста ввиду при оценке материала.